02 vue数据绑定与指令

系列文章导航

1 模板语法

在标记内通过模板语法：{{}}进行数据的绑定。

{{}}内支持变量，方法名，计算属性，表达式，不支持语句。

{{}}将数据解析为纯文本，如果需要解析为html，需要在标记上增加v-html指令。

2 属性绑定

在标记上，为标记属性绑定Vue数据时，不允许用模板语法，如下方式是不合法的。

<!-- 错误写法 -->

<a href="{{url}}">百度</a>

属性绑定需要使用vue指令v-bind实现

v-bind:属性名="data属性"
:属性名=“data属性”
<!-- 完整写法 -->
<a v-bind:href="baidu">百度1</a>
<!-- 简化写法 -->
<a :href="baidu">百度1</a>

3 指令

3.1 v-bind 用于标签的属性绑定

v-bind:属性名="data属性"

:属性名=“data属性”

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
         <!-- 完整写法 -->
         <a v-bind:href="baidu">百度1</a>
         <!-- 缩写写法 -->
         <a :href="baidu">百度1</a>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                // 挂载元素 - 作用范围
                el: '#app',
                // vue数据
                data: {
                    baidu:'http://www.baidu.com'
                },

            });
        </script>

    </body>
</html>

3.2 v-model 用于表单控件双向绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div>
                文本框
                <div><input v-model="baidu" type="text" /></div>
                <div>控件值：{{baidu}}</div>
            </div>
            <div>
                单选框
                <div>男：<input type="radio" value="男" v-model="sex"></div>
                <div>女：<input type="radio" value="女" v-model="sex"></div>
                <div>控件值：{{sex}}</div>
            </div>
            <div>
                复选框
                <div>篮球：<input type="checkbox" value="篮球" v-model="loves"></div>
                <div>足球：<input type="checkbox" value="足球" v-model="loves"></div>
                <div>羽毛球：<input type="checkbox" value="羽毛球" v-model="loves"></div>
                <div>控件值：{{loves}}</div>
            </div>
            <div>
                单选下拉框
                <div>
                    <select v-model="love">
                        <option value="">请选择</option>
                        <option>篮球</option>
                        <option>足球</option>
                        <option>羽毛球</option>
                    </select>
                </div>
                <div>控件值：{{love}}</div>
            </div>
            <div>
                多选下拉框
                <div>
                    <select v-model="loves" multiple="multiple">
                        <option value="">请选择</option>
                        <option>篮球</option>
                        <option>足球</option>
                        <option>羽毛球</option>
                    </select>
                </div>
                <div>控件值：{{loves}}</div>
            </div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                // 挂载元素 - 作用范围
                el: '#app',
                // vue数据
                data: {
                    baidu: 'http://www.baidu.com',
                    sex:'男',
                    loves: [],
                    love:''
                }
            });
        </script>
    </body>
</html>

3.3 v-model 的指令修饰符

.lazy : 当光标离开控件时，才出发变量的数据变更。

<input v-model.lazy="baidu" type="text" />

.number : 限定文本框只能输入数值。

<input v-model.number="baidu" type="text" />

.trim : 自动去除内容两头的空格符号。

<input v-model.trim="baidu" type="text" />

3.4 v-text,v-html

v-text更新元素的textContent。

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-html 更新元素的innerHtml，会解析HTML代码

<div v-html="html">{{包含html内的变量}}</div>

3.5 v-show,v-if,v-else,v-else-if

v-show 根据表达式的布尔值，切换内容块的display属性值，隐藏或显示

<h1 v-show="true">Hello1</h1>
<h1 v-show="false">Hello2</h1>

v-if 根据表达式的布尔值，渲染或不渲染内容快，添加或移除

<h1 v-if="true">Hello-1</h1>
<h1 v-if="false">Hello-2</h1>

v-else 前一个兄弟元素必须有v-if或者v-else-if，当不成立的时候渲染

<div v-if="Math.random() > 0.5">
  大于0.5
</div>
<div v-else>
  小于或等于0.5
</div>

v-else-if 多重if判断，前一兄弟元素必须有 v-if 或 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>

3.6 v-for 迭代数组

    <body>
        <div id="app">
            <!-- 实例1 -->
            <ul id="example-1">
                <li v-for="item in items">
                    {{ item.message }}
                </li>
            </ul>
            <!-- 实例2 -->
            <ul id="example-2">
                <li v-for="(item, index) in items">
                    {{ index }} - {{ item.message }}
                </li>
            </ul>
            <!-- 实例3 -->
            <ul id="example-3">
                <li v-for="(item, index) in items2">
                    {{ index }} - {{ item }}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                // 挂载元素 - 作用范围
                el: '#app',
                // vue数据
                data: {
                    items: [
                        { message: 'Foo' },
                        { message: 'Bar' }
                    ],
                    items2:['a','b','c']
                }
            });
        </script>
    </body>

输出结果：

