2019年最全最新Vue、Vuejs教程，从入门到精通【p1-p25】

2019年最全最新Vue、Vuejs教程，从入门到精通

一、Vue、Vuejs的认识和特点介绍
1.Vue是一个渐进式的框架，什么是渐进式的呢？
-渐进式意味着你可以把vue作为你应用的一部分嵌入其中，慢慢对项目中的一部分进行重构，
-如果你希望将更多的业务逻辑使用vue实现，那么将会使用到vue的全家桶core（vue的核心）+router+Vuex（vue的状态管理）
2.vue有很多特点和Web开发中常见的高级功能
-解耦视图和数据
-可复用的组件
-前端路由技术
-状态管理
-虚拟DOM
3.官网
Vue的官方网站

二、Vue中的MVVM（Model–view–viewmodel）
1.绑定数据
-MVVM中通过viewmodel 中的 Data Bindings（数据绑定）将数据绑定到view中，将我们的JS中的数据绑定到DOM中展示出来
2.事件回调
-MVVM中通过viewModel中的DOM Listeners（事件监听）将DOM中的一些响应事件回调到JS对象中。
3.view层
-视图层，在我们前端开发中，通常就是DOM层，主要的作用是给用户展示各种信息
4.Model层
-数据层，数据可能是我们固定的死数据，更多的是来自我们服务器从网络上请求下来的数据。
5.ViewModel层
-视图模型层，视图模型层是view和model沟通的桥梁。一方面它实现了Data Bindings，也就是数据绑定，将model的改变实时的反应到View中。另一方面它实现了DOM Listener，也就是DOM监听，，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data。

三、vue的生命周期
1.简单解释
-但使用new Vue（）的时候，如果新创建的实例有钩子函数的话，Vue的生命周期会对函数进行回调，并且告诉实例函数生命周期已经执行到对应的步骤
-生命周期就是一个对象（如vue)从声明到使用到销毁的各个阶段，为了开发方便框架会在每个阶段的节点上定义一个特定函数，这个特定函数就是生命周期函数，也叫钩子函数，更大点叫回调函数

四、一些指令的使用
1.v-text指令
-类似于mustache语法，用于将data数据中的message的值显示在标签中
2.v-pre指令
-把html的{{message}}原封不动的显示出来
3.v-once
-只修改一次data传递来的值
4.v-html
-某些情况下我们从服务器请求到的数据本身就是一个HTML代码，如果是html代码我们希望将其按照HTML格式进行解析，并且显示相应的内容，这时可以使用v-html指令。
5.v-cloak
-在vue解析之前，div中有一个属性v-cloak，在vue解析之后，就会删除v-cloak属性
-防止在页面加载时先出现变量名闪烁的情况,造成不好的用户体验

五、动态绑定属性
1.v-bind指令
-使用v-bind指令可以让属性被动态的赋值，而不再是只能被静态的写死。例如用在src、href、class前
2.v-bind的语法糖
-直接写一个冒号（：）
3.class=“{}”
-使用：class=“{‘类名’:true/false}”可以动态的绑定class对象语法
这里的class里面跟的是一个对象，可以通过给类名传动态的布尔值来决定是否在元素中绑定一个类。
4.用法
【1】直接通过{}绑定一个类 :class={‘active’:isActive}
【2】也可以通过判断，传入多个值 :class={‘active’:isActive，‘line’：isLine}
【3】和普通的类同时存在，也并不冲突
【4】如果过于复杂，可以放在一个methods或者computed中

六、计算属性（computed）的基本使用
1.语法
computed:{
// fullName:function(){
// return this.firstName + " " + this.lastName
// }
fullName:{
set:function(newValue){
const name = newValue.split(" ");
this.firstName=name[0];
this.lastName=name[1];
},
get:function(){
return this.firstName + " " + this.lastName
}
}
}
2.注意
-计算属性一般情况下是没有setter方法的，是一个只读属性，所以一般情况下计算属性会只写getter方法，并进行简写。
3.计算属性和methods的对比
-vue内部对计算属性做了一层缓存，如果每次调用的时候计算属性没有发生变化，它不会进行多次调用，所以在多次调用的时候，性能上优于methods方法