vue专栏

Vue快速入门(二：数据绑定)《快乐Vue》

2019-02-23  本文已影响123人  Negen

数据绑定

数据绑定语法

主要介绍 Vue.js 的数据绑定语法.
使用的是双大括号标签 {{}}，为“Mustache”语法（源自前端模板引擎 Mustache.js）
有文本插值、HTML属性、绑定表达式、过滤器

直接看例子：

<!DOCTYPE html>
<html>
<head>
    <title>数据绑定语法</title>
    <meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app" style="text-align: center;">
    <!-- 文本插值 -->
    <h2>{{msg1}}</h2>
    <!-- HTML属性 -->
    <div :id="'id' + msg2"></div>

    <!-- 绑定表达式开始 -->
    <h2>{{index + 10}}</h2>
    <h2>{{index == 1?true:false}}</h2>
    <!-- 绑定表达式结束 -->

    <!-- 过滤器开始
        vue选项中添加filters选项并定义uppercase
        Vue.js 允许在表达式后添加可选的过滤器，以管道符“|”指示。
     -->
     <h2>{{name | uppercase}}</h2>

    <!-- 过滤器结束 -->


</div>

<script type="text/javascript">
new Vue({
    el: "#app",
    data: {
        msg1: "文本插值",
        msg2: "9527",
        index: 1,
        name: "Vue",
        ok: true
    },
    filters: {
        uppercase: function(str){
            return str.toUpperCase();
        }
    }
});

</script>
</body>
</html>

计算属性

Vue.js 还提供了计算属性这种方法，避免在模板中加入过重的业务逻辑，保证模板的结构清晰和可维护性
示例：

<!DOCTYPE html>
<html>
<head>
    <title>数据绑定语法</title>
    <meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app" style="text-align: center;">
    <h2>{{'fullName is ' + fullName}}</h2>

</div>

<script type="text/javascript">
new Vue({
    el: "#app",
    data: {
        firstName: "David",
        lastName: "li"
    },
    computed: {
        fullName: function(){
            return this.firstName + ' ' + this.lastName;
        }
    }
});

</script>
</body>
</html>

运行效果:

计算属性运行效果.png
此时，对 vm.firstName 或vm.lastName进行修改，会同时修改 fullName 的值。
如果上面这个例子没有体现出计算属性的优势，那计算属性的Setter方法则在更新属性时给我们带来了便利。
示例： 
<!DOCTYPE html>
<html>
<head>
    <title>数据绑定语法</title>
    <meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app" style="text-align: center;">
    <h2>{{'price is ' + price}}</h2>

</div>

<script type="text/javascript">
var vm = new Vue({
    el: "#app",
    data: {
        cents: 100
    },
    computed: {
        price: {
            set: function(value) {
                this.cents = value * 100;
            },
            get: function() {
                return (this.cents / 100).toFixed(2)
            }
        }
    }
});

</script>
</body>
</html>

在处理商品价格的时候，后端往往会把价钱定义成以分为单位的整型，避免在处理浮点类型数据时产生的问题。而前端则需要把价钱再转成元进行展示，而且如果需要对价钱进行修改的话，则又要把输入的价格再恢复到分传给后端，很是繁琐。而在使用 Vue.js 的计算属性后，我们可以将 vm.cents 设置为后端所存的数据，计算属
性 price 为前端展示和更新的数据。
此时更改 vm.price = 2，vm.cents 会被更新为 200，在传递给后端时无需再手动转化一遍数据。

调试结果.png

表单控件

Vue.js 中提供 v-model 的指令对表单元素进行双向数据绑定，在修改表单元素值的同时，实例 vm 中对应的属性值也同时更新，反之亦然。本小节会介绍主要 input 元素绑定v-model 后的具体用法和处理方式。
示例：

<!DOCTYPE html>
<html>
<head>
    <title>表单控件</title>
    <meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<body>
