vue模板语法

最新推荐文章于 2023-12-12 20:30:00 发布

seven豆

最新推荐文章于 2023-12-12 20:30:00 发布

阅读量402

点赞数

分类专栏： VUE 文章标签： vue vue.js

原文链接：https://www.cnblogs.com/biehongli/p/12661358.html

版权

VUE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue模板语法

1、Vue，渐进式Javascript框架。

渐进式的含义理解，从左到右递进关系，声明式渲染（最简单的模式）->组件系统（组件化）->客户端路由（局部更新，浏览器的历史回退功能）->集中式状态管理（Vuex做状态管理）->项目构建（大型项目，前后端分离）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <!--
         Vue的基本使用步骤
         1）、需要提供标签用于填充数据。
         2）、引入vue.js库文件。
         3）、可以使用vue的语法做功能了。
         4）、把vue提供的数据填充到标签。使用插值表达式{{}}，作用就是将数据填充到指定的标签的位置。
         -->
        <!-- {{}}叫做插值表达式，将数据填充到html标签中，插值表达式支持基本的计算操作。-->
        <div id="app">
            <div>{{msg}}</div>
            <div>{{'I love you ' + msg}}</div>
            <div>{{1 + 2 + 3}}</div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据。
                    msg: 'hello Vue!'
                }

            });
        </script>
    </body>
</html>

2、Vue模板语法

默认语法的功能就是前端渲染，前端渲染即使把数据填充到html标签中。数据（来自服务器） + 模板（html标签） = 前端渲染（产物是静态html内容）。

前端渲染的三种方式。

1）、原生js拼接字符串。基本上就是将数据以字符串的方式拼接到html标签中。缺点是不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。
2）、使用前端模板引擎。它拥有自己的一套模板语法规则。优点是大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。缺点是没有专门提高事件机制。
3）、使用vue特有的模板语法。包含差值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构。

3、Vue模板语法，什么是指令？

1）、什么是自定义属性。自定义属性是区别于标准属性的，标准属性是标签自带的属性。
2）、Vue指令的本质就是自定义属性。
3）、Vue指令的格式，以v-开始，比如v-cloak。指令的名称取决于设计者。

4、Vue模板语法，v-cloak指令用法。

1）、插值表达式存在的问题，就是闪动。
2）、如果解决该问题，使用v-cloak指令，可以解决闪动的问题。
3）、解决该问题的原理，先隐藏，替换好值之后再显式最终的值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>

        <style type="text/css">
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>

        <!--
            v-cloak指令的用法。
            1）、需要提高样式。
                [v-cloak] {
                  display: none;
                }
            2）、在插值表达式所在的标签中添加v-cloak指令。
            3)、原理，先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显式最终的结果，此时就不会显式{{}}这种闪动效果。
        -->
        <div id="app" v-cloak>
            <div>{{msg}}</div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    msg: 'hello Vue!'
                }

            });
        </script>
    </body>
</html>

5、Vue模板语法，v-text、v-html、v-pre数据绑定指令用法。

1）、v-text填充纯文本。特点一、相比较插值表达式更加简洁。不存在闪动问题，比插值表达式好使的哦。
2）、v-html填充html片段。特点一、存在安全问题。特点二、本网站内部数据可以使用，来自第三方数据不可以用。
3）、v-pre填充原始信息。特点一、显式原始信息，跳过编译过程，分析编译过程。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <div>{{msg}}</div>
            <!-- v-text没有闪动问题的，用户体验更好，比插值表达式更加好使 -->
            <div v-text="msg"></div>
            <!-- 内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译，在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击 -->
            <div v-html="msg2"></div>
            <!-- 显式原始信息，跳过编译过程(分析编译过程) -->
            <div v-pre>{{msg}}</div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    msg: 'hello Vue!',
                    msg2: '<h1>hello Vue!</h1>', //可以使用v-html标签展示html代码。
                }

            });
        </script>
    </body>
</html>

6、Vue模板语法，数据响应式。

1）、如何理解响应式。html5中的响应式（屏幕尺寸的变化导致样式的变化）、数据的响应式（数据的变化导致页面内容的变化）。

2）、什么是数据绑定。数据绑定就是将数据填充到标签中。

