1.v-model
指令用于表单输入,实现表单控件和数据的双向绑定。一般在 <input>、<select>、<textarea>
、组件中使用。
<body>
<div id="app">
<div>val的值:{{val}}</div>
<input v-model="val">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
val:'123'
}
})
</script>
2.v-on:
简写为@,基础事件绑定,用于监听指定元素的DOM事件,比如点击事件。绑定事件监听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="sayHi()">Click</button>
</div>
<script>
var vm = new Vue({
el: "#app",
methods: {
sayHi: function(){
alert('123')
}
}
});
</script>
</body>
</html>
3..v-bind
是用于给标签内的属性赋值,指令被用来响应地更新 HTML 属性,动态绑定一些元素的属性,简写为":"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">点击跳转</a>
<img v-bind:src="imgSrc"/>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
url: 'http://www.baidu.com',
imgSrc: 'https://cn.vuejs.org/'
}
});
</script>
</body>
</html>
4.v-if指令:取值为true/false,控制元素是否需要被渲染。
v-else指令:和v-if指令搭配使用,没有对应的值。当v-if的值false,v-else才会被渲染出来。
v-show指令:指令的取值为true/false,分别对应着显示/隐藏。
v-if和v-show有同样的效果,不同在v-if是重新渲染DOM,v-show使用display
属性来控制显示隐藏。v-if有更高的切换消耗,v-show有渲染消耗但它只是基于css的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p v-show="flag">123</p>
<button v-on:click="hide">显示和隐藏</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true
},
methods:{
hide: function(){
this.flag=!this.flag;
}
}
});
</script>
</body>
</html>
<div id="app">
<div>
成绩为:<span v-if="score >= 90">优秀</span>
<span v-else-if="score >= 80">良好</span>
<span v-else-if="score >= 60">及格</span>
<span v-else>不及格</span>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:'message',
score:59,
},
})
</script>
5.v-for指令:遍历vue实例中data属性的值,实现列表的渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul >
<li v-for="student in students">{{student.name}}的年龄是:{{student.age}}岁</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
students: [
{name:'xiaoming',age: 18},
{name: 'xiaohong',age: 19},
{name: 'xiaolan',age: 10}
]
}
});
</script>
</body>
</html>
6.v-once: 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新
<body>
<div id="app">
<p v-once>输入框的值:{{ msg }}</p>
<p>输入框的值:{{ msg }}</p>
<input type="text" v-model="msg">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: "123"
},
methods: {
}
})
</script>
</body>
</html>
此处v-once绑定的p标签的msg值不会改变
7.v-text是用于操做纯文本,它会替代显示对应的数据对象上的值。
v-html用于输出html,它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。
<body>
<div id="app">
{{friend}}
<div v-text="friend"></div>
<div v-html="friend"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
friend:"<h1>hi</h1>"
}
})
</script>
</body>
此时v-text会把标签转义输出。即原模原样输出,h1标签没效果,但是v-html会直接输出结果。即h1标签会出效果