<div id="app">
    <!-- 输入框示例，用户输入的内容和 vm.message 直接绑定 -->
    输入框示例（Text）：<br/>
    <input type="text" name="" v-model="message"><br/>
    <span>您输入了：{{message}}</span>
    <hr>

    <!-- 单选框示例 -->
    单选框示例（Radio）：<br/>
    <label><input type="radio" name="sex" value="male" v-model="gender">男</label>
    <label><input type="radio" name="sex" value="female" v-model="gender">女</label><br>
    当前选中的性别为：{{ gender }}
    <hr>

    <!-- Checkbox 分两种情况：单个勾选框和多个勾选框。
        单个勾选框，v-model 即为布尔值，此时 input 的 value 并不影响 v-model 的值 -->
    单个勾选框（CheckBox）：<br>
    <input type="checkbox" name="" v-model="checked"><br>
    <span>checked: {{ checked }}</span><br>

    多个勾选框（CheckBox）：<br>
    <label><input type="checkbox" value="篮球" name="" v-model="multiChecked">篮球</label><br>
    <label><input type="checkbox" value="足球" name="" v-model="multiChecked">足球</label><br>
    <label><input type="checkbox" value="网球" name="" v-model="multiChecked">网球</label><br>
    <span>multiChecked: {{ multiChecked.join('、') }}</span>
    <hr>

    <!-- 下拉框
         同 Checkbox 元素一样，Select 分单选和多选两种，多选的时候也需要绑定到一个数组。 -->
    单选（Selected）：<br>
    <select v-model="selected">
        <option selected="selected">A</option>
        <option>B</option>
        <option>C</option>
    </select><br>
    selected: {{ selected }}
    多选（Selected）按住ctrl多选：<br>
    <select v-model="multiSelected" multiple="multiple">
        <option selected="selected">A</option>
        <option>B</option>
        <option>C</option>
    </select>
    multiSelected: {{ multiSelected.join('、') }}
    <hr>

    <!-- 绑定value
         表单控件的值同样可以绑定在 Vue 实例的动态属性上，用 v-bind 实现。 -->
    CheckBox：<br>
    <input type="checkbox" v-model="valuechecked" v-bind:true-value="true" v-bind:false-value="false" checked><br>
    当前value：{{ valuechecked }} <br>
    Radio： <br>
    <input type="radio" v-model="radiochecked" v-bind:value="true"><br>
    当前value：{{ radiochecked }} <br>
</div>

<script type="text/javascript">
//定义数据
var data = {
    message : '',
    gender : '',
    checked : '',
    valuechecked : 'true',
    radiochecked : '',
    multiChecked : [],
    selected : '',
    multiSelected : []
}
var vm = new Vue({
    el: "#app",
    data: data
});

</script>
</body>
</html>

运行效果如下图：

表单控件示例运行效果.png

class绑定style

在开发过程中，我们经常会遇到动态添加类名或直接修改内联样式（例如 tab 切换）。class 和 style 都是 DOM 元素的 attribute，我们当然可以直接使用 v-bind 对这两个属性进行数据绑定。
但这样未免过于繁琐而且容易出错，所以 Vue.js 为这两个属性单独做了增强处理，表达式的结果类型除了字符串之外，还可以是对象和数组。
示例：

<!DOCTYPE html>
<html>
<head>
    <title>Class与Style绑定</title>
    <meta charset="utf-8">
<style type="text/css">
    .classA{
        width: 500px;
        height: 600px;
        border: solid 5px;
    }
    .classB{
        background-color: pink;
    }
</style>
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<body>
<div id="app">
    <!--对象语法：v-bind:class 接受参数是一个对象，而且可以与普通的 class 属性共存。-->
    <div class="tab" v-bind:class="{'active': active, 'unactive':!active}"></div>
    <!-- 渲染结果为： <div class="tab active"></div>
        数组语法：v-bind:class 也接受数组作为参数-->
    <div v-bind:class="[classA, classB]"></div>
    <!-- 渲染结果为： <div class="classA classB"></div>   -->

    <!--2．内联样式绑定
           style 属性绑定的数据即为内联样式，同样具有对象和数组两种形式：
           对象语法：直接绑定符合样式格式的对象。-->
    <div v-bind:style="inlineStyle"><h2>内联 对象语法</h2></div>
    <!-- 除了直接绑定对象外，也可以绑定单个属性或直接使用字符串 -->
    <div :style="{ width: '200px',backgroundColor:inlineStyle.backgroundColor,height:inlineStyle.height }">
        <h2>绑定单个属性或直接使用字符串</h2>
    </div>

    <div :style="[styleA, styleB]">
        <h2>数组语法：v-bind:style 允许将多个样式对象绑定到统一元素上</h2>
    </div>

</div>

<script type="text/javascript">
//定义数据
var data = {
    active: true,
    classA: 'classA',
    classB: 'classB',
    inlineStyle: {
        width: '100px',
        height: '100px',
        backgroundColor: 'red'    //划重点，js中的css属性名采用驼峰命名
    },
    styleA:{
        width:'300px',
        border: 'solid 3px'
    },
    styleB:{
        height: '150px',
        backgroundColor: 'yellow'
    }
}
var vm = new Vue({
    el: "#app",
    data: data
});

</script>
</body>
</html>

运行效果如下：

Class与Style绑定.png
上一篇 下一篇

猜你喜欢

热点阅读