Vue 资料整理

vue

一、介绍

Vue是一套用于构建用户界面的渐进式框架

1.渐进式的理解

Vue 的核心库只关注视图层

便于与第三方库或既有项目整合

与[现代化的工具链](https://cn.vuejs.org/v2/guide/single-file-components.html)以及各种[支持类库](https://github.com/vuejs/awesome-vue#libraries--plugins)结合使用,也可为应用提供驱动

2.环境安装

<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>

vue-cli方式（新手不推荐)

3.数据驱动

vue用的是数据驱动的思路 数据改变了，视图会“自动"改变

4.虚拟dom和diff算法使数据改变时视图变化的dom操作效率很高

虚拟dom(js对象,对象里存储的是模板的内容调用render函数返回的对象)

数据改变了，比对数据变化前后的对象的差异(diff算法）, 找出变化的部分，对变化的部分做真实的dom操作, 提高dom操作的效率

###5、MVVM

M model 模型 存储数据 dataV view 视图 模板（template)VM viewModel 视图模型 vm

6、检查的数据的变化的原理 Object.defineProperty

数组用下标改变，或者对象增加属性，这样的改变数据是不能触发视图更新的，要用 Vue.set(对象,属性，值) 或this.$set(对象,属性，值)

7、学习的五大部分 ( 指令 组件 路由 vuex 第三方的插件)

二、helloworld程序

1、一个基本的程序结构

new Vue（｛el：“挂载的元素” 挂载的元素不能是body或htmldata:{ key:value...} 存储数据的地方template："<div>模板的内容" ，渲染数据的是模板 ,如果没有指定template,默认的模板就是el挂载的元素，如果el和template同时存在，渲染的是template模板的内容｝）

2、插值表达式 { {插值表达式}} Mustache

不能为 if for 这样的语句。可以调用函数，可以写表达式

3、模板 template

1) template和el同时存在 渲染的是template的内容2) 模板的内容不能只是文本3)根元素只能有一个

4、computed

~~~jscomputed: { // 计算属性的 getterreversedMessage: function () { // `this` 指向 vm 实例return this.message.split('').reverse().join('')}}~~~

~~~jscomputed: { fullName: { // getterget: function () { return this.firstName + ' ' + this.lastName},// setterset: function (newValue) { var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}}~~~

5、watch

~~~jswatch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal)},// 方法名b: 'someMethod',// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深c: { handler: function (val, oldVal) { /* ... */ },deep: true},// 该回调将会在侦听开始之后被立即调用d: { handler: 'someMethod',immediate: true},~~~

+ 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,所以，对于任何复杂逻辑，你都应当使用计算属性

三、指令

1、v-bind

- 把变量的值绑定到标签的属性上 可以简写为“:"- v-bind:style="{key:value....}" 对象的形式- v-bind:class="{'类名':布尔值的表达式}" 常用- v-bind:class="[类名1，类名2...]"

2、v-on

+ 事件监听的指令 v-on:事件="事件处理函数"+ 事件处理函数是放在methods里面+ $event 事件对象 （事件处理函数调用时不传参数 默认 传递的参数是$event)+ 阻止冒泡 v-on:事件.stop，阻止默认的行为 v-on:事件.prevent （.stop .prevent 指令的修饰符)+ 简写为 @+ 监听键盘事件 v-on:keyup.enter 回车 v-on:keyup.esc esc键

3、v-if

~~~html例如:<p v-if="a>0">1</p><p v-else-if="a===0">0</p><p v-else>-1</p>~~~

是惰性的 条件不满足，不渲染 有更高的切换开销

4、v-show

+ 满足条件显示，不满足条件的就隐藏。

不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换

+ 有更高的初