vue笔记.2

vue实例创建

<srcipt>

var VM=new Vue({

可选项

})

可选项有

data：数据对象，会自动将数据对象转换成getter，setter方法

methods：方法  this指向实例本身

components：子组件

computed：计算

filters：过滤器，可以在插值表达式{{data|filter}}中使用，在filters{中编写过滤器}

插值表达式{{}}

el：唯一根标签，与id或者class绑定

watch：监听数据

停止服务
两下Ctrl+C 

数据绑定

绑定内联样式

可以通过直接绑定样式属性值，<div v-bind:style=".....">

绑定的是外层div

在Vue中绑定样式对象，绑定的是内层div

<div v-bind:style=""mtdiv">

data{

mtdiv{

......}

}

绑定样式类

.box{}

<div v-bind:class="box">

data{

box='box'

}

样式类：

.box{

}

内置指令：

v-model：双向数据绑定

v-on： 监听

v-bind：单项

v-text:插入文本

v-for:列表渲染

v-if:条件渲染

v-shpw：显示渲染

vue组件

可以非常容易的实现代码复用，减少耦合性

Vue.component（'组件命名'，{

组件代码

}）

局部注册组件

temponents:{

}

template模板，定义变量名当文本变量用，或者绑定id使用

props：父组件传值到子组件

$emit:用于传值到父组件

$emt:子组件的方法中，@click,触发绑定的事件，返回传值的参数

$emit:('事件名'，参数)

组件切换：有v-if切换和 v-bind：is切换

例如：

@click.prevent=‘flag’=true

@click.prevent=‘flag’=false

通过标签名和v-if=fliag

标签名 v-else

is切换则比较准确

直接在标签内绑定组件 cnm=组件名

<component v-bind:is="cnm">

页面挂载

beforemout

mouted

在挂载前后关系着是否关联到数据上

数据更新

挂载后，数据发生变化会执行beforeupdate和updata钩子函数

很奇怪一点，现在的我不是很理解，在连续两次更新之后，最后获取的页面数据为空