3）、v-once只编译一次。显式内容之后不再具有响应式功能。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <div>{{msg}}</div>
            <!-- v-once只编译一次。显式内容之后不再具有响应式功能。 -->
            <!-- v-once的应用场景，如果显式的信息后续不需要再修改，可以使用v-once指令，可以可以提高性能，因为Vue就不需要去监听它的变化了。 -->
            <div v-once>{{info}}</div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    msg: 'hello Vue!',
                    info: 'hello world Vue !',
                }

            });
        </script>
    </body>
</html>

7、Vue模板语法，双向数据绑定。

MVVM设计思想，最只要的理念就是分治，把不同的功能代码放到不同的模块，通过特定的方式建立关联。

1）、M指的是Model，就是data里面的数据，提供数据的。Model通过VM的Data Bindings数据绑定View。

2）、V指的是View，就是所写的模板Dom元素，提供页面展示效果的。View通过VM的DOM Listeners事件监听Model。

3）、VM指的是View-Model，就是控制逻辑，实现控制逻辑将两者结合到一起。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <div>{{msg}}</div>
            <!-- 主要是用于表单输入域中。 -->
            <!-- 双向数据绑定分析，方向一、页面影响数据，方向二、数据影响页面。 -->
            <!-- 用户修改页面内容数据会改变，数据改变了影响插值表达式的内容页面改变。 -->
            <div>
                <input type="text" v-model="msg" />
            </div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    msg: 'hello Vue!',
                }

            });
        </script>
    </body>
</html>

8、Vue模板语法，事件绑定。

1）、 Vue如何处理事件？

v-on指令用法：<input type="button" v-on:click="num++" />。
　　v-on简写形式，<input type="button" @click="num++"/>。
2）、事件函数的调用方式。

直接绑定函数名称：<button v-on:click="add">加一</button>。不需要传递事件对象，默认携带事件对象。
调用函数：<button @click="reduce()">减一</button>。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <div>{{num}}</div>
            <!-- 如果逻辑直接写到@click、v-on:click后面，不合理，随着业务量增多，这里变得十分冗余。 -->
            <div>
                <input type="button" v-on:click="num++" value="加一" />
                <input type="button" @click="num--" value="减一" />

                <br />
                <button v-on:click="add">加一</button>
                <button @click="reduce()">减一</button>
            </div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    // msg: 'hello Vue!',
                    num: 1, // num初始化值为1
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    add: function() {
                        this.num++; // 此处的this指的是vm即Vue的实例，通过vm可以访问到num。
                    },
                    reduce: function() {
                        this.num--;
                    }
                }

            });
        </script>
    </body>
</html>

3）、事件函数的参数传递。如果传参事件对象，固定格式$event。

普通的参数和事件对象：<button @click="say("hi",$event)">Say Hi</button>。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <div>{{num}}</div>
            <!-- 如果逻辑直接写到@click、v-on:click后面，不合理，随着业务量增多，这里变得十分冗余。 -->
            <div>
                <input type="button" v-on:click="num++" value="加一" />
                <input type="button" @click="num--" value="减一" />

                <br />
                <!--
                    事件绑定-参数传递。
                    1）、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。
                    2）、如果事件绑定函数调用，那么事件对象必须作为最后一个参数进行显式传递，并且事件对象的名称必须是固定的$event。
                 -->
                <!-- v-on:click="add"不需要传递事件对象，默认携带事件对象。 -->
                <button v-on:click="add">加一</button>
                <!-- 这种情况是传递具体的参数 -->
                <button @click="reduce(2,3,4)">减二</button>

                <!-- 传递事件对象，最后一个参数是事件对象，并且$event名称是固定的 -->
                <button @click="multip(2,3,$event)">乘二</button>
            </div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    // msg: 'hello Vue!',
                    num: 1, // num初始化值为1
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    add: function() {
                        console.log(event.target.tagName); // 通过event事件对象可以拿到触发事件的对象。
                        console.log(event.target.innerHTML); // 通过event事件对象可以拿到内容。
                        this.num++; // 此处的this指的是vm即Vue的实例，通过vm可以访问到num。
                    },
                    reduce: function(param1, param2, param3) {
                        console.log(param1);
                        console.log(param2);
                        console.log(param3);
                        this.num = this.num - param1;
                    },
                    multip: function(param1, param2, event) {
                        console.log(param1);
                        console.log(param2);
                        console.log(event.target.tagName); // 通过event事件对象可以拿到触发事件的对象。
                        console.log(event.target.innerHTML); // 通过event事件对象可以拿到内容。
                        this.num = this.num * param1;
                    },

                }

            });
        </script>
    </body>
