Hello Vue～！

Vue特性介绍

渐进式框架

什么是渐进式框架

按需应用

1. 声明式渲染： 核心库，只当作模版引擎使用，将数据渲染到视图中
2. 组件系统：将界面划分n个小模块
3. 客户端路由： 做移动端SPA单页应用
4. 大规模状态管理： 组件过多，共享数据
5. 构建工具 ： 模块化，打包

Vue中的两个核心点

1. 响应的数据绑定

• 当数据发生改变====>自动更新视图。(双向绑定)
• 核心机制: 主要是利用Object.defineProperty()方法中的setter和getter来代理数据，并且监控对数据的操作。

get
一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

set
一个给属性提供 setter 的方法，如果没有 getter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。

2.组合的视图组件

• UI 页面映射为组件树

• 划分组件可维护、可重用、可调试

  
  
  

  视图组件

虚拟DOM

• 运行js的速度很快，但是大量操作DOM的效率就相对很慢。时常在更新数据后会重新渲染页面，这样造成没有改变数据的地方也重新渲染DOM节点，这样就会造成了很大程度上的资源浪费和性能降低。
• 利用在内存中生成与真实环境DOM与之相对应的数据结构，这个在内存中生成的结构称之为虚拟DOm。

虚拟DOM渲染过程

• 当数据发生变化时，能够以最小代价按规则计算出重新渲染组件并应用到DOM操作上。

  
  
  

  只修改有数据更改的地方

MVVM模式

• M： Model 数据类型
• V ：View 视图模版
• VM ： view-Model 视图模型,也就是new Vue()

M层和V层是相对独立的，通过VM层做联系

声明式渲染

        var arr = [1, 2, 3, 4, 5];
        // 命令式渲染
        //**需要以具体代码表达在哪里做什么，以及如何实现
        var newArr1 = [];
        for (var i = 0; i < arr.length; i++) {
            newArr1.push(arr[i] * 2);
        }

        // 声明式渲染
        //**只需声明在哪里做什么，无需关心如何实现
        var newArr2 = arr.map(function(i) {
            return i * 2;
        })
        console.clear();
        console.log(newArr1);
        console.log(newArr2);

Vue实例

1. Vue实例

每一个应用都是通过Vue这个构造函数创建根实例来启动new Vue（选项对象）

需要传入的选项对象包含挂在元素、模版、方法等。

选项对象	用途	类型
el	挂载元素选择器	String|HtmlElement
data	代理数据	Object|Function
methods	定义方法，放置事件处理函数	Object

2. Vue代理data数据

每个Vue实例都会代理其data对象里所有的属性，这些被代理的属性是响应的。新添加的属性不具备相应功能，改变后不会更新视图。

3. Vue实例自身属性及方法

暴露自身的属性和方法，以&开头，例如:&el,&data....

vue实例的自身属性和方法

---

指令

什么是指令?

• 指令是一种特殊的自定义行间属性;
• 指令的职责是当其表达式的值发生改变时，相应的将某些行为应用到DOM上;
• 在Vue中，指令以v-开头

Vue的内置指令

指令	说明
v-bind	动态的绑定数据。简写为:
v-on	绑定事件监听器。简写为@
v-text	更新数据，会覆盖已有结构。
v-html	可解析数据中的html结构。
v-show	根据值来获取真假，切换元素的display属性。true为显示，false为隐藏。
v-if	根据值来获取真假，切换元素会被销毁和重建。true为重建，false为销毁。
v-else-if	多条件判断，条件为真则渲染。
v-else	条件都不符合时渲染。
v-for	基于源数据多次渲染元素或者模版块。
v-model	在表单控件元素上创建双向数据绑定。
v-pre	跳过元素及其子元素的编译过程。
v-cloak	隐藏未编译的Mustache语法,css中设置{v-cloack}{display:none}
v-once	仅渲染一次，随后数据更新也不会重新渲染。

模版

html模版

插值

 

        
        {{ true? 123:456}} {{1+2+3+46+5}}
        
 
 

  

渲染结果

字符串模版

template字符串

• template选项对象的属性。
• 模版会替换挂在的元素，挂载元素的内容都将被忽略。
• 根节点只能有一个,允许嵌套，禁止并列。因为是映射的是一个对象嵌套对象的形式。
• 将html结构写在一对script标签中，并设置type="x-template"属性。

1. 使用字符串:

//错误写法=>根节点仅能有一个，不允许有兄弟节点
 var errorStr = `
hello ,Vue!{{abc}}
test text
`;

渲染结果

2. 使用x-template:

缺点：不能跨文件使用，同样只能允许有一个根节点,类似于

测试文字

渲染结果

render里的creatElement

语法: createElement(tagName,data,childElement)

参数说明:

参1 tagName ：标签名

参2 data ：数据对象{}

参3 childElement:子元素（文本或数组）

输出DOM结果以及控制台打印return creatElement