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 分支循环结构

热门文章

最新文章

相关课程

相关电子书

相关实验场景