Vue2.0 学习 第二组 语法模板
本笔记主要参考菜鸟教程和官方文档编写。
1.文本绑定
一般在dom中用{{}}标时,并且在vue构造体内的data中定义文本内容
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
2.v-html
可以在vue构造体中的data中定义html语句,之后再dom中用v-html引用该语句,就会加载以html编辑后的内容。比如
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>Amadeus Mozart</h1>'
}
})
</script>
3.v-bind
HTML 属性中的值应使用 v-bind 指令。先看代码,
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
<button v-bind:disabled="use">Button</button>
</div>
在这段代码中,主要实现的是根据输入true或者false,来控制class1的引用和button的显示,
input元素中用v-model将use和input的值实现双向绑定,这样你点击input就是就是输入true给use变量,之后使用v-bind来单向绑定,调用class来改变class,又用‘class1‘:use来判断use的值确定是否要更改class1,调用disabled来根据use的值确定button的显示。
除此之外,v-model和v-bind是有明显区别的,v-model是双向绑定,比如你用v-model将data中的数据绑定给一个input元素,你在input元素中更改数据,在data中的数据会同步更改,但是v-bind同样将data中的数据绑定给input元素,你更改input中的数据,data中的数据不会跟着动,所有v-bind是单向绑定。详细可看 Vue中v-bind,v-on,v-model都是干什么的(区别以及详细用法)?自制动图,一看就懂 ∠( °ω°)/ 前端知识 中所详细介绍。
4.表达式
vue支持完整的js表达式。例如,
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
在以上代码中,data部分非常正常,但是在dom中的{{}}中出现了表达式,第一个{{}}中就是代表着输出5+5的结果,第二个表达式时根据ok的布尔值输出yes或者no,第三个我们拆分看,message本身在data中是一个RUNOOB的字符串,调用split修饰符后就将字符串切割成一个个字母,R,U,N,O,O,B,再调用reverse修饰符后,字母顺序被逆置,变成B,O,O,N,U,R,最后调用join修饰符,字母重新合成字符串输出。v-bind:id将data中的id和list-合成为list-1,绑定给id。
5.指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上
6.参数
参数在指令后以冒号指明。例如
<body>
<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>
7.用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定,v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值,即data中的元素值
8.v-on
v-on是监听事件
比如在button中使用v-on:click监听点击事件
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
9.过滤器
格式:①{{ a | b }}②<div v-bind:id="a | b"<div/>
这其中的a是原始数据,b就是过滤器
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
此实例中,message就经过capitalize的函数过滤后返回首字母大写的字符串,其中charAt(0)是寻找到第一个字符,touppercase则是使其大写,再加上使用slice(1)截出来的除第一个字母的字符串,拼接成首字母大写的字符串.
10.缩写
v-on :click --> @click
v-bind:href -->:href