插值表达式:
<body>
<script src="./vue.js"></script>
<div id="app">
<div>{{msg}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello World'
}
})
</script>
</body>
插值表达式可以读取 data 中的数据,展示在标签上。在插值表达式中也可以进行基本的数值运算。<br/>
指令:
<body>
<script src="./vue.js"></script>
<div id="app">
<input type="text" v-model="msg"/>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello World'
}
})
</script>
</body>
v-model 指令将 data 中的数据和一个文本输入框进行绑定,data 中的数据改变文本框的内容会跟着改变,相反文本框中的内容改变 data 中的数据也会跟着改变。v-model 一般用在表单标签上(文本框、多选框、单选框、下拉框等)。v-model 在不同的表单标签上,绑定的数据类型不一样。
<body>
<script src="./vue.js"></script>
<div id="app">
<div v-text="textmsg"></div>
<div v-html="htmlmsg"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
textmsg: 'Hello World',
htmlmsg: '<h1>Hello World</h1>'
}
})
</script>
</body>
v-text 指令将文本内容展示在标签内,v-html 表将 html 片段展示在表示内。
<body>
<script src="./vue.js"></script>
<div id="app">
<a v-bind:href="url">超链接</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'http://www.baidu.com'
}
})
</script>
</body>
v-bind 指令将标签的属性与 data 中数据绑定。简写形式如下:
<a :href="url">超链接</a>
<body>
<script src="./vue.js"></script>
<div id="app">
<div v-bind:style='{color: r, fontSize: s}'>Hello World</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
r: 'blue',
s: '50px'
}
})
</script>
</body>
v-bind 指令绑定 div 标签的 style 属性,属性值可以是一个对象,对象的属性值是 data 中的数据。
<body>
<script src="./vue.js"></script>
<div id="app">
<button v-on:click="fun">按键</button>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
fun: function () {
console.log("点击了按键")
}
}
})
</script>
</body>
v-on 指令用于事件绑定,v-on 指令给按键绑定一个点击事件,当点击按键时执行 fun 方法,简写形式如下:
<button @click="fun">按键</button>
<body>
<script src="./vue.js"></script>
<div id="app">
<button @click="fun">按键</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world'
},
methods: {
fun: function () {
console.log(this.msg)
}
}
})
</script>
</body>
使用 v-on 指令绑定 button 标签的点击事件,当点击按键,执行 fun 方法,在 fun 方法中 this 指向的是 Vue 实例。
<body>
<script src="./vue.js"></script>
<div id="app">
<button @click="fun('hello world')">按键</button>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
fun: function (msg) {
console.log(msg)
}
}
})
</script>
</body>
使用 v-on 指令绑定 button 标签的点击事件,当点击按键,执行 fun 方法,可以给 fun 方法传递参数。
<button @click="fun">按键</button>
...
fun: function (e) {
console.log(e)
}
如果不传递参数,在方法声明中可以个方法添加一个参数,该参数是事件对象。
<button @click="fun($event,'hello world')">按键</button>
...
fun: function (e, msg) {
console.log(e)
console.log(msg)
}
在传递正常参数的同时也可以通过 $event 将事件对象显示的作为参数传递过来。
<body>
<script src=".t/vue.js"></script>
<div id="app">
<ul>
<li v-for="i in 10">{{i}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app'
})
</script>
</body>