Vue 是什么 Vue是框架,MVVC的框架。简单说通过数据来改变视图的框架。数据驱动视图 为什么 不用再使用JQ来改变html的结构了。只需要改下数据,View会做出相应的改变。 怎么做 一个Vue对象绑定一个元素,所以html文档中可以有多个Vue对象。 Vue对象怎么绑定元素 el:"#app" Vue对象中的数据放在哪里 data:{ age:18,//数据可以有变量,数组,对象 arr:[ {name:"zss"}, {name:"zll"} ], student:{ name:"zhangsan", age:18 } } html怎么引用Vue对象中的数据,元素开始标签中写上V指令 <div id="app"> {{a}} </div> html中元素的内容用{{}}括起来,浏览器加载html时,会从绑定该元素的Vue对象中找data对象。数据放在data对象中。data对象可以是属性形式,也可以是函数(因为函数也是对象) {{}}里面可以是变量或表达式: {{a+b}} {{5<4?"ok":"wrong"}}//wrong {{ {name:"zll"} }}//{name:"zll"} {{fn()}}//表达式的结果是函数调用后的返回值,表达式执行就是语句执行 data对象是属性形式: data:{ name:"zss" } data对象是函数形式: data(){ return { name:"zss" } } 总结: vue对象包含所有数据,元素中的数据从vue对象中取,元素通过key从vue对象中取值 Vue的指令: 书写位置:写在开始标签中,浏览器解析后的html看不见 v-text 把数据渲染在视图中 与{{}}作用类似 innerText v-html 把数据渲染在视图中 支持标签 innerHTML v-if/v-else 决定元素是否显示 true显示 false移除,不显示时html文档中没有该元素 包含v-if的元素和包含v-else的元素,是否显示是互斥的。一个显示了,另一个肯定不显示。 v-if的值可以直接是true和false,也可以是变量,引用Vue中数据,<div v-if="true">if</div> <div v-if="isShow">demo2</div>//isShow的值在Vue对象中 原理: 依靠的是元素增加与删除 appendChild()/removeChild() v-show 决定元素是否显示 true显示 false隐藏 ,不管显示不显示元素都在html中 原理: 靠的是改变样式display:none 适用于频繁切换DOM元素 <button v-on:click="fn">切换</button> //Vue方法里面的this指向Vue对象,this调用时才知道它指向谁,谁调用this指向谁,Vue监听事件,所以Vue调用事件处理函数 methods:{ fn(){ console.log(this.isShow);//this 即Vue实例 this.isShow=!this.isShow; } } v-for vue对象中可以包含数组,也可以包含对象 <li v-for="(item,index) of arr">//遍历数组 <li v-for="(value,key) in girl">//遍历对象 v-bind 给元素绑定一个属性(自定义的属性或元素系统属性),属性值从Vue对象中取,如果取不到则不显示该绑定的属性 单向数据绑定 <div v-bind:class="className2">1</div>//把引号中的内容当做一个表达式,表达式的结果为变量className2,以该变量为key从Vue对象中取值,如果取不到,则不显示该绑定的属性 <div v-bind:class="'demo'"></div>//把引号中内容当做一个表达式,表达式的结果为‘demo’,所以浏览器加载html后为,<div v-bind:class="demo"></div> <div v-bind:class="{demo:false}">abcdefg</div>//当类名属性为true 表示应用该类样式 当类名属性为false 表示移除该样式 v-model vue绑定元素的value,可以双向更改, 一般只用于表单控件 带有value属性的表单 vue监听元素的input事件,一旦用户输入内容,vue调用事件处理函数,处理函数中可以传入一个e参数,e.target代表事件源,即元素 <input type="text" v-model="msg">
v-model.number,自动将用户的输入值转为数值类型
事件:
v-on监听事件指令
v-on:click="clickHandler"
v-on是Vue指令,监听事件指令
v-on:click是Vue监听click事件
"clickHandler":key,从Vue取数据时用的key
<!--v-on指令为元素绑定事件处理函数-->
<button v-on:click="clickHandler">点我</button>
<!--简写形式-->
<button @click="clickHandler2">点我</button>