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（选项对象）

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

2. Vue代理data数据

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

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

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

vue实例的自身属性和方法

指令

什么是指令?

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

Vue的内置指令

模版

html模版

插值

 <div id="demo" :custom="abc">
        <!--简单的表达式-->
        {{ true? 123:456}} {{1+2+3+46+5}}
        <div v-html="html"> </div>
 </div>

  <script>
        let obj = {
            html: "<h1>这里是H1标签</h1>",//避免恶意攻击，此处必须是可信的html结构
            abc: 1
        }
        var vm = new Vue({
            el: '#demo',
            data: obj
        })
   </script>

渲染结果

字符串模版

template字符串

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

1. 使用字符串:

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

 <div id="demo" v-html="html" :data-id="abc"> </div>

    <script>
        let obj = {
            abc: 1
        }

        // 正确写法
        var str = `<div>hello ,Vue!{{abc}} <div>Test text</div>  </div>`;
        var vm = new Vue({
            el: '#demo',
            data: obj,
            template: str // template权限更高会冲掉静态Dom
        })
    </script>

渲染结果

2. 使用x-template:

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

    <div id="demo">
        <span>测试文字</span>
    </div>

    <script type="x-template" id="temp">
        <div>
            hello,{{abc}}
            <span>{{message}}</span>
            <div v-html="html">
            </div>
        </div>
    </script>

    <script>
        let obj = {
            message: "我是个message",
            html: "<p>这里是一个段落</p>",
            abc: "test"
        }
        var vm = new Vue({
            el: "#demo",
            data: obj,
            template: "#temp"
        });
    </script>

渲染结果

render函数

render() 属于选项对象的属性，”最接近编译器的“方法。

数据对象属性

render里的class

render里的class是使用v-bind来通过数据驱动添加或者移除的，它与原生的class能够共存。

<style>
   .bg { background: #9f0;}
   .fontSize {font-size: 50px;}
</style>
<div id="demo" class="fontSize" :class="{bg:addClass}">测试文字</div>
<script>
    let obj = {
      addClass: true
    }
    var vm = new Vue({
      el: "#demo",
      data: obj,
    });
</script>

渲染结果

render里的creatElement

语法: createElement(tagName,data,childElement)

参数说明:

参1 tagName ：标签名

参2 data ：数据对象{}

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

 <div id="demo"> </div>
    <script>
        var vm = new Vue({
            el: "#demo",
           
            render(creatElement) {
               // creatElement(标签名，{数据对象},子元素)
              
              
              //此处return的就是VNode对象(虚拟DOM)
                return creatElement(
                    "ul",
                    //自定义属性 
                    {
                        class: {
                            bg: true,
                                fontSize: true
                        },
                        // 添加行内样式
                        style: {
                            padding: "10px",
                            margin: "0",
                            listStyle: "none"
                        },
                        // 添加自定义属性
                        attrs: {
                            abc: "xyz"
                        },
                        // domProps的innerHTML权重比createElement高
                        domProps: {
                            innerHTML: "<li class='bg2'>我的权重更高</li>"
                        }
                    }, [
                        creatElement("li", 1),
                        creatElement("li", 2),
                        creatElement("li", 3)
                    ]
                )
            }
        });
    </script>

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