</html>

4）、事件修饰符，处理事件的特殊行为。

.stop阻止冒泡：<a v-on:click.stop="">跳转</a>。
　　.prevent阻止默认行为：<a v-on:click.prevent="">跳转</a>。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <div>{{num}}</div>
            <!-- 冒泡行为，会执行这里的点击事件 -->
            <div @click="add0">
                <!--
                    事件绑定-参数传递。
                    1）、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。
                    2）、如果事件绑定函数调用，那么事件对象必须作为最后一个参数进行显式传递，并且事件对象的名称必须是固定的$event。
                 -->
                <!-- v-on:click="add"不需要传递事件对象，默认携带事件对象。 -->
                <!-- .stop阻止了冒泡的发生 -->
                <button v-on:click.stop="add">加一</button>
                <!-- 这种情况是传递具体的参数 -->
                <button @click="reduce(2,3,4)">减二</button>

                <!-- 传递事件对象，最后一个参数是事件对象，并且$event名称是固定的 -->
                <button @click="multip(2,3,$event)">乘二</button>

                <!-- 阻止默认行为，典型应用是超链接，默认的时候会发生跳转，.prevent事件修饰符阻止默认行为 -->
                <a href="https://www.baidu.com/" @click.stop.prevent="stopBlank">百度</a>
            </div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    // msg: 'hello Vue!',
                    num: 1, // num初始化值为1
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    // 通过点击事件的冒泡触发了该方法的执行。
                    add0: function() {
                        this.num++;
                    },
                    add: function() {
                        console.log(event.target.tagName); // 通过event事件对象可以拿到触发事件的对象。
                        console.log(event.target.innerHTML); // 通过event事件对象可以拿到内容。
                        this.num++; // 此处的this指的是vm即Vue的实例，通过vm可以访问到num。

                        // 阻止冒泡行为，就不会发生冒泡的行为。可以拿到事件对象就可以阻止冒泡的。
                        // stopPropagation此方法可以根据事件对象调用阻止冒泡的发生。
                        // event.stopPropagation();

                    },
                    reduce: function(param1, param2, param3) {
                        console.log(param1);
                        console.log(param2);
                        console.log(param3);
                        this.num = this.num - param1;
                    },
                    multip: function(param1, param2, event) {
                        console.log(param1);
                        console.log(param2);
                        console.log(event.target.tagName); // 通过event事件对象可以拿到触发事件的对象。
                        console.log(event.target.innerHTML); // 通过event事件对象可以拿到内容。
                        this.num = this.num * param1;
                    },
                    stopBlank: function(event) {
                        // 阻止默认跳转行为，原生Js的api，换成事件修饰符。
                        // event.preventDefault();
                    },

                }

            });
        </script>
    </body>
</html>

5）、按键修饰符。

.enter回车键：<input v-on:keyup.enter='submit'>。
　　.delete删除键：<input v-on:keyup.delete='handle'>。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <form action="">
                <div>账号：<input type="text" v-on:keyup.delete="clearContext" v-model="name" /></div>
                <!-- v-on:keyup.enter按键修饰符，通过回车就可以触发事件 -->
                <div>密码：<input type="text" v-on:keyup.enter="handleSubmit" v-model="password" /></div>
                <div><input type="button" v-on:click="handleSubmit" value="提交"></div>
            </form>

        </div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    name: '',
                    password: ''
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    handleSubmit: function() {
                        // 此时可以将表单的内容通过ajax提交到后台
                        console.log(this.name, this.password)
                    },
                    clearContext: function() {
                        // 按delete键的时候，清空用户名
                        this.name = '';
                        this.password = '';
                    }
                }

            });
        </script>
    </body>
</html>

6）、自定义按键修饰符。

