前言
- Vue 的兼容性
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
2. Vue 是一套 MVVM框架，核心是数据驱动界面，其中 VM 是调度者，作 V 和 M 的中间处理。
3. 起步
<!-- 这是 MVVM 中的 V 视图-->
<div id="zz">
<p>{{message}}</p>
</div>
<script>
//1. 创建Vue的实例 这是 MVVM 中的 VM 调度者
let vm = new Vue({
el : '#zz', // 表示我们新建的 Vue 实例要控制的页面区域
data : { // data 中存放 el 中要用到的数据 ，这是 MVVM 中的 M ，保存页面的数据
message : 'Hello world !',
tip : '数据驱动视图'
}
});
注意：在 Vue 中不要去操作 DOM，这是在 Vue 中要避免的事情
指令
- v-text : 更新元素的 textContent
<p v-text=" 'what' + message">我去哪儿</p>
p 标签中的文本为 'what' + message(在 Vue 实例的 data 中) - v-html : 更新元素的 innerHTML
<p v-html="message">我去哪儿</p>
类似 Jq 中的 html 的写功能 - v-show ： 根据表达式之真假值，切换元素的 display CSS 属性。
<p v-show=" 'true' ">show</p>
先加载元素，切换元素的 display 属性，如果涉及到元素的可见性频繁切换，就用它 - v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
<p v-if=" 'true' ">要显示</p>
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 - v-for : 基于源数据多次渲染元素或模板块。
<p v-for="(value,index) in message">
{{index + ':' + value}}
</p>
此指令之值，必须使用特定语法 alias in expression,其中 expression 可以是方法返回的一个数组或对象，不一定是 data 中的数据
注意:
- 在使用v-for去进行列表渲染时，Vue 包含一组观察数组的变异方法
pop push shift unshift splice sort reverse，它们将会触发视图更新，如果你通过arr[index]或者以其他方式去修改数组，则不会改变视图。如果你想用到concat之类的方法，可以直接去改变数据的引用，也是可以更新视图的 - 还有一种方式：可以通过
Vue.set(vm.arr, index, value)或vm.$set(vm.arr, index, value)的方式修改数组也是可以改变视图的 - 对象修改则只能用
Vue.set或者vm.$set，或者改变引用
- v-on : 绑定事件监听器 缩写为@
<button @click = "changeText">函数绑定</button>
<button v-on:click = "changeColor(color)">变色</button>
修饰符 :
.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 : 动态地绑定一个或多个特性，或一个组件 prop 到表达式 缩写为
:
<div :class="[classA, { classB: isB, classC: isC }]">
修饰符:
.prop- 被用于绑定 DOM 属性 (property)。(差别在哪里？)
.camel- (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
.sync(2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的v-on侦听器。v-model : 在表单控件或者组件上创建双向绑定。
<input type="text" v-model="message">
双向绑定数据v-pre
<span v-pre>{{ this will not be compiled }}</span>
显示原始的插值表达式v-cloak ：这个指令保持在元素上直到关联实例结束编译
/*CSS属性选择器*/
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
解决插值表达式的加载闪烁问题
- v-once : 只渲染元素和组件一次
<p v-once>原始值:{{message}}</p>
只渲染一次，当数据改变时，不再重新渲染
自定义指令
// 自定义全局指令
Vue.directive('focus', {
bind: function () {},
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
},
update: function(){}
})
钩子函数:
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
钩子函数的参数:
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，主要用到的属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
directives : { // 定义私有自定义指令
'fontColor' : function (el, binding) { // 简写模式，默认写到 bind 和 update 里面
el.style.color = binding.value;
}
}
注意：在指令定义时的名称使用驼峰命名法时，使用要在之间加 '-' 而不是直接写指令名。如上使用时应该写为 v-font-color
过滤器
- 全局过滤器
// 全局过滤器 作页面渲染前的最后一层过滤 ，应该写在实例对象之前不然会找不到过滤器
Vue.filter('myFilter', (value, para) => {
if (!value) {
return '';
}
return value.replace(/很好/g, para);
});
- 私有过滤器
let vm = new Vue({
el : "#zz",
data : {},
methods : {},
filters : { // 定义私有过滤器 过滤器调用采用就近原则，优先调用私有过滤器
dateFormat : function (dateStr, pattern="") {
// 传入时间字符串得到时间
var dt = new Date(dateStr);
// yyyy-mm-dd
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, "0");
var d = dt.getDate().toString().padStart(2, "0");
if (pattern.toLowerCase() == "yyyy-mm-dd") {
return `${y}-${m}-${d}`;
}else {
var hh = dt.getHours().toString().padStart(2, "0");
var mm = dt.getMinutes().toString().padStart(2, "0");
var ss = dt.getSeconds().toString().padStart(2, "0");
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
}
});
