vue.js官方文档阅读

作者: sunpy | 来源:发表于2020-06-14 20:47 被阅读0次

插值
--------1. 插入文本
--------2. 插入HTML
--------3. 插入属性
class和style绑定
--------1. 绑定class
--------2. 绑定style
条件和循环指令
--------1. 条件指令
--------2. 循环遍历数组
--------3. 循环遍历对象
事件处理
--------1. 基本事件处理
--------2. 内联参数处理
双向绑定
--------1. 基础用法
组件
--------1. props传入静态值
--------2. props传入动态值
计算属性（缓存）
自定义时间
插槽
--------1. 匿名插槽
--------2. 具名插槽（2.5.6版本和2.6.11版本）
--------3. 作用域插槽

官网和API

官网
 API

插值

1. 插入文本

<div id="app">
    {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World!'
        }
    });
</script>

执行一次性地插值，当数据改变时，插值处的内容不会更新：

<div v-once id="app">
    {{ message }}
</div>

使用javascript表达式：

<div id="app">
    {{message.concat("def！")}}
    {{message.toUpperCase()}}
</div>

2.插入html

<div id="app" v-html="messageHtml">
    
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            messageHtml:"<span style='color: red'>张三</span>"
        }
    });
</script>

3. 插入属性

<button id="app" v-bind:disabled="disabledValue">
    {{message}}
</button>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"abc",
            disabledValue:true
        }
    });
</script>

class和style绑定

vue里面绑定都使用v-bind来操作，绑定类名和样式也是如此。

1. 绑定class

① 对象绑定方式：

<button id="app" v-bind:class="{cn1:isCn1, cn2:isCn2}">
    {{message}}
</button>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"abc",
            isCn1:true,
            isCn2:true
        }
    });
</script>

<style type="text/css">
    .cn1 {
        color:red;
    }

    .cn2{
        width: 100px;
        height: 100px;
    }
</style>

② 数组绑定方式：

<button id="app" v-bind:class="[cn1Class, cn2Class]">
    {{message}}
</button>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"abc",
            cn1Class:"cn1",
            cn2Class:"cn2"
        }
    });
</script>

2. style绑定

内联对象绑定：

<button id="app" v-bind:style="{color:colorStyle, width:widthStyle, height:heightStyle}">
    {{message}}
</button>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"abc",
            colorStyle:"blue",
            widthStyle:"100px",
            heightStyle:"50px"
        }
    });
</script>

条件和循环指令

1. 条件指令

<div id="app">
    <button v-if="isShow">
        按钮1
    </button>

    <button v-else="isShow">
        按钮2
    </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"abc",
            isShow:false
        }
    });
</script>

2. 循环遍历数组：

<div id="app">
    <p v-for="(item, index) in items">
        {{item.value}}  --> {{index}}
    </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"abc",
            items:[
                {value:"Hello julia"},
                {value:"Hello jack"}
            ]
        }
    });
</script>

3. 循环遍历对象：

<div id="app">
    <p v-for-itemsObj>
        <p v-for="(item, name) in itemsObj">
            {{name}}  -->  {{item}}
        </p>
    </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"abc",
            itemsObj:{
                value1:"Hello julia",
                value2:"Hello jack"
            }
        }
    });
</script>

事件处理

1. 基本事件处理

<div id="app">
    <button v-on:click="greet">按钮1</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"abc"
        },
        methods:{
            greet:function(event){
                alert(this.message);
            }
        }
    });
</script>

2. 内联参数处理

<div id="app">
    <button v-on:click="greet('张三')">按钮1</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"abc"
        },
        methods:{
            greet:function(param){
                alert(param);
            }
        }
    });
</script>

双向绑定

1. 基础用法

<div id="app">
    <input v-model="message"/>
    <p>内容如下：{{message}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:""
        }
    });
</script>

组件

1. props传入静态值

<div id="app">
    <sunpy-component value="Hello Sunpy Component"></sunpy-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    Vue.component("sunpy-component", {
        props:["value"],
        template:"<p>{{value}}</p>"
    });

    var app = new Vue({
        el: '#app'
    });
</script>

2. props传入动态值

