Vue模板语法-阿里云开发者社区

3. Vue 模板语法

差值表达式

指令

事件绑定

属性绑定

样式绑定

分支循环结构

3.1 指令

1.什么是指令?

指令的本质就是自定义属性

指令的格式:以v-开始（例如：v-clock）

2. v-cloak指令用法

差值表达式存在的问题：“闪动“-连续刷新页面会出现先弹出{{msg}之后在替换成值的情况。

如何解决该问题：使用v-cloak指令

原理：先隐藏，替换好值之后在显示最终的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02 v-cloak</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        /* 
        v-cloak指令的用法
            1. 提供样式：
             [v-cloak] {
             display: none;
             }
            2. 在差值表达式所在的标签中添加v-cloak指令
        */
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        });
    </script>
</body>
</html>

3. 数据绑定指令

v-text 填充纯文本

相比插值表达式更加简洁

v-html 填充HTML片段

存在安全问题

本网站内部数据可以使用，来自第三方的数据不可使用

v-pre 填充原始信息

显示原始信息，跳过编译过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02 v-cloak</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
        <div v-text=msg></div>
        <div v-html=msg1></div>
        <div v-pre>{{跳过编译过程输出内容}}</div>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                msg1:'<h1>HTML</h1>'
            }
        });
    </script>
</body>
</html>

4.数据响应式

如何理解响应式

html5中的响应式（屏幕尺寸的变化导致样式的变化）

数据的响应式（数据的变化导致页面内容的变化）

什么是数据绑定

数据绑定：将数据团填充到标签中

v-once 只编译一次

显示内容之后不再具有响应式功能

<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
        <div v-once>{{msg1}}</div>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        /* 
           v-once的应用场景：如果显示的信息后续不需要修改，可以使用v-once，提高性能
        */
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                msg1:'nihao'
            }
        });
    </script>
</body>

3.2 双向数据绑定

v-model指令用法：在表单控件或者组件上创建双向绑定

示例代码如下：

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>
            <input type="text" v-model="msg">
        </div>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        });
    </script>
</body>

MVVM设计思想

M（model）

V （View）

VM（View-Model）

3.3 事件绑定

Vue如何处理事件与实践函数的调用方式：

v-on指令用法简写模式：@

<input type='button' v-on:click='num++'>
//如下为简写样式，把v-on改成了@
<input type='button' @click='num++'>

事件函数的调用方式

直接绑定函数名称

<button v-on:click='say'>Hello</button>

事件绑定调用函数

<button v-on:click='say()'>Hello</button>

v-on 指令与实践函数的调用方式示例代码如下：

<body>
    <div id="app">
        <div>{{num}}</div>
        <button v-on:click='num++'>点击1</button>
        <button @click='num++'>点击2</button>
        <button @click='handle'>点击3</button>
        <button @click='handle()'>点击4</button>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        // 事件绑定
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods:{
                handle:function(){
                    // this是Vue的实例对象
                    this.num++;
                }
            }
        });
    </script>
</body>

事件函数参数传递

普通参数和事件参数

示例代码如下：

<body>
    <div id="app">
        <div>{{num}}</div>
        <!-- 方式一：直接绑定函数名称 -->
        <button @click='handle1'>点击1</button>
        <!-- 方式二：事件绑定调用函数 -->
        <button @click='handle2(123,456,$event)'>点击2</button>
        <!-- $event为事件对象是固定的 -->
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        /* 事件绑定 - 参数传递
        1.如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
        2.如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递
        */
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                /* 按钮2 */
                handle2: function (event) {
                    console.log(p1, p2);
                    console.log(event.target.innerHTML)
                    this.num++; // this是Vue的实例对象
                },
                /* 按钮1 */
                handle1: function (event) {
                    console.log(event.target.innerHTML)
                    this.num++; // this是Vue的实例对象
                }
            }
        });
    </script>
</body>

事件修饰符

.stop 阻止冒泡

.prevent 阻止默认事件

示例代码如下：

<body>
    <div id="app">
        <div>{{num}}</div>
        <!-- 事件绑定调用函数 -->
        <div @click='handle1($event)'>
            <!-- .stop 阻止冒泡 -->
            <button @click.stop='handle2($event)'>点击</button>
        </div>
        <div>
            <!-- .prevent阻止默认事件 -->
            <a @click.prevent='handle3($event)' href="www.baidu.com">百度</a>
        </div>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function (event) {
                    this.num++; // this是Vue的实例对象
                },
                /* 按钮 */
                handle2: function (event) {},
                handle3: function (event) {}
            }
        });
    </script>
</body>

按键修饰符

.enter 回车键

.delete 删除键

示例代码如下：

