Vue学习笔记——第一部分
本章目标
•理解MVVM思想
•vue介绍
•掌握Vue指令、计算属性、数据监听
•掌握Vue单向、双向绑定的方法
•理解Vue生命周期
•掌握使用axios进行ajax操作
•掌握Vue组件的定义和注册方式
•掌握父子和子父组件传值
•了解ElementUI中的常用组件
•掌握cli方式搭建项目、安装依赖
•掌握路由的配置跳转和嵌套
•了解使用Vuex实现组件传值
理解MVVM思想
什么是MVVM？MVVM是Model-View-ViewModel的缩写。
MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
vue.js介绍
•Vue是一套用于构建用户界面的渐进式的轻量级框架
•Vue是MVVM设计模式的具体实现方案
•Vue只关注视图层，便于与第三方库或既有项目整合
•Vue可以与现代化的工具链和各种类库结合使用，为复杂的SPA提供驱动
vue起步
模板语法
•Vue.js中使用的是基于html的模版语法，可以将Dom元素绑定至Vue实例中的数据。
•页面中模版即就是通过{{}}方式来实现模版数据绑定。
•###1、数据绑定的方式
•+ 单向绑定
• 方式1：使用两对大括号{{}}
• 方式2：使用v-text、v-html
•+ 双向绑定：
• v-model指令实现
•
•###2、其他指令
• v-once 数据只绑定一次
单向绑定
单向绑定大号括号语法：{{message}}
使用v-html指令 插入HTML代码:
v-text指令 插入文本:
v-once指令:{{message}}
双向绑定
message:{{message}}
message:{{message}}
男
女
gender:{{gender}}
吃
喝
玩
乐
hobbies:{{hobbies}}
grade:{{grade}}
你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：
message:{{message}}
可以自动去除用户输入的字符首尾的空白字符，可以给v-model添加trim修饰符：
message:{{message}}
转换用户输入的值为数值类型 ，可以给v-model天剑number修饰符：
message:{{message}}
常用指令
v-bind
•###1、v-bind
•使用v-bind指令进行DOM属性绑定
•v-bind 用法：
• v-bind:属性名=“属性值”
• ##简写 :属性名=“属性值”
• :src=""
•style和class属性用法：
• style:
• .txt{color:#ff0000;} .bgcolor{background-color: #ccc;}
• html:
• 文本内容
v-bind属性数据绑定代码：
使用v-bind指令实现属性数据绑定
使用v-bind指令的简写方式实现属性数据绑定
v-bind属性操作class和style的实例代码
v-if、v-elseif、v-else
•###2、v-if、v-elseif、v-else
•v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
•可以使用v-else-if指令来充当 v-if 的“else-if 块”，可以连续使用。
•可以使用 v-else 指令来表示 v-if 的“else块”。
•v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
•v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
•控制切换一个元素是否显示也相当简单：
实例代码
v-for
•###3、v-for
•基于源数据多次渲染元素或模板块，对数组或对象进行循环操作。
•遍历一个数组和数组对象
实例代码：
v-for
-
{{item}}
-
索引为：{{index}}，元素值为：{{item}}
-
{{item.name}}
-
{{index}}--{{item.id}}--{{item.name}}
编号
用户名
{{item.id}}
{{item.name}}
v-on
•###4、v-on
•用来绑定事件，用法：v-on:事件=“函数”，简写方式@事件=“函数”
计算属性
•### 1. 什么是计算属性
•计算属性也是用来存储数据的，但具有以下几个特点：
•
•+ 数据可以进行逻辑处理操作
•+ 可以对计算属性中的数据进行监视
•
•注意：
•
•+ 计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新。
•+ 计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行
•
•get和set方法
•
•计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性的操作。
•默认只有get方法。
代码实例：
{{message}}
{{message.split('').reverse().join('')}}
{{reverseMessage}}
{{reverseMessage}}
{{myMessage}}
{{myMessage}}
{{reverseMessageMethod()}}
监听属性
监听属性watch它是一个对data的数据监听回调, 当依赖的data的数据变化时, 会执行回调。在回调中会传入newVal和oldVal两个参数。Vue实列将会在实例化时调用$watch(), 他会遍历watch对象的每一个属性。
**watch的使用场景是：**当在data中的某个数据发生变化时, 我们需要做一些操作, 或者当需要在数据变化时执行异步或开销较大的操作时. 我们就可以使用watch来进行监听。
watch分为普通监听和深度监听
普通监听代码示例
信息：{{message}}
年龄：
理解handler方法及immediate属性
如上watch有一个特点是: 第一次初始化页面的时候, 是不会去执行age这个属性监听的, 只有当age值发生改变的时候才会执行监听计算. 因此我们上面第一次初始化页面的时候, ‘message’ 属性值默认为空字符串。那么我们现在想要第一次初始化页面的时候也希望它能够执行 ‘age’ 进行监听, 最后能把结果返回给 ‘message’ 值来。因此我们需要修改下我们的 watch的方法，需要引入handler方法和immediate属性, 代码如下所示:
信息：{{message}}
年龄：
理解deep属性
watch里面有一个属性为deep，含义是：是否深度监听某个对象的属性的值, 该值默认为false。
信息：{{obj.message}}
年龄：
如上述代码, 如果我们不把 deep: true添加的话,当我们在输入框中输入值的时候，改变obj.age值后，obj对象中的handler函数是不会被执行到的。受JS的限制, Vue不能检测到对象属性的改变。它只能监听到obj这个对象的变化,比如说对obj变化操作会被监听到，但是对obj的内部属性的值变化监听不到。
watch 和 computed的区别是：
相同点：他们两者都是观察页面数据变化的。
不同点：computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。
watch每次都需要执行函数。watch更适用于数据变化时的异步操作。
VUE生命周期钩子
vue数据是怎么驱动视图的?
一堆数据放在那里是不会有任何作用的，它必须通过我们的View Model（视图模型）才能操控视图。
图中的model其实就是数据，一般我们写成js对象的格式；
中间的这个所谓View Model，就是
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
我们把数据放到了vm里，然后把各种directive（命令）放到视图里，这样我们就可以以vm为媒介，通过改变数据来改变视图。
误区
vm实际上是Vue这个类的一个实例，非常容易混淆的是，你会很容易的以为
vm.el == '#app';
vm.data== {
message: 'Hello Vue!'
};
vm.data.message =='Hello Vue!';
实际上这都是错误的，
以上虽然是错误的写法，有时候我们还是希望获得这些属性的，通过vm你需要这样写：
vm.$el === document.getElementById('app') //结果为true
vm.$data.message ==='Hello Vue!' //结果为true
这个$符代表的就是vm的真实属性了。
那么通过vm读取数据，实际上，vm.messasge == ‘Hello Vue!’, vm的属性是直接跟数据的key绑定的（至于怎样绑定的现在不用管),这是一种代理属性;
vue生命周期钩子
•每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如 created 钩子可以用来在一个实例被创建之后执行代码：
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
vue实例从创建到销毁的过程，称为生命周期，共有八个阶段
生命周期钩子函数
{{message}}
简化版生命周期
VUE完整示例new vue()参数详解
•1.1 el:"#id", //DOM成员
•提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
•1.2 template:"`", //DOM成员
•一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot
•1.3 render: (h)=>{h(App)}, //DOM成员
•字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。
•1.4 data //数据成员
•data():{ return{ } },
•Vue实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化
•1.5 methods //数据成员
•methods:{ func(){ } }
•methods将被混入到 Vue 实例中，可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用
•方法中的 this自动绑定为 Vue 实例
•1.6 watch //数据成员
•watch:{ key:value $route:function (newValue, oldValue) { //监控路由 } }
•整个为一个对象，键是需要观察的表达式，值是对应回调函数
•1.7 computed //数据成员
•computed:{ getTotalCount(){ const totalCount=0; return totalCount; } },
•vue的计算属性，将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例
•1.8 props //数据成员
•props:['counts','ids'],
•用于父子组件的eventbus传值，是数组或对象，props的成员是子组件接收的来自父组件的数据
•1.9 propsData //数据成员
•创建实例时传递 props。主要作用是方便测试
•1.10 filters //资源
•filters('filterName',(input,function(){ return newvalue }))
•包含 Vue 实例可用过滤器的哈希表。
•1.11 directives //资源
•包含 Vue 实例可用指令的哈希表。
•1.12 components //资源
•（即该组件的子实例）这里是包含 Vue 实例可用组件的哈希表。
•1.13 name //杂项
•允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。
•1.14 parent //杂项
•指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。
•1.15 mixins //杂项
•mixins 选项接受一个混合对象的数组。Mixin钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。
•1.16 extends //杂项
•允许声明扩展另一个组件。这主要是为了便于扩展单文件组件。这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级。
•1.17 delimiters //杂项
•改变纯文本插入分隔符。
•1.18 functional //杂项
•使组件无状态（没有 data ）和无实例（没有 this 上下文）。他们用一个简单的 render 函数返回虚拟节点使他们更容易渲染。
扩展单文件组件。这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级。
•1.17 delimiters //杂项
•改变纯文本插入分隔符。
•1.18 functional //杂项
•使组件无状态（没有 data ）和无实例（没有 this 上下文）。他们用一个简单的 render 函数返回虚拟节点使他们更容易渲染。