<div id="app">
    模板输出对象：
    <sunpy-component v-bind:spy="obj"></sunpy-component>
    模板输出对象属性：
    <sunpy-component v-bind:spy="message.name"></sunpy-component>
    模板输出数组：
    <sunpy-component v-bind:spy="arr"></sunpy-component>
    模板输出数组的值：
    <sunpy-component v-for="(item, index) in arr"
                     v-bind:spy="item"></sunpy-component>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    Vue.component("sunpy-component", {
        props:["spy"],
        template:"<p>{{spy}}</p>"
    });

    var app = new Vue({
        el: '#app',
        data: {
            message : {
                name : "李沁"
            },
            obj : {
                val1 : "值1",
                val2 : "值2"
            },
            arr : ["张三", "李四", "王五"]
        }
    });
</script>

计算属性

计算属性用于简单运算，最主要是可以作为vue的缓存。

<div id="app">
    <p>值为：{{toLower}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            name : "ABCDE"
        },
        computed: {
            toLower : function() {
                var value = this.name.toLowerCase();
                console.log(value);
                return value;
            }
        }
    });
</script>

自定义事件

<div id="app">
    <sunpy-c v-on:spyevent="alertAppInfo()"></sunpy-c>
</div>

<template id="sunpy-t">
    <div>
        <button v-on:click="spyevent">弹出</button>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<script>

    Vue.component("sunpy-c", {
        template:"#sunpy-t",
        methods : {
            spyevent : function() {
                this.$emit("spyevent");
            }
        }
    });

    var app = new Vue({
        el: '#app',
        data: {
            name : "ABCDE",
            age : 20
        },
        methods: {
            alertAppInfo : function() {
                alert("弹出信息 sunpy中的name : " + this.name);
            }
        }
    });
</script>

插槽slot

插槽类似于velocity中的嵌套宏，用占位符来动态表示输入数据。

1. 匿名插槽：默认name为default

<div id="app">
    <sunpy-t>我爱你</sunpy-t>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    Vue.component("sunpy-t", {
        template:"<p>张三表白说：<slot></slot></p>"
    });

    var app = new Vue({
        el: '#app',
        data: {
            name : "ABCDE"
        }
    });
</script>

2. 具名插槽（基于2.5.6版本）：

<div id="app">
    <sunpy-t>
        <p slot="header">页头</p>
        <p slot="footer">页尾</p>
    </sunpy-t>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    Vue.component("sunpy-t", {
        template:
            "<div>" +
            "<slot name='header'></slot>" +
                "<p>数据内容</p>"+
            "<slot name='footer'></slot>" +
            "</div>"
    });

    var app = new Vue({
        el: '#app',
        data: {
            name : "ABCDE"
        }
    });
</script>

3. 具名插槽（基于vue2.6.11版本）：

<div id="app">
    <sunpy-c>
        <template v-slot:header>
            <p>页头信息</p>
        </template>
        <template v-slot:footer>
            <p>页尾信息</p>
        </template>
    </sunpy-c>
</div>

<template id="sunpy-t">
    <div>
        <slot name='header'></slot>
        <p>数据内容</p>
        <slot name='footer'></slot>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>

    Vue.component("sunpy-c", {
        template:"#sunpy-t"
    });

    var app = new Vue({
        el: '#app',
        data: {
            name : "ABCDE"
        }
    });
</script>

4. 作用域插槽（基于2.6.11版本）：

<div id="app">
    <sunpy-c>
        <template v-slot:header="viewMsg">
            <p>页头信息 : {{viewMsg.headermsg}}</p>
        </template>
        <template v-slot:footer="viewMsg">
            <p>页尾信息 : {{viewMsg}}</p>
        </template>
    </sunpy-c>
</div>

<template id="sunpy-t">
    <div>
        <slot name='header' v-bind:headerMsg="headerMsg"></slot>
        <p>数据内容</p>
        <slot name='footer' v-bind:footerMsg="footerMsg"></slot>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<script>

    Vue.component("sunpy-c", {
        template:"#sunpy-t",
        data : function() {
            return {
                headerMsg : "爱你 --> 页头",
                footerMsg : "爱你 --> 页尾"
            };
        }
    });

    var app = new Vue({
        el: '#app',
        data: {
            name : "ABCDE"
        }
    });
</script>