Vue 基础

Vue

数据渲染

绑定石渲染数据

• 渲染数据

<div id="demo">
    {{ message }}
</div>

• 定义数据

var demo = new Vue({
    el: "#demo",
    data: {
        message: "数据渲染"
    }
});

列表渲染 v-for

• 渲染列表

<div class="container">
    <div class="col-md-4">
         <div id="demo">
            <ul class="list-group">
                  <li v-for="job in jobs" class="list-group-item">{{ job }}</li>
            </ul>
        </div>
    </div>
</div>

• 渲染列表 key

<div class="container">
    <div class="col-md-4">
         <div id="demo">
            <ul class="list-group">
                  <li v-for="(job, key) in jobs" class="list-group-item">{{ job }}</li>
            </ul>
        </div>
    </div>
</div>

• 定义数据

var demo = new Vue({
    el: "#demo",
    data: {
        jobs: [
            "9:00 编写开发文档",
            "10:00 技术部开会",
            "11:00 点外卖(美团打折)"
        ]
    }
});

条件渲染

• v-if

<div v-if="type === 'A'">
    A
</div>

• v-else

<div v-if="type === 'A'">
    A
</div>
<div v-else>
    Not A
</div>

• v-else-if

<div v-if="type === 'A'">
    A
</div>
<div v-else-if="type === 'B'">
    B
</div>
<div v-else-if="type === 'C'">
    C
</div>
<div v-else>
    Not A/B/C
</div>

• v-show

<button class="btn btn-primary" v-show="show">true</button>

v-if和v-show区别

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始

• 渲染条件块。

• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

表单输入绑定

• 你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。
• v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

文本输入绑定

文本输入框绑定值到字符串

<div id="demo">
    <input type="" v-model="inputText"  name=""/>
    <span>
        {{ inputText }}
    </span>
</div>

• 定义数据

var demo = new Vue({
    el: '#demo',
    data: {
        inputText: '初始化值'
    }
});

单个复选框

单个复选框绑定值到布尔型

• 数据绑定

<div id="demo">
    <input type="checkbox" v-model="isSelect"  name=""/>同意
    <span>
        {{ isSelect }}
    </span>
</div>

• 定义数据

var demo = new Vue({
    el: '#demo',
    data: {
        isSelect: true
    }
});

多个复选框

多个复选框绑定值到数组

• 数据绑定

<div id="demo">
    <p><input type="checkbox" value="条款1" v-model="dataArray"  name=""/>条款1</p>
    <p><input type="checkbox" value="条款2" v-model="dataArray"  name=""/>条款2</p>
    <p><input type="checkbox" value="条款3" v-model="dataArray"  name=""/>条款3</p>
    <p><input type="checkbox" value="条款4" v-model="dataArray"  name=""/>条款4</p>
    <span>
        {{ dataArray }}
    </span>
</div>

• 定义数据

var demo = new Vue({
    el: '#demo',
    data: {
        dataArray: []
    }
});

单选按钮

单选按钮绑定值到字符串

<div id="demo">
    <p><input type="radio" value="男" v-model="dataRadio"  name=""/>男</p>
    <p><input type="radio" value="女" v-model="dataRadio"  name=""/>女</p>
    <p><input type="radio" value="保密" v-model="dataRadio"  name=""/>保密</p>
    <span>
        {{ dataRadio }}
    </span>
</div>

var demo = new Vue({
    el: '#demo',
    data: {
        dataRadio: '男'
    }
});

选择框(单选)

单选选择框绑定值到字符串

• 数据绑定

<div id="demo">
   <select v-model="dataSelect">
       <option value="0">请选择数字</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
   </select>
    <span>
        {{ dataSelect }}
    </span>
</div>

• 定义数据

var demo = new Vue({
    el: '#demo',
    data: {
        dataSelect: '3'
    }
});

选择框(多选)

多选选择框绑定值到数组

<div id="demo">
   <select v-model="dataSelectArray" multiple="multiple">
       <option value="0">请选择数字</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
   </select>
    <span>
        {{ dataSelectArray }}
    </span>
</div>

var demo = new Vue({
    var demo = new Vue({
    el: '#demo',
    data: {
        dataSelectArray: [3]
    }
});

修改数据

内部修改数据(函数)

外部修改数据(js代码)

事件

函数

在 methods 对象中定义函数

• demoClick 函数名
• 函数可传递形参
• 函数可以有返回值
• 多个函数用 , 隔开

var demo = new Vue({
    el: '#demo',
    data: {
        sex: '女'
    },
    methods: {
        demoClick: function () {
            console.log(this.sex);
        }
    }
});

监听事件

HTML 支持的事件列表

通过 v-on:事件名 来监听事件

<div id="demo">
    <button v-on:click="demoClick">按钮</button>
</div>

绑定函数到事件

通过 v-on:事件名="函数名" 同过监听事件调用函数

<div id="demo">
    <button v-on:click="demoClick">按钮</button>
</div>

• 函数调用可以传递参数(如果需要参数)

<div id="demo">
    <button v-on:click="demoClick(1)">按钮</button>
</div>

注: 可以传递多个参数, 具体个数一函数定义时形参个数为准

组件

定义组件

Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});

• 定义组建时, data必须是匿名函数

使用组件

<div id="demo">
    <button-counter></button-counter>
</div>

new Vue({
    el: '#demo'
});