Vue
Vue是什么
Vue是一套用于构建用户界面的渐进式框架。
Vue的核心库只关注视图层，数据和DOM已经被建立了关联，所有东西都是响应式的。
Vue是数据驱动的，写Vue代码时我们不需要关注页面如何渲染，只需要关注Vue中的数据就可以了。
因为Vue所有的元素都是它自己管理的，所以我们使用Jquery、layui等其他的js框架去操作Vue管理的元素时，就会有冲突，导致元素渲染失败或事件绑定无效。
所以我们在使用Vue时，尽量避免同时使用其他框架，都是用Vue统一管理。如果非要用，则有两种解决方案：
- 使用Vue指令
v-once，只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。 - 在元素发生变化时，再次调用其他框架的方法去做对应的操作。
Vue实例
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
created: function () {
// 在实例创建完成后被立即同步调用
},
mounted: function () {
// 实例被挂载后调用
},
methods: {
log: function () {
console.log(this.message);
}
}
});
Vue的常用指令
- v-text
更新元素的文本内容<span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span> - v-html
更新元素的innerHTML<div v-html="html"></div> - v-show
根据表达式之真假值，切换元素的display。当条件变化时该指令触发过渡效果（transition）。<div v-show="isShow"></div> - v-if
根据表达式的值来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
与之对应的还有：v-else、v-else-if<div v-if="value == 1">一</div> <div v-else-if="value == 2">二</div> <div v-else="value > 2">其他</div> - v-for
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法alias in expression，为当前遍历的元素提供别名。<div v-for="item in items">{{ item.text }}</div> <div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, name, index) in object"></div>v-for的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attributekey来提供一个排序提示。<div v-for="item in items" :key="item.id"> {{ item.text }} </div> - v-on
@为缩写。
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 与上面一样 --> <button @click="doThis"></button> <!-- 与上面一样 不写()会默认传$event --> <button @click="doThis($event)"></button> <!-- 内联语句 --> <button @click="doThat('hello', $event)"></button> <button @click="count += 1"></button> <button @click="isSHow = !isSHow"></button> - v-bind
:为缩写。
动态地绑定一个或多个属性，或一个组件prop到表达式。
在绑定class或style时，支持其它类型的值，如数组或对象。<!-- 绑定一个属性--> <img v-bind:src="imageSrc"> <img :src="imageSrc"> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- 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的值，message的值也会随之变化 --> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>
Vue组件
<script>
Vue.component('my-component-name', {
template: '<button v-on:click="count++">{{ name }} clicked me {{ count }} times.</button>',
data: function () {
return {
count: 0
}
},
props: ['name'],
});
</script>
<!-- 使用 -->
<div>
<my-component-name ref="myComponent" name="testName"></my-component-name>
</div>
全局注册组件
Vue.component('my-component-name', { /* ... */ })
my-component-name为组件名，即使用时的标签名称，别用大写。
使用组件：<my-component-name></my-component-name>，和使用标签差不多
template
组件的具体内容。
data
组件的数据，个组件的data选项必须是一个函数，每个实例可以维护一份被返回对象的独立的拷贝，不然操作数据时影响到其它所有实例。
props
这里定义的是使用组件时，标签中传入的属性的名称的定义。
可以是数组或对象
- 数组
直接写要传入的属性名称就可以了props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] - 对象
对象的键为属性名称，值为属性的类型及验证的方法。props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } }
渐进式框架
VUE不强求你一次性接受并使用它的全部功能特性。
就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。
所以VUE的适用面很广，你可以用它代替老项目中的JQuery。也可以在新项目启动初期，有限的使用VUE的功能特性，从而降低上手的成本。
一开始不需要你完全掌握它的全部功能特性，可以后续逐步增加功能。
MVVM 模型
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。
