1 双向绑定

:value的方式只能将内存中模型变量的值绑定到页面，不能将页面的修改自动同步到内存中的模型变量上——单向绑定

双向绑定: 既能将内存中模型变量的值绑定到页面，又能将页面的修改自动同步到内存中的模型变量上。
v-model用于绑定可修改的表单元素
v-model:value=”模型变量”，简写: v-model=”模型变量”

原理: 所有带v-model绑定的元素，都被加入一个监视队列(watch)，由一个死循环不断监视队列中元素的内容变化。只要发生变化，就直接修改绑定的模型变量
监视函数: 只要监听队列中页面元素变化，就自动执行的函数

双向绑定input文本

//@keyup.13表示当键盘enter松开
<input v-model="kwords">

data:{ kwords:"请输入搜索关键词" },
methods:{
  search(){
    console.log(`查询 ${this.kwords} 相关的商品...`);
  }
},
watch:{//监视
  kwords(){//当模型变量kwords发生变化时，就自动执行
    this.search();
  }
}

双向绑定radio

<input type="radio" name="planes" value="img/p3.png" v-model="chosen">
<img :src="chosen" alt="">

data:{ chosen:"img/p0.png" }

双向绑定select

<select v-model="city">
  <option>-请选择-</option>
  <option value="img/bj.jpg">北京</option>
<img :src="city" alt="请选择城市图片">

data:{ city:"-请选择-" }

2 绑定class和style属性

可将class和style作为字符串绑定，拼接字符串很麻烦；

用对象绑定class和style

<ANY :style=”模型变量”> 模型变量是一个对象

data:{
    模型变量:{
         Css属性:值, //不能省略单位
          … : …
}}

<ANY class=”固定的class” :class=”模型变量”> 模型变量是需要改变的css属性的对象，css属性名需要加""，因为命名中间可能有-号
结果: class和:class最终会合并为一个class=””

<ANY class=”固定的class” :class=”模型变量”>

  data:{
	模型变量:{
	  “class名”:true, 表示启用的class
	  “class名”:false, 表示不启用的class
  }}

3 计算属性

计算属性不实际存储属性值，依靠其他属性动态计算获得
优点: 只计算一次，结果可被vue缓存，后续使用该值时直接获取而不用重复执行； methods中的方法，每绑定一次，就重复执行一次，不会被缓存

new Vue({
  computed:{
	计算属性名(){
  		return 计算后的值
	}
  }
})

4 自定义指令

创建自定义指令:

  Vue.directive(“指令名”,{ //不要加v-
	 inserted(el){//当当前元素添加到DOM树上后立刻执行！
     //el是纯DOM元素对象
     //可用原生DOM API对el做任何事情
     }
  })

使用自定义指令: <ANY v-指令名>
需要在new Vue()之前定义

5 过滤器

如果原始数据不能直接使用，对原始数据进行再加工之后再绑定
https://github.com/freearhey/vue2-filters
比如: 日期: ms ->yyyy/mm/dd
性别: 1/0 –> 男/女
状态: 数字: 10、20、30、40->未付款、已付款、已发货、已签收

定义过滤器:

Vue.filter("过滤器名", function(val,自定义参数){
    return 过滤后的新值
})

使用过滤器:
:属性=”模型变量 | 过滤器” -> 实际绑定的结果是过滤器过滤之后的值，后续过滤器使用的val是上一过滤器返回的结果
{{模型变量 | 过滤器(参数值) | 更多过滤器 … }}

6 Axios

支持Promise的专门发送http请求的函数库，用axios代替$.ajax(因为今后可能Vue不再包含jQuery)

先引入axios.min.js

 Get: axios.get(“url”,{
         params:{ 参数:值, 参数:值, … }
      }).then(res=>{
          //res.data中才是服务端返回的结果
      })
 Post: axios.post(“url”,”变量=值&变量=值…”)
            .then(res=>{ … })

Vue_2

Vue