1.双大括号表达式（用双括号获取值）
指令：
1：强制数据绑定
<img v-bind:src="imageURL" > 也等于 <img :src="imageURL" >
2.绑定事件监听
<button v-on:click="test">绑定事件监听</button>等价于<button @click="test">绑定事件监听</button>
传递参数的方式直接在监听的函数后面括号里加入参数
Vue计算属性
在使用计算属性的时候，有表单一定要有v-model
数据每发生一次变化，fullName()就执行一次
用监视也能实现计算，但是没有计算属性简单，但是它也有很多用处
vue监视（watch)
Vue计算属性之set get（数据双向绑定）
数据双向绑定就是当数据发生变化的时候，试图也发生变化，视图发生变化，数据也相应发生变化,其核心时set get方法
计算属性高级
计算属性存在缓存，多次读取只执行一次getter计算
按照常理
<p>{{fullName2}}</p>
<p>{{fullName2}}</p>
<p>{{fullName2}}</p>
应该调用三次fullName2函数，但是实际上只调用了一次，因为第一次调用时就把数据缓存了，以后调用的时候不用去调用函数，而是在缓存里面直接读取，所以实际上只调用了一次，
vue强制绑定class,style
绑定的是字符串
绑定的是对象
条件渲染（v-if , v-else)
v-show也可以实现
v-if v-else 和 v-show 的区别是 v-if v-else是将元素移除，而v-show是将元素隐藏+
列表渲染
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push()pop()shift()unshift()splice()sort()reverse()
v-for遍历数组(和forEach很像）
删除元素
更新
v-for遍历对象
可以是多个参数：
<ul> <li v-for="(value , name , index) in student[0]"> {{index}}.{{name}}:{{value}} </li> </ul>
列表的搜索和排序
显示过滤/排序结果
在 项目中经常对数据进行排序和筛选，利用计算属性来做
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="app"> <input type="text" v-model="searchName"> <ul> <li v-for="(stu,index) in filterStudent" :key="index"> {{index}}--{{stu.name}}--{{stu.age}} </li> </ul> <button @click="setOrderType(1)">年龄升序</button> <button @click="setOrderType(2)">年龄降序</button> <button @click="setOrderType(0)">原本排序</button> </div> <script> new Vue({ el:'#app', data:{ searchName:'', //当表单输入值的时候，这个值也相应的改变 orderType:0, //0代表原本顺序 1升序 2降序 student:[ {name:'刘牌0' , age:20}, {name:'雷军0' , age:34}, {name:'马化腾1' , age:40}, {name:'乔布斯0' , age:100} ] }, //使用计算属性来过滤 computed: { filterStudent(){ //取出相关数据 const {searchName , student , orderType} = this //定义一个最终返回的数组 let filterStu; //过滤 filterStu = student.filter(stu => stu.name.indexOf(searchName)!==-1) //排序 if(orderType!==0){ filterStu.sort(function (s1,s2) { //制定规则 ，如果返回负数则s1在前 ， 返回整数则s2在前 if(orderType===2){ return s2.age-s1.age } else{ return s1.age-s2.age } }) } return filterStu } }, methods:{ setOrderType(orderType){ this.orderType = orderType } } }) </script> </body> </html>
事件处理
监听事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="app"> <button @click="counter+=1">Add 1</button> <p>the button {{counter}}</p> </div> <script> new Vue({ el:'#app', data:{ counter:0 } }) </script> </body> </html>
事件处理方法
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="app"> <button @click="one">One</button> </div> <script> new Vue({ el:'#app', data:{ name:'刘牌' }, methods:{ one:function (event) { alert('你好'+this.name+'!') if (event){ alert(event.target.tagName) } } } }) </script> </body> </html>
表单数据的自动收集
复选框
多个复选框，绑定到同一个数组：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#example-3', data: { checkedNames: [] } }) </script> </body> </html>
单选按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> <script> new Vue({ el: '#example-4', data: { picked: '' } }) </script> </body> </html>
下拉选择框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> <script> new Vue({ el: '#example-5', data: { selected: '' } }) </script> </body> </html>
用 v-for 渲染的动态选项：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="app"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> </div> <script> new Vue({ el: '#app', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } }) </script> </body> </html>
过渡 & 动画
用到时再查,有很多很炫酷的东西