全局config.keyCodes对象：Vue.config.keyCodes.f1=112。
注释：keyCodes是一个对象，f1是自定义的，112是一个值，这个值是每一个按键的唯一标识，通过这个事件对象可以获取到这个唯一标识。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <input type="text" v-on:keyup="handle" v-model="info" />

            <!-- 13就是Enter的唯一标识，可以使用这种形式v-on:keyup.13，就不用自定义按键了，但是数值的形式不直观 -->
            <input type="text" v-on:keyup.13="handle" v-model="info" />
            <!-- 事件绑定，自定义按键修饰符，规则，自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应的event.keyCode的值。-->
            <input type="text" v-on:keyup.f1="handle" v-model="info" />
        </div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // 自定义按键修饰符，可以使用 `v-on:keyup.f1`
            Vue.config.keyCodes.f1 = 112
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    info: '',
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    handle: function() {
                        // 可以通过event.keyCode获取到每一个按键的唯一标识
                        console.log(event.keyCode)
                    }
                }

            });
        </script>
    </body>
</html>

9、简单相加计算器。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <!--
                1）、通过v-model指令实现数值a和数值b的绑定。
                2）、给计算按钮绑定事件，实现计算逻辑。
                3）、将计算结果绑定到对应的位置。
             -->

            <h1>简单计算器</h1>
            <div>
                <span>数值A：</span>
                <span>
                    <input type="text" v-model="a" />
                </span>
            </div>
            <div>
                <span>数值B：</span>
                <span>
                    <input type="text" v-model="b" />
                </span>
            </div>
            <div>
                <button @click="handle">计算</button>
            </div>
            <div>
                <span>计算结果：</span>
                <span v-text="result"></span>
            </div>
        </div>
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    a: '',
                    b: '',
                    result: ''
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    handle: function() {
                        // 实现计算结果，默认获取得到的是字符串，这里需要先转换成整数
                        this.result = parseInt(this.a) + parseInt(this.b);
                    }
                }

            });
        </script>
    </body>
</html>

10、Vue模板语法，属性绑定。

1）、Vue如何动态处理属性。

v-bind指令用法：<a v-bind:href='url'>跳转</a>。
　　缩写形式：<a :href='url'>跳转</a>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <a href="https://www.baidu.com">百度</a>

            <!-- v-bind指令用法，使用外部的url来填充访问链接 -->
            <a v-bind:href="url">百度</a>
            <a :href="url">百度</a>
            <button @click="handle">切换</button>

        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    url: 'https://www.baidu.com'
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    handle: function() {
                        // 修改url地址
                        this.url = 'https://cn.vuejs.org/';
                    }
                }

            });
        </script>
    </body>
</html>

2）、v-model的底层实现原理分析，v-model用于实现双向数据绑定。v-model底层用到的是属性绑定和事件绑定的组合。<input v-bind:value="msg" v-on:input="msg=$event.target.value" />

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <div v-text="msg"></div>
            <!-- 通过v-on:input实现，修改数据影响模型中的数据，当input输入框发生变化，触发input事件 -->
            <input v-bind:value="msg" v-on:input="handle" />
            <!-- 简化形式，通过v-on:input="msg=$event.target.value"可以获取到最新值，将最新值赋值给v-on:input里面的msg -->
            <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value" />
            <!-- v-model="msg"数据双向绑定 -->
            <input type="text" v-model="msg" />
        </div>


        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    msg: 'hello'
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    handle: function(event) {
                        // 通过拿到event对象就可以操作元素的值
                        // 覆盖原来的值，影响模型中的数据，而模型中数据改变了进而应该视图中的数据，这就是双向绑定。
                        // 使用输入域中的最新的数据覆盖原来的数据。
                        this.msg = event.target.value;
                    }
                }

            });
        </script>
    </body>
</html>

11、Vue模板语法，样式绑定。

1）、通过class样式进行处理，处理标签的属性。

