一.Vue基础指令v-model
1.1 vue中v-bind指令绑定class对象
通过v-bind动态绑定class属性，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<style>
.active {
color:red;
}
</style>
<script src="./vue.js"></script>
<body>
<div id="app">
<p :class="{active: name}">测试段落</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
name: true,
},
methods:{
}
})
</script>
</body>
</html>
当绑定的class类名中对象的值为true时，类名生效，因为绑定的是对象，所以也可以写成如下方式
<body>
<div id="app">
<p :class="obj">测试段落</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
obj:{
active: true, b: true},
name: true,
},
methods:{
}
})
</script>
</body>
注意点，通过v-bind绑定类名class中对象属性时确保class中绑定的是一个对象
1.2 v-bind绑定class中数组
<body>
<div id="app">
<p :class="[name, age]">测试段落</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
obj:{
active: true, b: true},
name: 'a',
age: 'b'
},
methods:{
}
})
</script>
</body>
通过v-bind可以绑定数组，数组中值即为class属性名
1.3 v-bind绑定style内联样式
vue中通过v-bind绑定style的内联样式时也分为对象和数组两种方式
<body>
<div id="app">
<p :style="{
fontSize: a, color:b}">测试段落</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
obj:{
active: true, b: true},
a: '20px',
b: 'red'
},
methods:{
}
})
</script>
</body>
同理也有数组语法
<body>
<div id="app">
<p :style="[a, b]">测试段落</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
obj:{
active: true, b: true},
a: {
fontSize: '20px'},
b: {
color:'blue'}
},
methods:{
}
})
</script>
</body>
1.4Vue中值取反操作小技巧
<script>
var vm=new Vue({
el:'#app',
data:{
obj:{
active: true, b: true},
a: {
fontSize: '20px'},
b: {
color:'blue'},
isActive: true,
},
methods:{
change: function(){
this.isActive = ! this.isActive;
},
}
})
</script>
通过isActive=!isActive即可取反
1.5 vue中v-model语法糖
vue中v-model双向绑定表单元素
当数据model变时，视图v中对应的数据发生变化，当视图v发生变化时，数据model中对应的变量属性值也会发生变化，即数据和视图时双向绑定的，响应式的
v-model的原始实现如下，是通过input语法糖实现的
<div id="app">
<span>{
{ msg }}</span>
<input type="text" :value="msg" @input="fn($event)">
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
obj:{
active: true, b: true},
a: {
fontSize: '20px'},
b: {
color:'blue'},
isActive: true,
msg:200,
},
methods:{
change: function(){
this.isActive = ! this.isActive;
},
fn:function(e){
this.msg = e.target.value;
}
}
})
</script>
</body>
1.6 vue中v-model绑定其他表单元素
vue中v-model绑定多行文本输入框textarea
<body>
<div id="app">
<span>{
{ msg }}</span>
<textarea name="" id="" cols="30" rows="5" v-model="msg">aaaa</textarea>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
obj:{
active: true, b: true},
a: {
fontSize: '20px'},
b: {
color:'blue'},
isActive: true,
msg:200,
check:true,
},
methods:{
change: function(){
this.isActive = ! this.isActive;
},
fn:function(e){
this.msg = e.target.value;
}
}
})
</script>
</body>
注意点，在文本区域插值 (<textarea>{ {text}}</textarea>) 并不会生效，应用 v-model 来代替。textarea标签中间的内容是无效的，即上面textarea之间的aaaa
v-model绑定复选框<input type=“checkbox”>
v-model绑定复选框时分为两种情况：第一种只有一个复选框，第二种有多个复选框
单个复选框时，如下代码所示：
<body>
<div id="app">
<span>{
{ msg }}</span>
<textarea name="" id="" cols="30" rows="5" v-model="msg">aaaa</textarea>
<input type="checkbox" id="one" v-model="checked">
<label for="one">{
{ checked }}</label>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
obj:{
active: true, b: true},
a: {
fontSize: '20px'},
b: {
color:'blue'},
isActive: true,
msg:200,
checked:true,
},
methods:{
change: function(){
this.isActive = ! this.isActive;
},
fn:function(e){
this.msg = e.target.value;
}
}
})
</script>
</body>
注意label中for属性和input中id是一一对应的，而且v-model绑定的值是一个bool值类型，与多个复选框有区别
多个复选框时：
<body>
<div id="app">
<input type="checkbox" id="kids" value="小孩" v-model="checkList">
<label for="kids">小孩</label>
<input type="checkbox" id="young" value="青年" v-model="checkList">
<label for="young">青年</label>
<input type="checkbox" id="old" value="老人" v-model="checkList">
<label for="old">老人</label>
<span>People:{
{ checkList }}</span>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
checkList:[]
},
methods:{
}
})
</script>
</body>
注意点：多个复选框时v-model绑定的是数组
总结复选框：单个复选框，绑定到布尔值，多个复选框，绑定到同一个数组：
v-model绑定单选框<input type=“radio”>
<body>
<div id="app">
<input type="radio" id="one" value="one" v-model="picked">
<label for="one">是</label>
<input type="radio" id="two" value="two" v-model="picked">
<label for="two">否</label>
<span>Picked:{
{ picked }}</span>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
selected:'',
picked: ''
},
methods:{
}
})
</script>
</body>
注意点：绑定单选框市用到两个input并且value值为两种不同类型，v-model绑定同一个属性
v-model绑定下拉框select
<body>
<div id="app">
<input type="radio" id="one" value="one" v-model="picked">
<label for="one">是</label>
<input type="radio" id="two" value="two" v-model="picked">
<label for="two">否</label>
<span>Picked:{
{ picked }}</span>
<select name="" id="" v-model="selected">
<option disable value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<span>selected:{
{ selected }}</span>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
selected:'',
picked: ''
},
methods:{
}
})
</script>
</body>```html
<body>
<div id="app">
<select name="" id="" v-model="selected">
<option disable value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<span>selected:{
{ selected }}</span>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
selected:''
},
methods:{
}
})
</script>
</body>
如果 v-model 表达式的初始值未能匹配任何选项， 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
二. Vue中基础指令v-cloak
vue中v-cloak是用来解决{ {}}插值表达式加载时出现的闪屏切换问题
<body>
<div id="app" v-cloak>
<span>{
{ msg }}</span>
<input v-model.lazy="msg">
<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
<span>selected:{
{ selected }}</span>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
selected:'',
picked: '',
msg: 200
},
methods:{
}
})
</script>
</body>
注意点:
1.v-cloak是用来解决{
{}}插值表达式闪烁问题
2.v-cloak可以在最外层视图div#app中加，也可以通过[v-cloak]{display:none}属性选择器找到元素设置显示
3.v-cloak不要赋值
三.Vue中v-once指令
当某个标签只需要渲染一次是加上v-once属性即可
<body>
<div id="app" v-cloak>
<p v-once>{
{ msg }}</p>
<input type="text" v-model="msg">
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
selected:'',
picked: '',
msg: 200
},
methods:{
}
})
</script>
</body>
当标签中添加v-once指令后该标签智慧被渲染一次
注意: v-once不需要赋值