指令
以v-开头的自定义属性。
v-cloak(了解)
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
[v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div id='app'>
<div v-cloak>{{msg}}</div>
<div v-cloak v-once>{{msg}}</div>
</div>
<script>
let options={
el:'#app',
data:{
msg:'hello Vue'
}
}
var vm=new Vue(options);
</script>
</body>
v-text
填充纯文本,无闪动问题
v-html
填充html片段
1.存在安全问题
2.本网站内部数据可以使用,来自第三方的数据不可以用
v-pre
填充原始信息
显示原始信息,跳过编译过程(分析编译过程)
//v-text,v-html,v-pre的使用
<body>
<div id="app">
<div>{{msg}}</div>
<div v-text='msg'></div>
<div v-html='msg1'></div>
<div v-pre>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
1、v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
2、v-html指令用于将HTML片段填充到标签中,但是可能有安全问题
3、v-pre用于显示原始信息
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
msg1: '<h1>HTML</h1>'
}
});
</script>
</body>
v-once
只编译一次
显示内容之后不再具有响应式功能
<body>
<div id="app">
<div>{{msg}}</div>
<div v-once>{{info}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
v-once的应用场景:如果显示的信息后续不需要再修改,你们可以使用v-once,这样可以提高性能。
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
info: 'nihao'
}
});
</script>
</body>
v-model
表单控件类型不同而不同
双向数据绑定
当视图发生变化时,数据会同步变化
当数据变化时,试图也会同步变化
限制在<input>
、<select>
、<textarea>
中使用(表单控件);
本质
<input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
<body>
<div id="app">
<div>{{msg}}</div>
<input type="text" v-bind:value="msg" v-on:input='handle'>
<input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
<input type="text" v-model='msg'>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
v-model指令的本质
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
handle: function(event){
// 使用输入域中的最新的数据覆盖原来的数据
this.msg = event.target.value;
}
}
});
</script>
</body>
v-on(★)
事件绑定
参数的传递
body>
<div id="app">
<div>{{num}}</div>
<div>
<!-- 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数 -->
<button v-on:click='handle1'>点击1</button>
<!-- 2、如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,
并且事件对象的名称必须是$event
-->
<button v-on:click='handle2(123, 456, $event)'>点击2</button>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function(event) {
console.log(event.target.innerHTML)
},
handle2: function(p, p1, event) {
console.log(p, p1)
console.log(event.target.innerHTML)
this.num++;
}
}
});
</script>
事件修饰符
.stop 阻止冒泡
.prevent 阻止默认行为
//使用
<a v-on:click.stop="handle">跳转</a>
<a v-on:click.prevent="handle">跳转</a>
按键修饰符
.enter 回车键
.delete 退出键
//使用
<input v-on:keyup.enter='submit'>
<input v-on:keyup.delete='handle'>
自定义修饰符
全局 config.keyCodes 对象
//使用 全局声明Vue.config.keyCodes.自定义名称 = 对应按键的值
Vue.config.keyCodes.f1 = 112
v-bind(☆)
属性绑定
属性绑定
v-bind:属性名(内置属性)
//v-bind指令用法
<a v-bind:href='url'>跳转</a>
<a :href='url'>跳转</a>
样式绑定
class样式绑定
- 对象形式绑定
- 数组形式绑定
对象语法
<div v-bind:class="{ active: isActive }"></div>
数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
<div id="app">
<!-- 类class操作 -->
<!-- 1.对象形式 -->
<div v-bind:class="{active:isActive,error:isError}">样式操作</div>
<!-- 对象的简化形式 -->
<div v-bind:class="objClasses"></div>
<button @click="handle">切换</button>
<!-- 2.数组形式 -->
<div v-bind:class="[activeClass,errorClass]"></div>
<!--可以用三元表达式:-->
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<!-- 简化形式 -->
<div v-bind:class="arrClasses"></div>
<button @click="handle1">切换</button>
<p>...........................</p>
</div>
<script>
let options = {
el: "#app",
data: {
isActive: true,
isError: true,
objClasses: {
active: true,
error: false,
},
activeClass: "active",
errorClass: "error",
arrClasses: ["active", "error"]
},
methods: {
handle: function () {
this.isActive = !this.isActive;
this.isError = !this.isError;
this.objClasses.error = true;
},
handle1: function () {
this.activeClass = "";
},
},
};
var vm = new Vue(options);
</script>
//区别:
绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
绑定数组的时候数组里面存的是data 中的数据
style样式绑定
- 对象形式绑定
- 数组形式绑定
对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<body>
<div id="app">
<!-- 对象形式绑定-->
<div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
<!-- 对象简化形式绑定-->
<div v-bind:style='objStyles'></div>
<!-- 数组形式绑定-->
<div v-bind:style='[objStyles, overrideStyles]'></div>
<button v-on:click='handle'>切换</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
样式绑定之内联样式Style:
*/
var vm = new Vue({
el: '#app',
data: {
borderStyle: '1px solid blue',
widthStyle: '100px',
heightStyle: '200px',
objStyles: {
border: '1px solid green',
width: '200px',
height: '100px'
},
overrideStyles: {
border: '5px solid orange',
backgroundColor: 'blue'
}
},
methods: {
handle: function(){
this.heightStyle = '100px';
this.objStyles.width = '100px';
}
}
});
</script>
</body>
分支结构
v-if
v-else
v-else-if
v-show
<body>
<div id="app">
<div v-if='score>=90'>优秀</div>
<div v-else-if='score<90&&score>=80'>良好</div>
<div v-else-if='score<80&&score>60'>一般</div>
<div v-else>比较差</div>
<div v-show='flag'>测试v-show</div>
<button v-on:click='handle'>点击</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
分支结构
v-show的原理:控制元素样式是否显示 display:none
*/
var vm = new Vue({
el: '#app',
data: {
score: 10,
flag: false
},
methods: {
handle: function(){
this.flag = !this.flag;
}
}
});
</script>
</body>
v-if与v-show的区别
v-if控制元素是否渲染到页面 (条件渲染)
v-show控制元素是否显示(已经渲染到了页面)
v-for(★)
列表渲染
遍历数组
<li v-for='item in list'>{{item}}</li>
//item是数组的每一项元素,list整个数组
key的作用:帮助Vue区分不同的元素,从而提高性能
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>
<body>
<div id="app">
<div>水果列表</div>
<ul>
<li v-for='item in fruits'>{{item}}</li>
<li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
<li :key='item.id' v-for='(item, index) in myFruits'>
<span>{{item.ename}}</span>
<span>-----</span>
<span>{{item.cname}}</span>
</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
循环结构-遍历数组
*/
var vm = new Vue({
el: '#app',
data: {
fruits: ['apple', 'orange', 'banana'],
myFruits: [{
id: 1,
ename: 'apple',
cname: '苹果'
},{
id: 2,
ename: 'orange',
cname: '橘子'
},{
id: 3,
ename: 'banana',
cname: '香蕉'
}]
}
});
</script>
遍历对象
v-for遍历对象 //value每个属性值, key每个属性, index每个索引
<div v-for='(value, key, index) in object'></div>
v-if和v-for结合使用
<div v-if='value==12' v-for='(value, key, index) in object'></div>
<body>
<div id="app">
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 使用原生js遍历对象
var obj = {
uname: 'lisi',
age: 12,
gender: 'male'
}
for(var key in obj) {
console.log(key, obj[key])
}
/*
循环结构
*/
var vm = new Vue({
el: '#app',
data: {
obj: {
uname: 'zhangsan',
age: 13,
gender: 'female'
}
}
});
</script>
</body>