一、moustache语法
1.变量
<span>Message: {{ msg }}</span>
<!--不能声明变量，如下-->
<span>{{var a}} </span>
2.函数返回值
<span>{{(function a(){return 10})()}}</span>
<!--注意：不要把函数直接放进去 -->
<span>{{function a(){return 10}}}</span>
3.三元运算符
<span>{{msg > 10 ? "a" : "b"}}</span>
4.对象（放对象的时候注意两边空格要加上，不然就报错了！）
<span>{{ {name:'xr'} }}</span>
二、指令
1.v-for
遍历指令，想遍历谁，就在谁上面加v-for
注意：由于vue并行“能懒则懒”的高度复用原则，通常要加上key保证元素的唯一性，以此来提高性能
<div v-for="data in datalist" :key="item.id">
{{ data.text }}
</div>
2.v-text
默认会渲染成文本
<span v-text="'hello'"></span>
<!-- 和下面的一样 -->
<span>{{'hello'}}</span>
3.v-html
渲染成html标签
<div v-html="html"></div>
4.v-once
只渲染一次，再次更改时,它是从缓存中获取，而不是再最新的数据，可以用于优化更新性能
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 多个子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
<li v-for="item in list" v-once>{{item}}</li>
</ul>
5.v-on
绑定事件，简写为@
<button @click="fn">点我啊</button>
6.v-show/v-if
效果上都是控制元素的隐藏和显示，但是前者是通过切换display为block和none来操作元素，后者是直接控制元素的存在与否
<span v-if="isShow">233333</span>
<span v-show="isShow">233333</span>
7.v-model
主要用在表单控件上，实现双向数据绑定
<!--文本输入框-->
<input v-model="value" >
<!--单选按钮中-->
<input type="radio" v-model="radioValue" value="male">male
<input type="radio" v-model="radioValue" value="female">female
<!--单选框中 v-model为true/false-->
<input type="checkbox" v-model="checkValue" >Vue
<!--多个单选框中 v-model为数组-->
<input type="checkbox" v-model="checkArr" value="Vue" >Vue
<input type="checkbox" v-model="checkArr" value="React" >React
<input type="checkbox" v-model="checkArr" value="Angular" >Angular
<!--若option有value值，则 selectValue 获取value里的值，若没有则获取option里的内容 -->
<select v-model="selectValue">
<option >vue</option>
<option value="1">react</option>
<option value="2">吃饭</option>
</select>
8.v-bind
绑定变量，简写为：
<li v-for="data in dataList" :key="data.id"></li>
9.自定义指令
当现有指令无法满足你的时候，可以自定义指令
// 全局指令
Vue.directive("focus", {
// 指令的钩子函数
bind:{
console.log('绑定时触发')
},
inserted(el, bindings, vnode){
// el:当前操作的元素 bindings:指令的参数 vnode:虚拟节点
console.log('元素插入到页面时触发')
Vue.nextTick(()=>{
el.focus();
)
},
update(){
console.log('更新时触发')
},
unbind(){
console.log('指令销毁时触发')
}
})
// 局部指令
directives: {
focus: {
// 全局指令的钩子函数局部也有
inserted(el){
el.focus()
}
}
}
三、常用方法和属性
1.vm.$mount
单元测试时需要挂载在内存上时使用
2.vm.watch
监视数据的变化
//由于数据更新是异步的，如果有需要得到更新后的数据，可以使用watch监视来获得
vm.watch('msg', (new,old)=>{
console.log(new);
}
3.vm.$nextTick
获取DOM元素
//可以获取渲染完成后的DOM
vm.$nextTick(()=>{
console.log(vm.$el.innerHTML)
}
4.vm.options
获得所有的配置项
new Vue({
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) //'foo'
}
})
网友评论