Hello Vue～！

2017-05-30 本文已影响0人我是白夜

Vue特性介绍

渐进式框架

什么是渐进式框架
按需应用

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

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实例

Vue实例

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

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

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

Vue代理data数据

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

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模版

插值

 <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"属性。

使用字符串:

//错误写法=>根节点仅能有一个，不允许有兄弟节点
 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>

渲染结果

使用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() 属于选项对象的属性，”最接近编译器的“方法。

数据对象属性

语法	定义
class:{}	绑定class,和`v-bind:class`的API通用
style:{}	绑定行间样式，和`v-bind:style`的API通用
attrs:{}	添加行间属性
domProps:{}	DOM元素的属性
on:{}	绑定事件
nativeOn:{}	监听原生事件
directives:{}	自定义命令
scopedSlots:{}	slot作用域
slot:{}	定义slot名称
key:"key"	给元素添加唯一标识
ref:"ref"	引用信息

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

Hello Vue～！

Vue特性介绍

渐进式框架

Vue中的两个核心点

1. 响应的数据绑定

2.组合的视图组件

虚拟DOM

MVVM模式

声明式渲染

Vue实例

指令

什么是指令?

Vue的内置指令

模版

html模版

插值

字符串模版

render函数

数据对象属性

render里的class

render里的creatElement

猜你喜欢

热点阅读