3.7 v-for 迭代对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <!-- 单值循环 -->
            <ul id="v-for-object1" class="demo">
                <li v-for="value in objName">
                    {{value}}
                </li>
            </ul>
            <!-- 键值对循环 -->
            <ul id="v-for-object2" class="demo">
                <template v-for="(v,k) in objName">
                    <!-- 两层属性不循环 -->
                    <li v-if="k != 'parents'">
                        {{ v + ' - ' + k }}
                    </li>
                    <!-- 两层属性单独循环 -->
                    <li v-else>
                        遍历内层对象
                        <ul>
                            <li v-for="(v,k) in v">
                                {{ v + ' - ' + k }}
                            </li>
                        </ul>
                    </li>
                </template>
            </ul>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                // 挂载元素 - 作用范围
                el: '#app',
                // vue数据
                data: {
                    objName: {
                        title: 'How to do lists in Vue',
                        author: 'Jane Doe',
                        publishedAt: '2016-04-10',
                        method1: function() {
                            return "123";
                        },
                        parents:{
                            a:'123',
                            b:'456'
                        }
                    }
                }
            });
        </script>
    </body>
</html>

输出结果：

3.8 v-for 迭代模板

templete标签在实际渲染的时候元素是不显示在网页上的，如果v-for过程中要迭代生成多个标签内容，可以把v-for语法加载template上。

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

3.9 v-on 绑定事件

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

事件绑定用的：v-on:事件名="触发的方法名"

<!-- 方法事件处理器 -->
<button v-on:click="doThis"></button>

<!-- 内联事件处理器，需要传递参数时用 -->
<button v-on:click="doThat('hello', $event)"></button>

简写代码：@事件名="触发的方法名"

<!-- 方法处理器 -->
<button @click="doThis"></button>

代码实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="点击我1" v-on:click="handleClick1" />
            <input type="button" value="点击我1 - 简写" @click="handleClick1" />
            <input type="button" value="点击我2" v-on:click="handleClick2($event,'123')" />
            <input type="button" value="点击我2 - 简写" @click="handleClick2($event,'123')" />
        </div>
        <script type="text/javascript">
            var app = new Vue({
                // 挂载元素 - 作用范围
                el: '#app',
                // vue数据
                data: {},
                methods: {
                    handleClick1: function(e) {
                        console.info(e);
                    },
                    handleClick2: function(e, arg) {
                        console.info(e);
                        console.info(arg);
                    }
                }
            });
        </script>
    </body>
</html>

输出结果：

在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器handleThis)：

<my-component @my-event="handleThis"></my-component>

3.9 v-on 修饰符

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

3.9 v-once 单次渲染

只渲染元素和组件一次。随后的变量值变更不会重新渲染。

<input type="text" v-model="title" />
<div v-once>
    {{title}}
</div>

3.10 v-bind绑定class

通过数据项的布尔值决定是否引用某个class属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .active {
                color: blue;
                font-weight: 900;
            }
            .textError {
                color: red;
                font-weight: 900;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 样式名：布尔数据 ，当数据值为true时绑定该样式 -->
            <div class="myClass" :class="{active:isActive,textError:isError}">普通方式</div>
            <!-- 对象形式 - 对象属性名是要绑定的样式，属性值为true时绑定 -->
            <div :class="classObj">对象形式</div>
            <!-- 数组形式 - 数组元素是数据，数据值代表要绑定的样式  -->
            <div  :class="[activeClass,errorClass]">数组形式</div>
            <!-- 数据形式 - 含表达式 -->
            <div :class="[isActive?activeClass:'',errorClass]">三元数组</div>
            <div :class="[{active:isActive},errorClass]">普通方式和数组形式混合</div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                // 挂载元素 - 作用范围
                el: '#app',
                // vue数据
                data: {
                    isActive: false,
                    isError: true,
                    classObj:{
                        active:true,
                        textError:false
                    },
                    activeClass:'active',
                    errorClass:'textError'
                }
            });
        </script>
    </body>
</html>

运行结果：

3.10 v-bind绑定style

当样式中包含中划线时，必须用单引号引起来。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <!-- 对象属性是样式名，属性值是样式值，和style的原始值合并  -->
            <div style="font-family: '新宋体'" :style="{color:activeColor,fontSize:fontSize,'margin-top':marginTop}">对象形式</div>
            <!-- 样式对象属性是样式名，属性值是样式值  -->
            <div :style="styleObj1">样式对象方式</div>
            <!-- 数组方式，数组元素是多个样式对象 -->
            <div :style="[styleObj1,styleObj2]">数组方式</div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                // 挂载元素 - 作用范围
                el: '#app',
                // vue数据
                data: {
                    activeColor: 'blue',
                    fontSize: '30px',
                    marginTop:'30px',
                    styleObj1:{
                        color:'red',
                        fontSize:'30px'
                    },
                    styleObj2:{
                        border:'1px solid green'
                    }
                }
            });
        </script>
    </body>
</html>

输出：

posted @ 2020-02-01 15:19 草莓爸阅读(585) 评论(0) 收藏举报

刷新页面返回顶部

.NET 技术交流

02 vue数据绑定与指令

系列文章导航

1 模板语法

2 属性绑定

3 指令

3.1 v-bind 用于标签的属性绑定

3.2 v-model 用于表单控件双向绑定

3.3 v-model 的指令修饰符

3.4 v-text,v-html

3.5 v-show,v-if,v-else,v-else-if

3.6 v-for 迭代数组

3.7 v-for 迭代对象

3.8 v-for 迭代模板

3.9 v-on 绑定事件

3.9 v-on 修饰符

3.9 v-once 单次渲染

3.10 v-bind绑定class

3.10 v-bind绑定style