<body>
    <div id="app">
        <form action="">
            用户名：<input type="text" v-model='uname' v-on:keyup.delete='clearContent'><br>
            密码：<input type="text" v-model='pwd' v-on:keyup.delete='clearContent'><br>
            <!-- v-on:.click.keyup.enter='handleSubmit'的意思是点击按钮或者敲击回车键都可提交 -->
            <input type="button" value="提交" v-on:.click.keyup.enter='handleSubmit'>
        </form>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                uname: '',
                pwd: ''
            },
            methods: {
                clearContent: function () {
                    this.uname = '',
                        this.pwd = '';
                },
                handleSubmit: function () {
                    console.log(this.uname, this.pwd)
                },
            }
        });
    </script>
</body>

自定义按键修饰符

全局 config.keyCodes对象

示例代码如下：

<body>
    <div id="app">
        <form action="">
            用户名：<input type="text" v-model='info' v-on:keyup.a='handle1'><br>
        </form>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        /* 
            事件绑定 - 自定义按键修饰符
            规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应的event.keyCode值
        */
        Vue.config.keyCodes.a = 65
        var vm = new Vue({
            el: '#app',
            data: {
                info: ''
            },
            methods: {
                handle1: function (event) {
                    console.log(event.keyCode)
                }
            }
        });
    </script>
</body>

3.4 属性绑定

1. Vue如何动态处理属性？

v-bind指令用法

<body>
    <div id="app">
        <!-- 标准写法如下：v-bind:-->
        <!-- <a v-bind:href="url" id="a">{{msg1}}</a> -->
        <!-- 简写方法如下：':'-->
        <a :href="url" id="a">{{msg1}}</a>
        <button v-on:click='handle'>切换</button>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        /* 属性绑定 */
        var a = document.getElementById("a")
        var vm = new Vue({
            el: '#app',
            data: {
                url: 'http://www.baidu.com',
                msg1: '百度',
            },
            methods: {
                handle: function () {
                    this.url = 'http://www.change.tm';
                    this.msg1 = '启嘉网'
                }
            }
        })
    </script>
</body>

2. v-model的底层实现原理分析

<body>
  <div id="app">
      <div>{{msg}}</div>
      <input type="text" v-bind:value='msg' v-on:input='handle'>
      <!-- 这一句就省略了下面的handle方法 -->
      <input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'>
      <!-- v-model 方法最简便 -->
      <input type="text" v-model='msg'>
  </div>
  <script src="js/vue.min.js"></script>
  <script>
      /* v-model的本质 */
      var vm = new Vue({
          el: '#app',
          data: {
              msg: 'hello'
          },
          methods: {
              handle: function (event) {
                  // 使用输入域中的最新的数据覆盖原来的数据
                  this.msg = event.target.value
              }
          }
      })
  </script>
</body>

3.5 样式绑定

1. class样式处理

对象语法

<div v-bind:class="{active:isActive}"></div>

示例代码如下：

<style>
        .active {
            border: 2px black solid;
            width: 100px;
            height: 100px;
        }
        .error {
            background-color: darkmagenta;
        }
</style>
<body>
    <div id="app">
        <div v-bind:class="{active:isActive,error:isError}">测试内容</div>
        <button v-on:click='handle'>切换</button>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        /* 样式绑定 */
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true,
                isError: true
            },
            methods: {
                handle: function (event) {
                    // 控制isActive的值在true和false之间进行切换
                    this.isActive = !this.isActive;
                    this.isError = !this.isError;
                }
            }
        })
    </script>
</body>

数组语法

<div  v-bind:class="[activeClass,errorClass]"></div>

数组语法修改样式示例代码如下：

  <style>
        .active {
            border: 2px black solid;
            width: 100px;
            height: 100px;
        }
        .error {
            background-color: darkmagenta;
        }
    </style>
<body>
    <div id="app">
        <div v-bind:class="[activeClass,errorClass]">测试内容</div>
        <button v-on:click='handle'>切换</button>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        /* 样式绑定 */
        var vm = new Vue({
            el: '#app',
            data: {
                activeClass: 'active',
                errorClass: 'error'
            },
            methods: {
                handle: function (event) {
                    //直接置空修改样式
                    this.errorClass = '';
                }
            }
        })
    </script>
</body>

样式绑定 - 细节处理：

（1）对象绑定和数字绑定可以结合使用

（2）class绑定的值可以简化操作

（3）默认的class如何处理？答案是：默认的class会保留