对象语法：<div v-bind:class="{active:isActive}"></div>。对象形式的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
        <style type="text/css">
            .active {
                border: 1px solid red;
                width: 100px;
                height: 100px;
            }

            .error {
                background-color: orange;
            }
        </style>
    </head>
    <body>

        <div id="app">
            <!-- 传统方式是操作dom的class属性，Vue使用的v-bind:class="{}"来操作属性即可 -->
            <!-- 对象形式：v-bind:class="{}"的大括号里面是一个对象，对象是键值对形式的，键是类名，值是属性，控制是否显式 -->
            <div v-bind:class="{active : isActive}">哈哈哈</div>

            <!-- 对象形式：多个对象 -->
            <div v-bind:class="{active : isActive,error : isError}">呵呵呵</div>
            <!-- 切换，可以切换是否展示 -->
            <button @click="handle">切换</button>
        </div>

        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    isActive: 'true', // true默认是展示的，isActive其中is开头的一般是标志位，要么是true，要么是false。
                    isError: 'true', // true显式，false不显示
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    handle: function() {
                        // 控制isActive的值，在true和false之间进行切换，使用!取反来操作
                        this.isActive = !this.isActive;
                        this.isError = !this.isError;
                    }
                }

            });
        </script>
    </body>
</html>

数组语法：<div v-bind:class="[activeClass, errorClass]"></div>。数组形式的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
        <style type="text/css">
            .active {
                border: 1px solid red;
                width: 100px;
                height: 100px;
            }

            .error {
                background-color: orange;
            }
        </style>
    </head>
    <body>

        <div id="app">
            <!-- 数组形式，绑定样式 -->
            <div v-bind:class="[activeClass, errorClass]">哈哈哈</div>

            <!-- 切换，可以切换是否展示 -->
            <button @click="handle">切换</button>
        </div>

        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    activeClass: 'active', // activeClass表示的是类名称
                    errorClass: 'error', //
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    handle: function() {
                        this.activeClass = ''; // 直接将类名置空，就可以去掉这个样式
                        this.errorClass = '';
                    }
                }

            });
        </script>
    </body>
</html>

2)、样式绑定相关语法细节。

a、对象绑定和数组绑定可以结合使用。
b、class绑定的值可以简化操作。
c、默认的class如何处理。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
        <style type="text/css">
            .active {
                border: 1px solid red;
                width: 100px;
                height: 100px;
            }

            .error {
                background-color: orange;
            }

            .colors {
                color: blue;
            }

            .base {
                font-size: 28px;
            }
        </style>
    </head>
    <body>

        <div id="app">
            <!--
                样式绑定相关语法细节。
                1、对象绑定和数组绑定可以结合使用。
                2、class绑定的值可以简化操作。
                3、默认的class如何处理。
             -->
            <!-- 数组形式和对象样式组合使用，绑定样式，但是如果样式过多，可读性变差 -->
            <div v-bind:class="[activeClass, errorClass, {colors: isColor}]">哈哈哈</div>

            <!-- 数组形式的简化写法 -->
            <div v-bind:class="arrClasses">嘿嘿嘿</div>

            <!-- 对象形式的简化写法 -->
            <div v-bind:class="objClass">呵呵呵</div>

            <!-- 默认的class如何处理，默认的class不会被覆盖，而是结合到了一起 -->
            <div class="base" v-bind:class="objClass">哼哼哼</div>


            <!-- 切换，可以切换是否展示 -->
            <button @click="handle">切换</button>
        </div>

        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    activeClass: 'active', // activeClass表示的是类名称
                    errorClass: 'error', //
                    isColor: true,
                    arrClasses: ['active', 'error'], // 简化数组形式
                    objClass: { // 对象形式的简化
                        active: true,
                        error: true,
                    }
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    handle: function() {
                        this.isColor = !this.isColor; //
                        this.objClass.error = !this.objClass.error; // 对象形式修改样式
                    }
                }

            });
        </script>
    </body>
</html>

3）、style样式处理，也称为内联样式。

对象语法：<div v-bind:style="{color: activeColor,fontSize: fontSize}"></div>。直接写了css样式。
数组语法：<div v-bind:class="[baseStyles, overridingStyles]"></div>。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <!-- 对象形式，如果样式较多，可读性不好 -->
            <div v-bind:style="{border: borderStyle, width: widthStyle, height: heightStyle}">哈哈哈</div>
            <!-- 对象形式简化用法，通过使用对象形式的一组样式来展示 -->
            <div v-bind:style="objStyles">哈哈哈</div>

            <!-- 数组语法，里面存放的多个对象的形式 -->
            <div v-bind:style="[objStyles, overwiteStyles]"></div>

            <!-- 切换，可以切换是否展示 -->
            <button @click="handle">切换</button>
        </div>

        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    borderStyle: '1px solid red', //
                    widthStyle: '100px', //
                    heightStyle: '200px',
                    objStyles: {
                        border: '1px solid red', //
                        width: '200px', //
                        height: '100px',
                    },
                    overwiteStyles: {
                        border: '3px solid orange', //
                        width: '100px', //
                        height: '200px',
                        backgroundColor: 'pink',
                    }
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    handle: function() {
                        this.heightStyle = '100px'; //
                        this.objStyles.width = '100px'; // 可以修改对象里面的属性的样式值
                        this.overwiteStyles.height = '100px'; // 可以修改对象里面的属性的样式值
                    }
                }

            });
        </script>
    </body>
