Vue.js学习笔记-认识Vue

轩陌 2017-08-22 00:27:53

分类： Vue 4487 2

今天开始学习Vue.js，每天学习记录笔记

vue生成一条数据

vue中的渲染在{{ }}两个大括号中间，一个小示例：


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


var app1 = new Vue({
    el: '#app-1',
    data: {
        message: '{{vue的数据显示写在双大括号内}}'
    }
});

v-bind:attr, 给DOM绑定一个属性

   :冒号为简写
   :attr="xxx",添加一个值
   :attr="[xx, xx]",数组的形式添加多个
   :attr="{}",json的形式添加多个，key为标签属性的值，value为data数据里面的数据，值为true/false


<div id="app-2">
    <a href="" v-bind:title="message">v-bind:绑定指令</a>
    <a href="" :title="message">:冒号为简写</a>
    <p :class="className">:attr="xxx",添加一个值</p>
    <p :class="[colorRed, bgPink]">:attr="[xx, xx]",数组的方式添加多个值,相当于addClass</p>
    <p :class="{red: bRed}">:attr="{}",键值为标签的属性值，key值为data数据的值，true false</p>
</div>


var app2 = new Vue({
    el: '#app-2',
    data: {
        message: '我是悬浮信息',
        className: 'red',
        colorRed : 'color-red',
        bgPink: 'bg-pink',
        bRed: true
    }
});

v-bind:绑定指令
:冒号为简写

:attr="xxx",添加一个值

:attr="[xx, xx]",数组的方式添加多个值,相当于addClass

:attr="{}",键值为标签的属性值，key值为data数据的值，true false

v-if, 判断语句


<div id="app-3" v-bind:title="message" v-if="bool">v-if判断</div>


var app3 = new Vue({
    el: '#app-3',
    data: {
        message: '控制台直接输入app3.bool = false即可隐藏此元素',
        bool: true
    }
});

v-if判断

v-for, 循环语句，v-for="arr in arr"


<div id="app-4">
    <ul>
        <li v-bind:title="floatMes">{{message}}</li>
        <li v-for="arr in arr">
            {{arr.text}}
        </li>
    </ul>
</div>


var app4 = new Vue({
    el: '#app-4',
    data: {
        message: 'v-for="obj in object"',
        floatMes: '控制台输入app4.arr.push({text: "xuanmo"}),即可追加一条数据',
        arr: [
            {
                text: 'Apple'
            }, {
                text: 'orange'
            }, {
                text: 'Tomoto'
            }
        ]
    }
});

{{message}}
{{arr.text}}

v-on, 给DOM绑定一个事件


<div id="app-5">
    <p>{{message}}</p>
    <p>{{summary}}</p>
    <button @click="addMessage">追加消息</button>
</div>


var app5 = new Vue({
    el: '#app-5',
    data: {
        message: '我是一句话！',
        summary: '通过v-on:event="functionName",可以给元素绑定一个事件，简写：@eventName=""'
    },
    methods: {
        addMessage: function () {
            this.message = this.message + ' 我是追加的消息 '
        }
    }
});

v-model, 数据双向绑定


<div id="app-6">
    <p>{{message}}</p>
    <p>{{summary}}</p>
    <input type="text" v-model="message">
</div>


var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Vue的双向绑定数据',
        summary: '通过v-model实现数据的双向绑定'
    }
});

v-html, 相当于innerHTML


<div id="app-7" v-html="html"></div>


var app7 = new Vue({
    el: '#app-7',
    data: {
        html: '<span style="color: #f4363a;">我是v-html指令生成的一个标签</span>'
    }
});

使用v-model实现一个为div添加背景图片效果

Demo展示

Xuanmo Blog