vue基础--小王学习笔记（一）

MVVM

---

MVVM:Model 、View、ViewModel

---

vue创建实例

<div id="app">
	<p>{{ msg }}</p>
</div>
<script>
var vm = new Vue({
	el:'#app',    //目的地 
	data:{     //数据
		msg:'Hello World!'
	}
})
</script>

常用基本指令

---

v-cloak：能够解决插值表达式闪烁问题。

v-test：没有闪烁问题，会覆盖元素中原本的内容；但是插值表达式只会替换自己的占位符，不会把整个元素清空。

v-html：会覆盖元素中原本的内容，用于html内容。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。

v-band：vue中提供用于绑定属性的指令。简写为（ ：要绑定的属性）。只能实现数据单向绑定从M自动绑定到V

使用class样式
1.数组
<span :class="['red','thin']">这是一个标签</span>
2.数组中使用三元表达式
<span :class="['red','thin',isactive?'active':' ']">这是一个标签</span>
3.数组中嵌套对象
<span :class="['red','thin',{'active':isacctive}]">这是一个标签</span>
4.直接使用对象
<span :class="{red:true,italic:true,active:true,thin:true}">这是一个标签</span>
使用内联样式
1.直接在元素上通过 :style 的形式，书写样式对象
<span :style="{color:'red','font-size':'40px'}">这是一个标签</span>
2.将样式对象，定义到 data 中，并直接引用到 :style 中

data:{  
    spanStyle:{ color:'red','font-size':'40px'}
 }

<span :style="spanStyle">这是一个标签</span>
3.在 :style 中通过数组，引用多个 data 上的样式对象

data:{  
    spanStyle1:{ color:'red','font-size':'40px'},
    spanStyle2:{ 'font-weight':'200'}
 }

<span :style="[spanStyle1,spanStyle2]">这是一个标签</span>

v-on：事件绑定机制 简写为（ @要绑定的事件）。

事件修饰符：

1. .stop - 调用 event.stopPropagation()。 阻止事件冒泡
2. .prevent - 调用 event.preventDefault()。阻止默认事件
3. .capture - 添加事件侦听器时使用 capture 模式（事件捕获模式）。
4. .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
5. .once - 只触发一次回调。

按键码的别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

自定义全局按键修饰符：Vue.config.keyCodes.别名=按键码值

v-model：表单控件或者组件上创建双向绑定

v-for：循环（预期：Array | Object | number | string | Iterable (2.6 新增) ）在组件中使用v-for需要key

<!--1.迭代对象中中的属性-->
<div v-for="(val, key,i) in items">{{val}}-{{key}}-{{i}}</div>
<!--2.迭代数字-->
<div v-for="i in 100">这是第 {{i}}个</div>

当vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，vue将不是移动DOM元素来匹配数据的顺序，简单复用此处每个元素，确保它在特定的索引下显示已被渲染过的每个元素。
v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊属性 key 来提供一个排序提示，使用v-bind属性绑定的形式指定key值，key属性只能使用number获取 string。

v-if：根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。（有较高的切换性能消耗）
当v-for和 v-if 一起使用时，v-for 的优先级比 v-if 更高

v-show： 根据表达式之真假值，切换元素的 display CSS 属性。（有较高的初始渲染消耗）

---

过滤器

全局过滤器：
语法：Vue.filter(‘过滤器的名称’,function(msg,参数){})
调用：{{ msg | 过滤器的名称 }}
私有过滤器：在实例面

 filters:{
    dataFormat:function(dataStr,pattern){  }
 }

自定义指令

在调用时以**v-**开头 <input v-focus>
全局指令：

Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
        ...
})

局部指令：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
钩子函数参数
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下属性：

• name：指令名，不包括 v- 前缀。
• value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
• oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
• expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
• arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
• modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true,bar: true }。

vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
函数简写
在很多时候，可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

生命周期