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=>{ … })