一.Vue实例
内存图:
1.把Vue的实例命名为vm,vm对象封装了对视图的所有操作包括 数据读写、事件绑定、DOM更新
2.vm的 构造函数是Vue,按照ES6的说法vm所属的类是Vue
3.options是new Vue的参数一般称为 选项或 构造选项
1.options里面有什么
- 英文文档搜options中文文档搜选项即可得相关所有文档
- options的五类属性
★数据: data, props,propsData, computed, methods, watch
★Dom: el,template,render,renderError
★生命周期钩子:beforeCreate, created,beforeMount, mounted,beforeUpdate, updated, activated, deactivated,beforeDestroy, destroyed,errorCaptured
★资源: directives,filters, components
★组合:parent, mixins,extends,provide,inject
★其他
template(HTML模板)语法:
- 展示内容:
表达式
★{ { object.a }}表达式
★{ { n+1 }}可以写任何运算符
★{ { fn(n) }}可以调用函数
★如果值为undefined或者null就不显示
★另一种写法为<div v-text="表达式"></div>
HTML内容
★假设data.x的值为<strong>hi</strong>
★<div v-html="data.x"></div>即可显示粗体的hi
我就想展示{ { n }}
★<div v-pre>{ { n }}</div>
★v-pre不会对模板进行编译
2.绑定属性:
★绑定src:<img v-bind:src="x"/>
★v-bind:简写为:<img :src="x"/>
★绑定对象:
<div :style="{border:'1px solid red',height:100}"</div>
//注意这里把'100px’写成100
3.绑定事件:
★v-on:事件名
<button v-on:click="add">+1</button>//点击之后,Vue会运行add()
<button v-on:click="xxx(1)">xxx</button>//点击之后,Vue会运行xxx(1)
<button v-on:click="n+=1">xxx</button>//点击之后,Vue会运行n+=1
//即发现函数就加括号调用之,否则直接运行代码
★缩写
<button @click="add">+1</button>//正常人都用缩写
4.条件判断:
★if...else
<div v-if="x>0">x大于0</div>
<div v-else-if="x===0">x等于0</div>
<div v-else>x小于0</div>
5.循环:
★for(value,key) in 对象或数组
<ul>
<li v-for="(u,index) in users" :key="index">
索引:{
{index}} 值{
{u.name}}
</li>
</ul>
<ul>
<li v-for="(value, name) in obj" :key="name">
属性名:{
{name}} 属性值:{
{value}}
&l