</html>

12、Vue模板语法，分支循环结构。

1）、分支结构，v-if、v-else、v-else-if、v-show。

v-if和v-show的区别，v-if控制元素是否渲染到页面。v-show控制元素是否显式（已经渲染到了页面）。如果一个元素频繁的显式和隐藏就使用v-show，如果一个元素渲染出来之后变化的比较少的话就用v-if，控制的是dom元素的增加或者删除。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <input v-model="score" />
            <!-- 分支结构，渲染出来的只有一个div，区别于v-show -->
            <div v-if="score>= 90">优秀</div>
            <div v-else-if="score< 90 && score >= 80">良好</div>
            <div v-else-if="score< 80 && score > 70">一般</div>
            <div v-else-if="score< 70 && score > 60">及格</div>
            <div v-else>不及格</div>

            <br />
            <!-- v-show的原理，控制元素样式是否显式，就是display:none或者display:block; -->
            <!-- 分支结构，v-show，当为false的时候，页面不展示，但是浏览器源码是展示的，false的样式是style="display: none;" -->
            <div v-show="flag">测试v-show</div>
            <!-- 切换 -->
            <button @click="handle">切换</button>
        </div>

        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    score: '',
                    flag: true,
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    handle: function() {
                        this.flag = !this.flag;
                    }
                }

            });
        </script>
    </body>
</html>

2）、分支循环结构，循环结构。

a）、v-for遍历数组：
<li v-for="item in list">{{item}}</li>。
<li v-for="(item, index) in list">{{item}} + '---' + {{index}}</li>。
b）、key的作用，帮助vue区分不同的元素，从而提高性能。
　　　　<li :key='item.id' v-for="(item,index) in list">{{item}} + '---' + {{index}}</li>。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <span>水果列表：</span>
            <!-- 循环遍历 -->
            <!-- 使用v-text进行展示，可以避免闪动现象发生 -->
            <li v-for="item in fruit" v-text="item"></li>
            <!-- 使用插值表达式，可能出现闪动 -->
            <!-- <li v-for="item in fruit">{{item}}</li> -->

            <br />
            <span>水果列表：</span>
            <!-- 展示的索引和元素，使用空格隔开 -->
            <li v-for="(item,index) in fruit">{{index + " " + item}}</li>
            <!-- 展示形式和上面的一致 -->
            <li v-for="(item,index) in fruit">{{index}} {{item}}</li>

            <br />
            <span>水果列表：</span>
            <!-- 复杂的数组对象结构 -->
            <li v-for="item in cfruit">
                <!-- 通过点来获取数组对象的属性值 -->
                <span>{{item.ename}} {{item.cname}}</span>
            </li>

            <br />
            <span>水果列表：</span>
            <!-- key的作用，帮助vue区分不同的元素，从而提高性能。Vue在处理Dom元素的时候，需要区分兄弟节点之间彼此是不一样的，给每个兄弟节点标注一个唯一标识 -->
            <!-- 使用唯一标识，方便区分是那一个元素 -->
            <li :key='item.id' v-for="(item,index) in cfruit">
                <!-- 通过点来获取数组对象的属性值 -->
                <span>{{item.ename}} {{item.cname}}</span>
            </li>
        </div>

        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    fruit: ['apple', 'orange', 'banana'],
                    cfruit: [{
                        id: 1,
                        ename: 'apple',
                        cname: '苹果',
                    }, {
                        id: 2,
                        ename: 'orange',
                        cname: '橘子',
                    }, {
                        id: 3,
                        ename: 'banana',
                        cname: '香蕉',
                    }, ]
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。

                }

            });
        </script>
    </body>
