基本语法
<div id="app">
{{ message }}
</div>
div的id是app，内容为一个名为message的变量
在js代码块内：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
声明一个名为app的对象，该对象是一个vue对象，其中element使用id选择器，选择了id为app的代码
块，并为变量message赋值"hello vue"
完成渲染后即可看到页面上出现"Hello Vue"这行字
创建Vue实例
var vm = new Vue({
// 选项
})
示例
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程
生命周期钩子 函数可以让用户在实例化的过程中进行一些操作
beforeCreate – created – beforeMount – mounted – beforeDestroy – destroyed
除此之外，在data更新时，存在beforeUpdate 和 updated 两个阶段
调用生命周期钩子的示例如下：
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg : "hi vue",
a : 'hihi'
},
beforeCreate:function(){
console.log('beforeCreate');
},
created:function(){
console.log('created')
},
beforeMount:function(){
console.log('beforeMount')
},
mounted:function(){
console.log('mounted')
},
beforeUpdate:function(){
console.log('beforeUpdate')
},
updated:function(){
console.log('updated')
}
});
vm.$watch('a',function(newval,oldval){
console.log(newval,oldval)
})
setTimeout(function() {
vm.msg = 'change...'
}, 3000);
</script>
语法
插值
- 文本插值
常常使用{{}}来插值
<span>Message: {{ msg }}</span>
使用 v-once指令，可以使插值为一次性的
<span v-once>不变的: {{ msg }}</span>
- 原始html
使用指令v-html来输出html元素而非字符串
<div id="app">
{{msg}}
<p>这是字符串:{{rawHtml}}</p>
<p v-html="rawHtml"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg : "hi vue",
rawHtml : '<span style="color:red">这应该是红色的</span>'
},
})
</script>
结果
- HTML属性
Mustache语法不能作用在HTML特性上，需要使用v-bind指令
<div v-bind:class="color"></div>
这里对该标签的class进行了绑定，绑定了color这个属性，此时我们可以在vue对象中对该特性赋值
data: {
msg : "hi vue",
rawHtml : '<span style="color:red">这应该是红色的</span>',
color : 'red'
},
那么，div的class名称就是"red"了，可以使用css样式对.red进行设定
- javascript语句
<p>{{ number + 1 }}</p>
若在vue类中给number赋值10，则页面上会输出11
<p>{{ ok ? 'yes' : 'no'}}</p>
三元运算符，对ok进行赋值
<p>{{ message.split('').reverse().join('') }}</p>
字符串表达式，对message赋值
指令
指令是带有v-的特殊特性
指令的作用是在表达式的值变化改变时，将其影响于dom
例子
<p v-if='seen'>看到了吗</p>
v-if 根据表达式 seen 的真假来决定是否显示该元素
参数
一些指令能够接受参数
<a v-bind:herf='url'>...</a>
该指令将herf属性与url绑定，在vue中对url进行赋值，该超链接即链接到url指定的网址
修饰符
以.指明的特殊后缀，用于指出一个指令应该以特殊的方式绑定
例如 .prevent 修饰符告诉v-on指令对触发的事件调用event.preventDefault()
<form v-on:submit.prevent="onSubmit">...</form>
再例如，一个点击事件
<div @click="click1">
<div @click.stop="click2">
点我
</div>
</div>
在没有.stop修饰的情况下，点击“点我”将触发两个click事件，但如果使用了.stop，就不会触发click1事件
class与style绑定
使用v-bind:class="…"可以实现动态class
<div id="app">
<div
class="test"
v-bind:class="{active:isActive}"
style="width: 200px;height: 200px;text-align: center;line-height: 200px;">
hi Vue
</div>
</div>
如上图，div元素的class与{active:isActive}进行了绑定
active是css样式，即isActive的真假决定了该div是否使用该样式
同时可以看到，静态的样式test与动态样式是可以共存的
也可以在动态样式中添加多个样式
数组写法：
v-bind:class="[isActive ? 'active' : '']"
使用三元运算符即可实现
style绑定
例子
<div
:style="{color : color,fontsize:size}">
hi vue
</div>
通过style，可以设置color变量和size变量，在vue类中对这两个变量赋值即可改变样式
同样可以使用三元运算符
<div
:style="{color : color,fontsize:size,background:isRed ? '#FF000' : ''}">
hi vue
</div>