Vue 简单介绍和指令

1.js框架与库

js框架和类库都是由原生js编写而成
类库（jquery）只是想原生中的复杂调用的方法进行简化
不改变整体结构，不控制项目流程
框架同样在内部封装和简化了一些常用方法，
但是更重要的是，框架规定了我们的书写流程，
将代码按逻辑分层，更便于我们开发和维护

2.Vue对象的三个属性

el ：操作的element对象
data：将要操作的数据
methods：将要操作的方法（在函数中，改变data中的变量时要注意；改变原数组的方法可以直接用,不改变原数组的方法需要赋值回原数组）

3.MVVM框架设计结构

M：Model：负责数据存储
V：View：负责页面展示
VM：View Model ：负责业务逻辑处理，对数据进行加工后交给视图展示

4.使用vue的基本三步

1.导入vue.js文件
2.定义一个范围，表示此范围内的所有指令都是被Vue来解决的
3.通过new Vue（）实例化一个对象

5.指令

v-text
更新元素的textContent。
如果要更新部分的textContent，需要使用｛｛msg｝｝插值

<span v-text="msg">更新全部content </span>

<span> 可以只更新{{msg}}</span>

差值表达式 {{ }}
与v-text 的区别
{{ }}在加载html再加载Vue.js的时候会闪现{{}}后再渲染数据
解决办法：
1、在标签上挂载v-clock指令。

<div v-cloak>{{ msg }}</div>

2.在style标签种书写相应样式

[v-cloak]{
    display: none;
    }

v-text在上述的情况下,会将没有渲染出来的数据隐藏；
双大括号会将数据解释为普通文本，而非 HTML 代码
v-cloak
这个指令保持在元素上直到关联实例结束编译。
和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

v-pre
跳过这个元素和它的子元素的编译过程。
可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译
v-once
只渲染元素和组件一次。随后的重新渲染，
元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
v-html
更新元素的 innerHTML；
会编译字符串中的标签,即识别HTML

v-on 事件添加

<a v-on:click="doSomething">...</a>

可以简写成@

<a @click="doSomething">...</a>

* v-on 修饰符*
.stop - 调用 event.stopPropagation()；
.prevent - 调用 event.preventDefault()；
.capture - 添加事件侦听器时使用 capture 模式；
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调；
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器。

v-bind 单向绑定
动态地绑定一个或多个特性
可绑定：
class：
<div :class="{ red: isRed }"></div>

<div :class="[classA, classB]"></div>

<div :class="[classA, { classB: isB, classC: isC }]">

style

    <div :style="{ fontSize: size + 'px' }"></div>

    <div :style="[styleObjectA, styleObjectB]"></div>

简写 空格：

v-model：双向绑定
适用于表单属性（input,select,textarea,components）
v-model 修饰符：
.lazy
失焦更新数据,

<input v-model.lazy="msg" >

.number
将输入的值转换为Number类型( 如果原值的结果为NAN则返回原值 )
这通常很有用，因为在 type=”number” 时 HTML 中输入的值也总是会返回字符串类型。

<input v-model.number="age" type="number">

.trim
自动过滤用户输入的首尾空格

<input v-model.trim="msg">

v-for
根据一组数组的选项列表进行渲染
v-for 指令需要使用 item in items 形式的特殊语法，items是源数据数组，并且item 是数组元素迭代的别名
key :v-for 默认行为试着不改变整体，而是替换元素，迫使其重新排序的元素，你需要提供一个key的特殊属性

<div v-for="item in items" :key="item.id">
       {{ item.text }}
    </div>

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升
一个对象的遍历
value 是循环的每一项的键值
key 循环的每一项的键名
index 是循环的每一项的索引值

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

一个数组的遍历
item 是循环的每一项
index 是循环的每一项的索引值

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>

v-if
当条件变化时该指令触发过渡效果；
删除/添加元素 控制多行元素
根据表达式的值的真假条件渲染元素，在切换时元素及它的数据绑定 / 组件被销毁并重建。
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？
此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素
v-else-if
前一兄弟元素必须有 v-if 或 v-else-if
v-else
前一兄弟元素必须有 v-if 或 v-else-if
v-show
控制单行元素显示隐藏；
根据表达式之真假值，切换元素的 display CSS 属性
当和 v-if 一起使用时，v-for 的优先级比 v-if 更高

@keyup
@keyup.13=””
@keyup.aaa=”“

Vue.config.keyCodes.aaa=13 //设置keyup键位

input键盘弹起事件