一、vue的安装和部署
二、创建第一个vue应用
创建vue对象,Vue()函数
三、 数据与方法
watch()方法,观察变量的变化,记录变量变化之前和变化之后的值。
四、生命周期
生命周期钩子函数不能使用箭头函数,因为要对this使用,而箭头函数是没有this的。
几种主要的钩子函数:
- beforeCreate在实例初始化之后,在数据观测和watch/event事件配置之前被调用。
- created在实例创建后立即被调用,此时实例已经完成数据观测(data observer),属性和方法的运算和watch/event事件回调,但此时挂载阶段还没开始,$el属性目前不可见。
- beforeMount在挂载之前被调用:相关渲染函数被首次调用。
- mounted,el被新创建的vm.$el替换,挂载成功。
- beforeUpdate数据更新时调用。
- updated组件dom已经更新,组件更新完毕。
五、模板语法
1.插值
插入变量的值。
形式:{{变量}}
使用v-once可以有一次性的插入,其后变量更新,插入后的值不改变。
2.原始HTML
双大括号{{变量}}只能将数据解释为普通文本,而非HTML代码。为输出真正的HTML,需要使用v-html指令。
rawHtml : '<span style="color:red">this is should be red</span>'
//以双大括号形式1
<p>Using mustaches: {{ rawHtml }}</p>
//以v-html形式2
<p v-html="rawHtml"></p>
结果:
3.特性
使用v-bind:属性=“data中表示样式的数据”(属性指标签的属性,例如src,class等等),缩写:class=" “或者:src=” "。
4.使用JavaScript表达式
可以在模板语法中使用复杂的函数运算。
六、指令
带有v-前缀的特殊特性,具有响应式。
v-if=“变量” ,变量为真时显示。
指令的修饰符
以‘.’指明的特殊后缀,指出一个指令应以特殊的方式绑定,例如:
@click.stop中.stop可以在当前点击事件执行完后停下来。(更多请看第十条)
七、class与style的绑定v-bind
可以动态的改变标签的样式。
语法:(v-bind):class="{active:isActive}"
含义:名称为.active样式是否绑定在标签上取决于isActive的值,为真就绑定,为假就不绑定。与普通class属性可以共存,还可以绑定多个class属性。
改变内联样式:
:style=“width:200px;height:200px;”
八、v-if 条件渲染
新增v-else-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
v-show始终保持在页面上,只是通过改变css样式来改变是否在页面上显示。
九、v-for列表渲染
1.对数组的遍历
语法:item,index in items
各个表示:item是数组元素,可以取任何名字,只要符合命名规则;items是要渲染列表数组的名称,与数组名相同;in是固定的,不可改变;index表示数组元素的索引。
{{item}}即可遍历获得数组的内容。
2.对对象属性的遍历
语法:value,key in object
各个表示:value代表的是对象的属性的值,可以取任意名字,只要符合命名规则;object表示要遍历的对象,与对象名相同;key表示对应属性的名称。
{{value}}即可遍历获得对象的属性。
十、事件绑定,click=“函数”
常见事件修饰符
.stop:阻止单击事件继续传播,完成当前事件后就停止执行。
.prevent:提交事件不再重载页面。
修饰符可以串联,也可以只有修饰符。
.capture 添加事件监听器时使用事件捕获模式 ,即内部元素触发的事件先在此处理,然后才交由内部元素进行处理。
十一、表单输入双向绑定v-model
十二、组件基础Vue.component()函数创建新组建
自定义的元素,带有自己的名字。
语法:Vue.component(“自定义的名字”,对象)
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })