Vue学习笔记第二篇——Vue基础

Posted 2020-10-15

一.Vue实例

每一个应用都是通过vue这个构造函数创建根实例启动。

var vm = new Vue({

// 选项

})

需要传入选项对象，包含挂载元素，数据，模板，方法等。

el：挂载元素选择器   

data：代理数据

method：定义方法

 

1.vue代理data数据

每个vue实例都会代理其data对象的所有属性，这些被代理的属性是响应的，但新添加的属性不具备响应。

2.vue实例自身的属性和方法

以$开头，如$el  $data ...

二.声明式渲染

声明式：只需要声明在哪里，做什么，无需关心如何实现。

命令式：需要具体代码表达在哪里，做什么，如何实现。

三.指令

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

vue中的内置指令

 

四.模板

分为html模板，字符串模板，模板render函数

1.html模板

基于DOM的模板，模板都是可解析的有效的HTML

——插值

文本插值：使用"Mustache"语法（双大括号）{{value}}

       作用：替换实例上的属性值，当值改变时，插值内容会自动更新。

原生的html：双大括号输出的是文本，不会解析html

属性：使用v-bind绑定属性，可以响应变化

    <!-- 模板 -->
    <div id="demo" v-bind:custom="abc"> //绑定属性；可以简写成 ：custom="abc"
        <div>{{html}}</div> //不解析html
        <div v-html="html"></div> //会解析html，将html插入了div中
    </div>
    <script>
    //数据
    let obj = {
        html:"<div>hello</div>" //原生javascript

        abc:1  
}

    var vm = new Vue({
        el:"#demo",
        data:obj
    });
    </script>

 

使用javascript表达式：写简单的表达式，不要写语句

        {{3+1}}
        {{ true ? "yes" : "no" }}

2.字符串模板

模板会替换挂载元素的，挂载元素的内容都将会被忽略；

    <!-- 模板 -->
    <div id="demo">
        <span>haha</span> //被忽略
    </div>
    <script>
    //数据
    let obj = {
        abc:1
    }

    var str=‘<div>hello vue,{{abc}}</div>‘;

    var vm = new Vue({
        el:"#demo",
        data:obj,
        template:str
    });
    </script>

 

字符串模板的根节点只能有一个；

将html结构写在一个script标签中，设置type="x-template"；

    <script type="x-template" id="temp">
        <div>hello vue,{{abc}}</div>
    </script>
    <script>
    //数据
    let obj = {
        abc:1
    }

    var vm = new Vue({
        el:"#demo",
        data:obj,
        template:"#temp"
    });
    </script>

 

3.模板-render函数

如何给标签添加class：

    <style>
        .red{
            color:red;
        }
    </style>


    <!-- 模板 -->
    <div id="demo">
        <span v-bind:class=‘{red:addClass}‘ >haha</span>
    </div>
    <script>
    //数据
    let obj = {
        addClass:true
    };
    var vm = new Vue({
        el:"#demo",
        data:obj    
    });
    </script>

render函数：

createElement(标签名，[数据对象]，子元素）； 其中子元素为文本或数组。

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"    //引用信息

var vm = new Vue({
        el:"#demo",
        data:obj,
        render(createElement){
            return createElement(
                "ul",
                {
                    class:{
                        bg:true
                    },
                    style:{
                        fontSize : ‘50px‘
                    },
                    attrs:{
                        abc:"abc"
                    },
                    domProps:{
                        innerHTML:"<li>我是html</li>"
                    }
                },
                [
                    createElement("li",1),
                    createElement("li",2),
                    createElement("li",3)
                ]
            );
        }
    });