更改的最常用的逻辑:视图层做个和JavaScript的绑定
只有在data里面的才能绑定到视图层,因为实例化vue的时候传入的是data值,只有在data里有初始化的变量才会引起对应的变化
vue实例里面都有啥东西,自带的属性是有$符号的而自己增加的比如message是没有$的
vue 钩子函数
create实例已被创建
mounted实例已被挂载
this根据上下文就是当前的vue
模板语法
1.插值
当模板编译成虚拟dom,我们整合响应式系统,vue可以计算出要渲染多少的组件,这时候我们会用到mouth胡子语法
属性里动态加载class用v-bind
实现点击一次变灰,如果用dom操作选择组件,然后去修改对应的值,但是用vue的插值语法就会让你很简便动态控制属性class等等,
插值只能做单个表达式,可用用到三目运算符
2.指令
v-on
v-if是无参数的指令
v-bind 是有参数的指令,都可以用缩写
vue的动态计算属性
计算属性computed的变化是基于他绑定的 属性来变化的,visable变了new Data就会变,这就叫做计算属性的缓存机制,白起用方法可以更加节省性能
除了计算属性,vue还提供了侦听watch属性的方法
当然我们也可以用computer来替代watch
class和style的绑定
实现对象的直接绑定
或者用computed,实现对calss对象的传递
style绑定内联元素
两个条件语句
1.v-if
templete是个不会被渲染出来的空壳子 控制多个html节点
可以用key值说明当前是唯一的一个节点
如此一来lable不会重新渲染而input就会
2.v-show条件渲染,节点还存在但节点被隐藏掉了,v-show更高效因为他不会把节点删掉
列表渲染
数组
记得给key,虚拟dom需要id
可以遍历对象
也可以遍历数组
可以用计算属性的方式进行过滤