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钩子函数
很奇怪一点,现在的我不是很理解,在连续两次更新之后,最后获取的页面数据为空