https://www.xuanmo.xin/1872.html

Vue.js学习笔记-认识Vue

发布于 分类: Vue 2 195


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

vue生成一条数据

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


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

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

 

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 + ' 我是追加的消息 '
        }
    }
});

{{message}}

{{summary}}

 

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实现数据的双向绑定'
    }
});

{{message}}

{{summary}}

 

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

前端爱好者,热爱前端开发,欢迎和我成为朋友。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

https://www.xuanmo.xin/wp-content/themes/xuan/expression.php
表情
贴图
表情加载中...

换一张

  • Friend A

    哈哈,不错的,虽然现在看不懂,但来给你加油了,好好学撒

    • Xuanmo

      换名字了啊,加油加油

已经没有了!