自动生成作文的网站,网络公司网站建设费入什么科目,网站模板之家,怎么把产品卖到国外去前些天发现了一个巨牛的人工智能学习网站#xff0c;通俗易懂#xff0c;风趣幽默#xff0c;忍不住分享一下给大家。点击跳转到教程。
Vue教程文档#xff1a; https://cn.vuejs.org/v2/guide/
定义
实例#xff1a; new Vue()
挂载点: el
数据#xff1a;data
模…前些天发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住分享一下给大家。点击跳转到教程。
Vue教程文档 https://cn.vuejs.org/v2/guide/
定义
实例 new Vue()
挂载点: el
数据data
模板: template
方法methods
计算属性: computed类似 variable variable()
侦听器: watch 一旦数据变化都会触发
参数props
组件components 组件与实例的关系每一个组件都是一个Vue实例 父组件与子组件交互
父组件通过 属性 传递给子组件参数 子组件通过 发布事件$emit 传递给父组件参数前提是父组件需要先 注册事件 使用
变量使用使用插值表达式 {{ variable }}
文本替换v-textvariable
内容替换v-htmlcontent
事件绑定v-on:clickfunction 等价于clickfunction
属性绑定: v-bind:titlevariable 等价于 :titlevariable
双向数据绑定: v-modelvariable
show语句v-showbool 为真时显示
if语句v-ifbool 为真时加入dom
for语句li v-for(item, index) of list :keyindex{{item}}/li
实例 第一个Vue实例 插值表达式 div idhello{{ hello }}/div script//Vue实例new Vue({el: #hello,data: {hello: hello world}})/script
hello world 挂载点 实例 模板 div idroot!-- 挂载点 --/divscript// 实例new Vue({el: #root,// 模板, 如果实例中没有定义模板则默认使用挂载点里边的dom元素为模板template: h1hello template {{ msg }}/h1,data: {msg: this is message,}})/script hello template this is message 文本替换 div idtext v-textnumber/divscriptnew Vue({el: #text,data: {number: 123456,}})/script
123456 内容替换 事件绑定
方法 v-on:等价于
div idhtml v-on:clickhandleClick dblclickhandleDoubleClick v-htmlcontent/divscriptnew Vue({el: #html,data:{content: h1this is content/h1},methods: {handleClick: function(){this.content h1 click/h1},handleDoubleClick: function(){this.content h1double click/h1}}})/script
this is content 属性绑定 使用v-bind之后相单于一个js表达式 等价于:title div idbind v-bind:titlehello titlethis is title/divscriptnew Vue({el:#bind,data: {title: this is a title}})/script
this is title 双向数据绑定 div iddb-bindinput typetext v-modelcontentdiv{{ content }}/div/divscriptnew Vue({el:#db-bind,data: {content: this is data double bind}})/script
this is data doubldasdase bind this is data doubldasdase bind 计算属性 div idcomputedinput typetext v-modelfirstNameinput typetext v-modellastNamediv{{ fullName }}/divdiv{{ count }}/div/divscriptnew Vue({el:#computed,data: {firstName: ,lastName: ,count: 0},// 计算属性computed: {fullName: function(){return this.firstName this.lastName}},// 侦听器, 一旦数据变化都会触发watch: {fullName: function(){this.count }}})/script v-if v-show v-for div idvifdiv v-ifshowv-if从dom中移除适合一次操作/divdiv v-showshowv-show从dom中隐藏适合多次操作/divbutton clickhandleClicktoggle/buttonulli v-foritem of list{{item}}/li!-- 以下方法增加key可以提升性能 --li v-for(item, index) of list :keyindex{{item}}/li/ul
/divscriptnew Vue({el: #vif,data: {show: true,list: [first, second, third, fourth]},methods: {handleClick: function(){this.show !this.show}}})/script
v-if从dom中移除适合一次操作 v-show从dom中隐藏适合多次操作 toggle first second third fourth first second third fourth TodoList实例 div idtodolistinput typetext v-modelinputValuebutton clickhandleSubmit确定/button!-- 普通方式添加 --ulglobal/globalli v-for(item, index) of list :keyindex{{ item }}/lilocal/local/ul!-- 通过全局组件 --ultodo-item v-for(item, index) of list :keyindex :contentitem :indexindexdeletehandleDelete !-- 通过全局组件 --/todo-item /ul/divscript // 全局组件 Vue.component(global, {template: liitem-global/li})// 组件与实例的关系每一个组件都是一个Vue实例,Vue.component(todo-item, {props: [content, index], //接收参数通过属性传递值template: li clickhandleClick{{content}} {{index}}/li, //显示methods: {handleClick: function(){this.$emit(delete, this.index) //子组件通过发布和父组件通讯}}}) // 父组件与子组件通讯交互 // 父组件通过 属性 传递给子组件参数 // 子组件通过 发布事件 传递给父组件参数前提是父组件需要先 注册事件 // 局部组件 var Local {template: liitem-local/li}new Vue({el:#todolist,// 注册局部组件components: {local: Local},data:{inputValue: ,list: []},methods: {handleSubmit: function(){this.list.push(this.inputValue);this.inputValue ;},handleDelete: function(index){this.list.splice(index, 1)}}})/script 确定 item-global sf fsdfsdf item-local sf 0 fsdfsdf 1 --------------------- 转自https://blog.csdn.net/mouday/article/details/80932868