上述三点的测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>16 样式绑定-细节处理</title>
    <style>
        .active {
            border: 2px black solid;
            width: 100px;
            height: 100px;
        }
        .error {
            background-color: darkmagenta;
        }
        .test {
            color: darkorange;
        }
        .base{
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 细节一：对象绑定和数组绑定可以结合使用 -->
        <div v-bind:class="[activeClass,errorClass,{test:isTest}]">测试内容</div>
        <!-- 细节二：class绑定的值的简化操作--数组和对象都可简化 -->
        <div v-bind:class="arrClasses"></div>
        <div v-bind:class="objClasses">对象样式简化操作</div>
       <!-- 细节三：默认的class如何处理？答案是：默认的class会保留 -->
        <div class="base" v-bind:class="objClasses">默认的class</div>
        <button v-on:click='handle'>切换</button>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        /* 样式绑定 */
        var vm = new Vue({
            el: '#app',
            data: {
                activeClass: 'active',
                errorClass: 'error',
                isTest: true,
                arrClasses: ['active', 'error'],
                objClasses: {
                    active: true,
                    test: true
                }
            },
            methods: {
                handle: function (event) {
                    this.errorClass = '';
                }
            }
        })
    </script>
</body>
</html>

2. style（内联）样式处理

对象语法

<div v-bind:style="{color:activecolor,fontsize:fontsize}"></div>

数组语法

<div v-bind:style="[basestyle,overridingStyles]"></div>

style（内联）样式处理的对象语法和数组语法如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>16 样式绑定-细节处理</title>
</head>
<body>
    <div id="app">
        <!-- 对象语法 -->
        <div v-bind:style='{border:borderStyle,width:widthStyle,height:heightStyle}'></div>
        <div v-bind:style='objStyle'></div>
        <!-- 数组语法： -->
        <div v-bind:style='[objStyle,overridingStyles]'></div>
        <button v-on:click='handle'>切换</button>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        /* 样式绑定 */
        var vm = new Vue({
            el: '#app',
            data: {
                borderStyle: '2px solid black',
                widthStyle: '100px',
                heightStyle: '100px',
                objStyle: {
                    border: '5px solid green',
                    width: '200px',
                    height: '200px'
                },
                overridingStyles: {
                    /* overridingStyles会覆盖之前原有的样式 */
                    border: '3px solid red',
                    backgroundColor: 'pink'
                }
            },
            methods: {
                handle: function (event) {
                    this.widthStyle = '200px';
                    this.objStyle.width = '100px'
                }
            }
        })
    </script>
</body>
</html>

3.6 分支循环结构

1. 分支结构

v-if

v-else

v-else-if

v-show

2. v-if与v-show的区别

v-if控制元素是否渲染到页面

v-show控制元素是否显示（已经渲染到了页面）

示例代码如下：

<body>
    <div id="app">
        <div v-if='score>=90'>优秀</div>
        <div v-else-if='score<90&&score>=80'>良好</div>
        <div v-else-if='score<80&&score>=60'>及格</div>
        <div v-else>差</div>
        <div v-show='flag'>测试v-show</div>
        <button v-on:click='handle'>点击切换</button>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        /* 
            分支结构
            v-show的原理：控制元素样式是否显示 display：none
        */
        var vm = new Vue({
            el: '#app',
            data: {
                score:20,
                flag:false
            },
            methods: {
                handle:function(){
                    this.flag=!this.flag
                }
            }
        });
    </script>
</body>

3. 循环结构

v-for遍历数组

key的作用：帮助Vue区分不同的元素，从而提高性能

<body>
    <div id="app">
        <div>水果列表</div>
        <ul>
            <li v-for='item in fruits'>{{item}}</li>
            <!-- 可以加上索引 -->
            <li v-for='(item,index) in fruits'>{{item + '---' + index}}</li>
            <!-- key 的作用：帮助Vue区分不同的元素，从而提高性能 -->
            <li :key='item.id' v-for='item in myFruits'>
                <span>{{item.ename}}</span>
                <span>------</span>
                <span>{{item.cname}}</span>
            </li>
        </ul>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        /* 循环结构 */
        var vm = new Vue({
            el: '#app',
            data: {
                fruits: ['apple', 'banana', 'orange'],
                myFruits: [{
                    id: 1,
                    ename: 'apple',
                    cname: '苹果'
                }, {
                    id: 2,
                    ename: 'banana',
                    cname: '香蕉'
                }, {
                    id: 3,
                    ename: 'orange',
                    cname: '橘子'
                }]
            },
        });
    </script>
</body>

4. v-if和v-for结合使用

v-for遍历对象

<div v-for='(value,key,index) in object'></div>

v-if和v-for结合使用

语法如下：

<div v-if='value == 12' v-for='(value,key,index) in object'></div>

示例代码如下：

<body>
    <div id="app">
        <div v-if='value== "张三"' v-for='(value,key,index) in object'>{{value + '---' + key + '---' + index}}</div>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        /* 
            v-if和v-for结合使用
        */
        var vm = new Vue({
            el: '#app',
            data: {
                object : {
                    name: '张三',
                    age: 19,
                    hobby: 'eat'
                }
            }
        });
    </script>
</body>

Vue模板语法

3. Vue 模板语法

3.1 指令

3.2 双向数据绑定

3.3 事件绑定

3.4 属性绑定

3.5 样式绑定

3.6 分支循环结构

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vue模板语法

3. Vue 模板语法

3.1 指令

3.2 双向数据绑定

3.3 事件绑定

3.4 属性绑定

3.5 样式绑定

3.6 分支循环结构

热门文章

最新文章

相关课程

相关电子书

相关实验场景