文章目录

1.Vuejs安装方式2.Vue.js初体验3.MVVM模型4.对象options5.Vue的生命周期

1.Vuejs安装方式

Vue的安装方式有3种

第一种、下载和引入 1.下载好vue.js框架； 官网中下载 (有开发环境版本和生产环境版本(即未压缩版和压缩版),开发过程中用开发环境版本) 2.下载好后用 <script> </script>标签引入； (类似于引入jQuery) 第二种、CDN引入 (直接引入vue.js框架对应的链接即可； 链接到一个明确的版本号和构建文件) 1. 开发环境版本： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 2.生产环境版本： <script src="https://cdn.jsdelivr.net/npm/vue"></script> 第三种、NPM安装管理 * 后续通过webpack和CLI的使用，我们使用该方式。 * NPM 能很好地和诸如webpack或Browserify 模块打包器配合使用， 同时Vue也提供配套工具来开发单文件组件。

2.Vue.js初体验

<script src="js/vue.js"></script> //引入之后就可以在<script>中写Vue相关代码了 <div id="app">{{message}}</div> //显示数据，放在{{ }}中； <script> const app=new Vue({ el:"#app", //用于挂载要管理的元素； data:{ //用于定义数据 message:"你好啊！" } }) </script> //第一个Vue程序，体验一下Vue的响应式 //代码做了什么事情？ // (1).创建了一个Vue对象,并在里面传入了一个对象{} // (2).{}中的el属性：该属性决定了该Vue对象挂载哪个元素， // 我们这里是挂载到了id为app的元素上。 // 挂载哪个元素，就用vue实例中的内容操作哪个元素。 // (3).{}中的data属性：该属性中通常会存储一些数据。 // 这些数据可以是我们直接定义出来的，也可以来自网络，从服务器加载的； // Vue中一般不用var，用let(变量)、const(常量,如接收该构造函) // 响应式：可以实现数据的实时更新； 上面代码的实现过程： (这种编程范式是：声明式编程) 1.挂载元素后，就会去解析这个元素，然后解析到某个变量message； 2.看Vue实例在data中有没有定义这个变量，如果定义了就会把该变量的值在元素中显示。 即：先根据el，找元素---》解析元素内容---》对照data； 声明式编程好处：做到数据与界面完全分离 如果是元素js中的做法： (这种编程范式是：命令式编程) 1.创建div元素，并设置id属性 2.定义变量message 3.将message变量放在div元素中显示 //计数器 <script src="js/vue.js"></script> <div id="app"> <h2>当前计数:{{counter}}</h2> <button v-on:click="add">+</button> <button v-on:click="sub">-</button> //点击执行对应点的方法 //<button v-on:click="counter++">+</button> //<button v-on:click="counter--">-</button> </div> <script> const app=new Vue({ el:"#app", data:{ counter:0 }, methods:{ //定义管理元素要使用的方法 add:function () { this.counter++ //this，表示当前对象中的counter变量 }, sub:function () { this.counter-- } } }) //响应式：直接修改data内容，响应到显示的内容； </script>

3.MVVM模型

MVVM (Model View View Model) ：解决数据和页面显示的问题而出现前端的MVVM框架， 是一种模块化开发代码分层的思想或者框架。 MVVM 的优点： 1.主要目的是分离视图（View）和模型（Model） 2.降低代码耦合，提高视图或者逻辑的重用性。 3.提高了模块的可测试性 我们直接来看Vue的MVVM (Model View View Model) (1).View层： *视图层 *在我们前端开发中，通常就是DOM层。 *主要的作用是给用户展示各种信息。 (2).Model层： *数据层 (data) *数据可能是我们固定的死数据，更多是来自我们服务器，从网络上请求下来的数据。 *在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。。 (3).VueModel层： *视图模型层 *视图模型层是View和Model沟通的桥梁。 *一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中。 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时， 可以监听到，并在需要的情况下改变对应的Data。 即：1.数据绑定：view上面显示的永远是Model上最新数据，是因为VueModel帮我们实现了； 2.DOM监听：监听事件，并在需要的情况下改变对应的Data。 1. Vue初体验-计数器 这个案例中的MVVM： View：是展示给用户的部分， 所以是<div id="app"> </div>这部分的内容; Model：是我们的数据， 所以是app中data的内容； VueModel：将Model展示到View， 所以是创建的Vue对象实例,new Vue(); 2. 我们的计数器中就有严格的MVVM思想: View依然是我们的DOM Model就是我们我们抽离出来的obj ViewModel就是我们创建的Vue对象实例 3.它们之间如何工作呢？ 首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。 其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，改变obj中的数据。

4.对象options

我们在创建Vue实例的时候，传入了一个对象options。

这个options 可以包含很多的选项，如： 1.el: 类型：string | HTMLElement 作用：决定之后Vue实例会管理哪一个DOM。 2.data: 类型：Object | Function （组件当中data必须是一个函数） 作用：Vue实例对应的数据对象。 3.methods: 类型：{ [key: string]: Function } 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

5.Vue的生命周期

Vue生命周期 :从诞生到消亡的整个过程； :创建一个new Vue()，它的源码里面会做一系列的事情。这一系列的事情就是它的生命周期。 (1).每个 Vue 实例在被创建时，源码中都要经过一系列的初始化过程。 例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。 (对el的处理，对data的处理、对method的处理、更新DOM...) (2).同时在这个过程中也会自调用一些叫做生命周期钩子的函数， 这给了用户在不同阶段添加自己的代码的机会; (执行自己想执行的内容) 比如created 钩子可以用来在一个实例被创建之后执行代码， 也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。