vue常见指令
vue常见指令
vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令。
Vue.js 使用了基于 HTML 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。
1.v-html
双大括号语法无法渲染HTML标签，需要使用v-html。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-html</title>
</head>
<body>
<div id="app">
<div v-html="vue"></div>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
vue: 'Hello Vue!
'
}
})
</script>
</body>
</html>
2.v-text
类似双大括号语法渲染数据的另一种方式是使用v-text。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-text</title>
</head>
<body>
<div id="app">
<div v-text="name"></div>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
name: "builder"
}
})
</script>
3.v-for
用v-for对数组和对象的渲染方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h2>老师</h2>
<ul>
<li v-for="item in teacher">{{ item }}</li>
</ul>
<h2>学生</h2>
<ul>
<li v-for="stu in student">学号：{{ stu.id }}姓名：{{ stu.name}}</li>
</ul>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
teacher: [
"张三",
"李四",
"王五"
],
student: [
{
id: "1",
name: "sun"
},
{
id: "2",
name: "builder"
},
{
id: "3",
name: "builder2991"
}
]
}
})
</script>
</body>
</html>
4.v-if
渲染数据的时候，同样也可以使用条件判断。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="role == 'sun'">
<h2>come on sun</h2>
</div>
<div v-else-if="role == 'builder'">
<h2>welcome builder</h2>
</div>
<div v-else>
<h2>sorry</h2>
</div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
role: "builder"
}
})
</script>
</body>
</html>
5.v-show
与v-if不同，v-show通过样式的display控制标签的显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-show</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-show="isShow">Hello Vue!</h1>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
isShow: true
}
})
</script>
</body>
</html>
6.v-bind
属性绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<style>
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<a v-bind:href='link' v-bind:class="{active: isActive}">Github</a>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
link: "https://github.com/sunbuilder",
isActive: true
}
})
</script>
</body>
</html>
7.v-on
另一个非常重要的指令是v-on，使用v-on可以在标签上面绑定事件，注意vue中多了一个属性methods，是实现具体事件的方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-on</title>
</head>
<body>
<div id="app">
<!-- 绑定一个事件-->
<a v-bind:href='link'
v-bind:class="{active: isActive}"
v-on:click="myClick"
>去百度</a>
<!--绑定多个事件-->
<button v-on="{click: myClick,
mouseenter: mouseEnter,
mouseleave: mouseLeave}">
点我今晚吃鸡~~~
</button>
</div>
<script src="vue.js"></script>
<script>
// 绑定属性，简写冒号：
let app = new Vue({
el: "#app",
data: {
link: "https://www.baidu.com",
isActive: false
},
methods: {
myClick: function () {
console.log("哈哈哈哈哈哈哈")
},
mouseEnter: function () {
console.log("come on");
},
mouseLeave: function () {
console.log("go out");
}
}
})
</script>
</body>
</html>
8.v-model
修改后的数据能够及时的渲染到模板层，需要获取到数据，可以使用v-mode指令。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<p>请选择你的性别</p>
<br>
<input v-model="name"/>
<p><input type="text" v-model="name"/></p>
<p>
<input type="checkbox" value="男" v-model="gender"/>
<input type="checkbox" value="女" v-model="gender"/>
</p>
<br>
{{ name }}
{{ gender }}
<p>请选一本书</p>
<select name="" id="" v-model="book">
<option>浪潮之巅</option>
<option>余生请多指教</option>
<option>三体</option>
</select>
<br>
{{ book }}
<p>
<textarea v-model="article"></textarea>
</p>
<br>
{{ article }}
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
name: "builder",
gender: [],
book: [],
article: "这是一篇文章",
}
})
</script>
</body>
</html>