</html>

3）、分支循环结构，循环结构。

a）、v-for遍历对象：<div v-for='(value, key, index) in object'></div>。
　　b）、v-if和v-for结合使用：<div v-if='value == 12' v-for='(value, key, index) in object'></div>。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
    </head>
    <body>

        <div id="app">
            <!-- v-for遍历对象 -->
            <div v-for="(value, key, index) in object">
                {{index}} {{key}} {{value}}
            </div>

            <br />
            <!-- v-if和v-for结合使用 -->
            <div v-if="value == 22" v-for="(value, key, index) in object">{{index}} {{key}} {{value}}</div>
        </div>

        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    object: {
                        name: '张三三',
                        age: 22,
                        gender: '男性',
                    }
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。

                }

            });
        </script>
    </body>
</html>

13、Tab选项卡。

1）、实现静态ui效果，用传统的方式实现标签结构和样式。
2）、基于数据重构ui效果，将静态的结构和样式重构为基于Vue模板语法的形式，处理事件绑定和js控制逻辑。
3）、总结，Vue模板 + Js控制逻辑 = Vue实例对象，实现前端功能。

4）、声明式编程，模板的结构和最终显示的效果基本一致。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello world</title>
        <style>
            .tal ul{
                overflow: hidden;
                padding: 0;
                margin: 0;
            }
            .tab ul li{
                box-sizing: border-box;
                padding: 0;
                float: left;
                width: 100px;
                height: 45px;
                line-height: 45px;
                list-style: none;
                text-align: center;
                border-top: 1px solid black;
                border-right: 1px solid black;
                cursor: pointer;
            }
            .tab ul li:first-child{
                border-left: 1px solid black;
            }
            .tab ul li.active{
                background-color: orange;
            }
            .tab div{
                width: 500px;
                height: 300px;
                display: none;
                text-align: center;
                font-size: 30px;
                line-height: 300px;
                border: 0px solid black;
                border-top: 0px;
            }
            .tab div.current{
                display: block;
            }
        </style>
    </head>
    <body>

        <div id="app">
            <!-- Tab选项卡。 -->
            <div class="tab">
                <!-- 展示tab栏 -->
                <ul>
                    <li v-on:click="change(index)" v-bind:class="currentIndex == index ? 'active':''" :key='item.id' v-for="(item,index) in list">{{item.title}}</li>
                </ul>
                <!-- 展示图片 -->
                <div v-bind:class="currentIndex == index ? 'current':''" :key='item.id' v-for="(item,index) in list">
                    <!-- <img v-bind:src="item.path" /> -->
                    <img :src="item.path" />
                </div>
            </div>
        </div>

        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
            // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
            // Vue所做的工作也就是把数据填充把页面的标签里面。
            // Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
            var vm = new Vue({
                // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
                el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
                // data模型数据，值是一个对象。
                data: { // 用于提供数据
                    currentIndex: 0, //选项卡当前的索引
                    list: [{
                        id: 1,
                        title: '小米10Pro',
                        path: 'img/1.jpg',
                    }, {
                        id: 2,
                        title: '小米9Pro',
                        path: 'img/2.jpg',
                    }, {
                        id: 3,
                        title: '小米8Pro',
                        path: 'img/3.jpg',
                    }],
                },
                methods: { // methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
                    change: function(index) {
                        // 实现选项卡的切换操作，切换的本质就是修改的类名称，操作类名称就是通过currentIndex这个索引的，因为这个索引影响三目运算符的真假
                        this.currentIndex = index;
                    }
                }

            });
        </script>
    </body>
</html>

seven豆

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue模板语法

vue模板语法1、Vue，渐进式Javascript框架。2、Vue模板语法3、Vue模板语法，什么是指令？4、Vue模板语法，v-cloak指令用法。5、Vue模板语法，v-text、v-html、v-pre数据绑定指令用法。6、Vue模板语法，数据响应式。7、Vue模板语法，双向数据绑定。8、Vue模板语法，事件绑定。9、简单相加计算器。10、Vue模板语法，属性绑定。11、Vue模板语法，样式绑定。12、Vue模板语法，分支循环结构。13、Tab选项卡。1、Vue，渐进式Javascript框架。
复制链接

扫一扫

专栏目录