站在月亮上Da ...
Vue常用的指令
v-text ： 主要用来更新 textContent，可以等同于 JS的innerText属性。
v-html : 输出真正的HTML v-html="变量" （它等同于JS的innerHtml属性）
v-if , v-else , v-else-if ： 判断
条件为真 渲染 dom节点
条件为假 则不渲染dom节点
v-for : 循环
v-for=”value in array”
v-for=”(value,index) in array”
v-model : 创建双向数据绑定 （用于 表单元素 上）
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
v-show :
条件为真显示有dom
条件为假隐藏有dom style:"dispaly:nond"
v-bind : v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等 简写 为 ：
:class=' ' / : style=' ' / :src=' ' / :属性名=' '
v-once ： 能执行一次性地插值，当数据改变时，插值处的内容不会更新。
v-on : 事件名
列：v-on:click=”事件名(参数)” 简写：@click=”事件名(参数)”
Vue常用修饰符
事件修饰符 . . .
.stop : 阻止点击事件冒泡
.prerent : 防止执行预设行为
.capture : 阻止捕获事件
.selt : 只出发自己范围时间 不包含 子元素
.once : 只执行一次
键盘修饰符 . . .
up 上
.down 下
.left 左
.right 右
.esc 退出
.enter 回车
.tab 制表符
.space 空格
v-model 修饰符 . . .
v-model.lazy 使用 change 事件进行同步(按下回车)
number 自动将用户的输入值转为数值类型
trim 自动过滤用户输入的首尾白字符
v-on可以监听多个方法吗？
v-on 是可以 监听 多个方法的
列 :
同一事件 . . .
< button v-on:click = ' one( ) , two( ) ' /> 我是按钮 </button>
不同事件 . . .
< button v-on:click = ' { click : one , mouserover : two } ' /> 我是按钮 </button>
< button v-on:click = ' one( ) ' v-on:mouserover = ' two( ) ' /> 我是按钮 </button>
vue中key值的作用
v-for需要key给每一个节点, 做一个唯一的标识符 , ( 他就能根据key值去判断某个是否修改，重新渲染这一项 ) ( 会牵扯到 diff 算法 )
虚拟 dom 的 diff 算法
a.两个相同的组件产生类似的dom结构，不同的组件产生不同的dom结构
b.同一层级的一组节点，可以通过唯一的id进行区分 （ 在v-for 的 key 不就是 唯一 id嘛~）
c.当一层有很多相似的节点的时候，也就是列表节点时，diff算法的更新过程 会 默认 遵循寻 以上 规则
Vue组件中的data为什么必须是函数
为什么呢？这是因为每一个Vue 组件都是一个实列 , 通过 new Vue ， 实例化引用用一个对象， 假如data 是对象的化 ，那么一旦修改某一组件的数据，那么其他组件相同数组也就会随着改变。所以必须是函数，是函数的话，那么Vue组件的data 它 都将拥有一个 属于自己的 作用域 ， 互不干扰 . . .
