2019-06-25 Vue.js

2019-06-25

1.Vue.js 是一套用于构建用户界面的渐进式JavaScript框架，它是数据驱动的，无须进行手工操作DOM。

2.引入： 可以通过script标签引入，下载并引入。

3.MVVM模式（Model-View-ViewModel）

   3.1定义View

         vue.js采用声明式渲染，允许采用简洁的模板语法来声明式地将数据渲染进DOM.这将数据和DOM建立关联，所有的东西都是响应式地。

   3. 2定义Model

   3.3创建一个Vue实例来连接view和Model

  ViewModel是Vue的实例。创建Vue实例时需要传入一个选项对象，这个对象可以包含挂载元素、数据、方法等。可以在

https://cn.vuejs.org/v2/api/#选项-数据 浏览完整的选项列表。

eg:

其中，vm是Vue的实例。每个Vue应用都是通过用Vue函数创建一个新的Vue 实例开始的。

4.数据与方法

     4.1  当一个Vue实例被创建时，它会将 data对象中的所有属性加入到Vue的响应式系统中。当这些属性的值改变时，视图将会产生“响应”，即匹配更新为新的值。

eg:

初始：

修改后：

但是，只有当实例被创建时data中存在的属性才是响应式的，如果是之后添加的，那么对该属性 的改动是不会触发视图更新的。所以如果需要一些使用属性，但一开始为空或不存在，则需要先写好（设个初始值）占位。

eg:

查看vm对象：

 

可以看到，b、c都没有，不是响应式的。

       4.2 Object.freeze()会阻止修改现有的属性，系统将无法追踪数据变化。

        4.3Vue实例暴露了一些实例属性与方法，他们都有前缀$,来与用户定义的属性区分开。

5.实例

6.生命周期函数

每个Vue实例在被创建时都要经过一系列的初始化过程，在这个过程中会运行一些叫做生命周期钩子的函数

生命周期图示：