1. 常用指令
v-cloak：解决渲染页面的闪烁问题，使用插值表达式，如果网速较慢的时候会出现闪烁问题，比如说页面会出现{{ msg }}，在标签元素中使用v-cloak，然后在style标签中设置样式：[v-cloak]:{display:none;}
v-text：v-text=“数据”，比如v-text=“msg”，但是这种方式会覆盖标签内部的文本内容，使用插值表达式只会替换自己的占位符，而不会覆盖原来的文本内容。
v-html:将文本内容渲染为HTML标签。
v-bind：用于绑定属性的指令，比如v-bind:title=‘my_title’ 将属性title绑定给已经自己定义的my_title属性。
注意：v-bind指令可以直接简写为":" ， v-bind中可以写合法的js表达式，比如v-bind:title=‘my_title + 123’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-cloak、v-text、v-html</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- 使用插值表达式渲染界面，如果网速慢的话会出现闪烁问题，也就是界面会出{{msg}} 而不是数据或者空白-->
<p>123--------{{msg}}-----456</p>
<!-- 使用 v-text='数据' 渲染界面 但是会覆盖标签里面的内容-->
<div v-text='msg'>----Hello World 不会显示咯-----</div>
<!-- 渲染HTML代码 v-html也会覆盖内部-->
<div v-html='msg1'></div>
<!-- v-bind指令绑定的属性可以写合法的js表达式 -->
<!-- <input type="button" v-bind:title="my_title + 123" value="v-bind测试"> -->
<!-- 也可以直接省略v-bind 直接在属性前面使用: -->
<input type="button" :title = "my_title + '456'" value="v-bind测试"><br><br>
<input type="button" :title = "my_title" value="v-on事件测试" v-on:click = "show">
</div>
<script>
var vm = new Vue({
/*
new Vue()实例对象属性:
el:元素的id，类或者是标签 element，需要加上#或者是.
data:传输给页面的数据
methods:页面的事件
*/
el:'#app',
data:{
msg:'Hello Vue.js',
msg1:'<h1>Hello World</h1>',
my_title:'自定义的title'
},
// 页面事件 methods
methods: {
// 事件名:function() {事件体}
show:function() {
alert('Hello World');
}
// 如果data需要访问methods中事件 使用this引用
// methods中的普通函数访问data中数据，需要在外部定义一个变量，把this赋值给变量，如果是箭头函数直接用this即可
});
}
});
</script>
</body>
</html>
v-on 用于绑定元素的事件，v-on:事件名=“methods中定义的函数名称” 如v-on:click = “show”
v-on可以简写为@ ，注意：在函数名称需要传参的时候要加上()
v-model：实现双向数据的绑定。单向数据绑定：只能改变data中的数据，从而改变页面中的数据，也就是说可以从从M—V，不能从V—M，双向数据绑定：M改变会影响到V，同时改变V的数据也会影响M。
v-model =“data中的对象”
注意：v-model只能用于表单元素：inputt(text email radio address) select checkbox textarea
简易计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易计算器案例</title>
<script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="sel">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click = 'op'>
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
// 默认都是0 使用双向数据绑定 页面更改的数据就会传送到Model中 然后就可以进行运算，然后结果又返回的页面View中
n1:0,
n2:0,
sel:'+',
result:0
},
methods:{
op() {
switch(this.sel) {
case '+':
// this.result = this.n1 + this.n2; 注意 需要转换为数字类型 否则就是连接字符串了
this.result = Number(this.n1) + Number(this.n2);
break;
case '-':
this.result = Number(this.n1) - Number(this.n2);
break;
case '*':
this.result = Number(this.n1) * Number(this.n2);
break;
case '/':
this.result = Number(this.n1) / Number(this.n2);
break;
case '%':
this.result = Number(this.n1) % Number(this.n2);
break;
}
}
}
});
</script>
</body>
</html>
v-for：四种用法：
第一种用法：遍历普通数组 ，如果需要输出索引(数组元素，索引) in 数组名
<p v-for="item in array">{{ item }}</p>
<p v-for="(item,i) in array">索引：{{ i }} ------ 值：{{ item }}</p>
第二种用法：遍历对象数组 ，（对象名，索引） in 数组名 对象名.属性
<p v-for="(user,i) in list">id : {{user.id}} ------ name : {{user.name}} ------- 索引 : {{i}}</p>
第三种用法：遍历对象 (值val,键key,索引) in 对象名 {{键}} {{值}} 对象是键值对组成
<p v-for="(val,key,i) in obj">键：{{key}} ------- 值：{{val}} ------ 索引：{{i}}</p>
第四种用法：遍历普通数字，数字是从1开始，不是从0开始
<p v-for="count in 10">循环到了第 {{count}} 次</p>
在v-for中使用key绑定唯一值
注意：key必须使用v-bind绑定属性形式，指定唯一值，key属性只能是字符串或者或者Number类型。
在组件中，使用v-for循环的时候，或者特殊的情况下，如果使用v-for出现问题，那么在使用v-for的同时，必须绑定key。
动态添加复选框，使用key绑定复选框选中的唯一值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for的四种用法</title>
<script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<label>
Id:<input type="text" v-model = "id">
</label>
<label>
Name:<input type="text" v-model = "name">
</label>
<input type="button" value="添加" @click='add'>
<p v-for="(item,i) in user" :key="item.id">
<input type="checkbox" name="" id="">id：{{item.id}} -- name：{{item.name}} -- 索引：{{i}}
</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
user:[
{id : 1 , name : '张三'},
{id : 2 , name : '李四'},
{id : 3 , name : '王五'},
{id : 4 , name : '赵六'}
],
id:'',
name:''
},
methods:{
add() {
// 点击添加按钮就增加一个对象
this.user.push({id : this.id , name : this.name});
}
}
});
</script>
</body>
</html>
v-if：每次都会重新创建或者删除元素， true为创建元素，false为删除元素。
v-show：不会重新对DOM进行创建或者删除，只是切换元素的display:none样式， false为display:none true为display: block。
v-if和v-show都可以实现元素的切换，特点是 v-if有较高的切换性能的消耗，v-show有较高的初始渲染的消耗
如果涉及频繁的切换，推荐使用 v-show ，如果元素永远不会被显示给用户看，推荐使用v-if。
点击按钮，切换元素的显示，点击显示元素，再点击元素消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if和v-show的使用</title>
<script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="toggle">
<h3 v-if="flag">使用v-if控制的元素</h3>
<h3 v-show="flag">使用v-show控制的元素</h3>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true
},
methods:{
toggle() {
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
2.事件修饰符
.stop：阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件修饰符</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
#inner {
height: 500px;
background-color: aquamarine;
}
#out {
padding: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="app">
<div id="out" @click = 'outClick'>
<div id="inner" @click = 'innerClick'>
<!-- button使用stop事件修饰符，阻止了事件冒泡，不会显示out inner被点击了 最后的结果就是btn被点击了-->
<input type="button" value="事件修饰符演示" @click.stop = 'btnClick'>
</div>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
outClick() {
console.log('out被点击了！');
},
innerClick() {
console.log('inner被点击了！');
},
btnClick() {
console.log('btn被点击了！');
},
linkClick() {
console.log('a被点击了！');
}
}
});
</script>
</body>
</html>
.prevent：阻止默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件修饰符</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
#inner {
height: 500px;
background-color: aquamarine;
}
#out {
padding: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="app">
<!--此时链接只会显示a被点击了，而不会跳转到百度-->
<a href="http://www.baidu.com" @click.prevent = 'linkClick'>点一下，到达百度</a>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
outClick() {
console.log('out被点击了！');
},
innerClick() {
console.log('inner被点击了！');
},
btnClick() {
console.log('btn被点击了！');
},
linkClick() {
console.log('a被点击了！');
}
}
});
</script>
</body>
</html>
.capture 事件捕获， 使用.capture此时的事件先被捕获，然后在执行事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件修饰符</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
#inner {
height: 500px;
background-color: aquamarine;
}
#out {
padding: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="app">
<!-- 点击button，运行结果就是先捕获了inner，然后在从button开始执行事件冒泡: inner被点击了 btn被点击了！out被点击了！-->
<div id="out" @click = 'outClick'>
<div id="inner" @click.capture = 'innerClick'>
<input type="button" value="事件修饰符演示" @click = 'btnClick'>
</div>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
outClick() {
console.log('out被点击了！');
},
innerClick() {
console.log('inner被点击了！');
},
btnClick() {
console.log('btn被点击了！');
},
linkClick() {
console.log('a被点击了！');
}
}
});
</script>
</body>
</html>
.self 当事件为该元素本身的时候触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件修饰符</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
#inner {
height: 500px;
background-color: aquamarine;
}
#out {
padding: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="app">
点击button不会触发到out 也就是说.self不会阻止事件冒泡
<div id="out" @click.self = 'outClick'>
<div id="inner" @click = 'innerClick'>
<input type="button" value="事件修饰符演示" @click = 'btnClick'>
</div>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
outClick() {
console.log('out被点击了！');
},
innerClick() {
console.log('inner被点击了！');
},
btnClick() {
console.log('btn被点击了！');
},
linkClick() {
console.log('a被点击了！');
}
}
});
</script>
</body>
</html>
注意：.self和.stop的区别 .self是只有该元素本身才会触发事件，并且不会阻止事件的冒泡
.once 事件只会触发一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件修饰符</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
#inner {
height: 500px;
background-color: aquamarine;
}
#out {
padding: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="app">
<!-- once连接其他事件修饰符，也只会触发一次，下面的a触发第一次之后，下次触发就不会阻止默认行为了，就会跳转到百度 -->
<a href="http://www.baidu.com" @click.once.prevent = 'linkClick'>点一下，到达百度</a>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
outClick() {
console.log('out被点击了！');
},
innerClick() {
console.log('inner被点击了！');
},
btnClick() {
console.log('btn被点击了！');
},
linkClick() {
console.log('a被点击了！');
}
}
});
</script>
</body>
</html>
自定义指令
全局自定义指令：Vue.directive() 参数1：指令名称，不需要加上v-，但是在调用的使用需要加上v-
参数2：对象，对象有一些指令的相关函数和操作
Vue.directive('focus',{
// 指令相关函数 每个函数的参数都是el 表示一个原生的JS对象，必填项
bind:function(el { //binding参数是可选的，在调用的时候如果需要传入值，定义指令需要这个参数
// 每当指令绑定到元素的时候，会执行一次bind函数 ，只执行一次 常常用于设置样式相关的指令
},
inserted:function(el) {
// 表示插入到DOM中，会执行inserted函数 只会触发一次 常常用于需要进行操作的情况
el.focus();
},
updated:function(el) {
// VNode更新的时候，会执行updated函数，可能会触发多次
}
});
// Vue函数的参数 第一个是element 第二个参数是传进来的值 比如说颜色 在调用指令的时候就可以传入一个颜色的值
Vue.directive('color',{
bind:function(el,binding) {
el.style.color = binding.value;
}
});
自定义私有指令：var vm = new Vue( directives: 指令名称:{指令函数});
var vm = new Vue({
el:'#app',
data: {
today:new Date()
},
directives: {
// 自定义私有指令
'fontweight':{
bind: function (el , binding) {
el.style.fontWeight = binding.value
}
},
//指令函数的简写 如果只有bind和update 在指令名称后面直接写 function() {}
'fontsize': function(el , binding) {
el.style.fontsize = parseInt(binding.value) + 'px';
}
}
});
自定义指令的调用
<div id="app">
<!-- 调用自定义私有指令 -->
<h2 v-fontweight = "700">{{ today }}</h2>
<!-- 调用自定义全局指令 -->
<h1 v-color = "red">认真学习Vue.js</h1>
</div>
893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
