Vue常用指令
1、v-model：绑定变量，双向绑定
v-model.lazy：在事件之后同步进行
v-model.number：把用户输入的数据类型转换为数值类型
v-model.trim：去掉首尾空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 绑定变量msg -->
<input type="text" v-model="msg">
<!-- 显示msg的值，与输入框同步更新 -->
<h2>{{msg}}</h2>
<!-- 使用v-html绑定原生的HTML代码 -->
<span v-html="rawHtml"></span>
<div>{{ok?'YES':'NO'}}</div>
<!-- 在事件之后进行同步 -->
<input type="text" v-model.lazy="lazy">
<h2>{{lazy}}</h2>
<br>
<!-- 把用户的输入类型转换为数值类型 -->
<input type="text" v-model.number="number">
<h2>{{typeof number}}</h2>
<!-- 自动过滤收尾的空格 -->
<input type="text" v-model.trim="trim">
<h2>{{trim}}</h2>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
msg:'',
rawHtml:'<span style="color:red">这里是红色</span>',
ok:'1',
lazy:'',
number:'',
trim:''
}
})
</script>
2、v-html：绑定原生的HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 绑定变量msg -->
<input type="text" v-model="msg">
<!-- 显示msg的值，与输入框同步更新 -->
<h2>{{msg}}</h2>
<!-- 使用v-html绑定原生的HTML代码 -->
<span v-html="rawHtml"></span>
<div>{{ok?'YES':'NO'}}</div>
<!-- 在事件之后进行同步 -->
<input type="text" v-model.lazy="lazy">
<h2>{{lazy}}</h2>
<br>
<!-- 把用户的输入类型转换为数值类型 -->
<input type="text" v-model.number="number">
<h2>{{typeof number}}</h2>
<!-- 自动过滤收尾的空格 -->
<input type="text" v-model.trim="trim">
<h2>{{trim}}</h2>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
msg:'',
rawHtml:'<span style="color:red">这里是红色</span>',
ok:'1',
lazy:'',
number:'',
trim:''
}
})
</script>
3、v-if：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="isShow">isShow is true</h1>
<h1 v-else>isShow is false</h1>
<template v-if="isShow">
<p>段落1</p>
<p>段落2</p>
</template>
<div v-show="isShow">true 可以显示</div>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
isShow:false
}
})
</script>
4、v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="isShow">isShow is true</h1>
<h1 v-else>isShow is false</h1>
<template v-if="isShow">
<p>段落1</p>
<p>段落2</p>
</template>
<div v-show="isShow">true 可以显示</div>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
isShow:false
}
})
</script>
5、v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="isShow">isShow is true</h1>
<h1 v-else>isShow is false</h1>
<template v-if="isShow">
<p>段落1</p>
<p>段落2</p>
</template>
<div v-show="isShow">true 可以显示</div>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
isShow:false
}
})
</script>
6、v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<button v-on:click="add">点击+1</button>
<button @click="add2(2)">点击+2</button>
</div>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
num:1,
},
methods:{
add:function(){
this.num++;
},
add2:function(num1){
this.num = this.num+num1
//打印日志
console.log(num1)
}
}
})
</script>
7、methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<button v-on:click="add">点击+1</button>
<button @click="add2(2)">点击+2</button>
</div>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
num:1,
},
methods:{
add:function(){
this.num++;
},
add2:function(num1){
this.num = this.num+num1
//打印日志
console.log(num1)
}
}
})
</script>
8、v-bind：绑定属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 指定样式通过css指定 -->
<div style="width: 100px;height:100px;border:1px solid #000" v-bind:style="bgcolor">true 可以显示</div>
<!-- 绑定超链接 -->
<a :href="baidu">访问百度</a>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
//设置背景色
bgcolor:{
backgroundColor:'blue'
},
//绑定超链接为百度首页
baidu:'https://www.baidu.com'
}
})
</script>
9、v-href：绑定超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 指定样式通过css指定 -->
<div style="width: 100px;height:100px;border:1px solid #000" v-bind:style="bgcolor">true 可以显示</div>
<!-- 绑定超链接 -->
<a :href="baidu">访问百度</a>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
//设置背景色
bgcolor:{
backgroundColor:'blue'
},
//绑定超链接为百度首页
baidu:'https://www.baidu.com'
}
})
</script>
10、v-for:遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 遍历数组 -->
<div v-for="item in list">{{item}}</div>
<!-- 遍历数组，并提取索引 -->
<li v-for="(item,index) in list">
{{index}}-{{item}}
</li>
<!-- 迭代对象 -->
<li v-for="item of items">{{item}}</li>
<li v-for="(item,key) of items">
{{key}} : {{item}}
</li>
<!-- 提取对象的索引 -->
<li v-for="(item,key,index) of items">
{{index}} : {{key}} : {{item}}
</li>
</div>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
list:[1,2,3],
items:{
one:'第一组',
two:'第二组',
three:'第三组'
}
}
})
</script>
