Vue | 01Vue概述之模板语法

猫天意

已于 2024-06-06 11:28:06 修改

阅读量469

点赞数

分类专栏： Vue 文章标签： Vue 前端模板语法

于 2021-07-08 11:20:38 首次发布

本文链接：https://blog.csdn.net/weixin_46264660/article/details/118569879

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、Vue概述
- 1.1、Vue的起源
- 1.2、Vue概述
二、Vue基本使用
三、Vue模板语法
四、指令
五、案例Tab选项卡

一、Vue概述

1.1、Vue的起源

在这里插入图片描述

1.2、Vue概述

Vue：渐进式JavaScript框架

声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建

官网：https://cn.vuejs.org

教程：https://cn.vuejs.org/v2/guide/

特点：

HTML、CSS、JavaScript基础知识后，可快速上手Vue
灵活：在一个库和一套完整框架之间自如伸缩
高效：20kB运行大小，超快虚拟 DOM

二、Vue基本使用

2.1 传统开发模式对比

在这里插入图片描述

2.2 Vues.js之HelloWorld

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{1 + 2}}</div>
        <div>{{msg + '----' + 123}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
              Vue的基本使用步骤
              1、需要提供标签用于填充数据
              2、引入vue.js库文件
              3、可以使用vue的语法做功能了
              4、把vue提供的数据填充到标签里面
            */
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        });
    </script>
</body>

</html>

在这里插入图片描述

el：挂载点 :挂载点el可以理解为：告诉Vue你要把数据填充到哪个位置，通过ID进行标注。

1）实例参数分析：

实例参数分析el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象）

2）插值表达式用法：

插值表达式用法将数据填充到HTM标签中
插值表达式支持基本的计算操作

3）vue代码运行原理分析概述编译过程的概念

概述编译过程的概念（Vue语法原生语法）

2.3 data：数据对象

Vue中用到的数据定义在data中

data中可以写复杂类型的数据

渲染复杂类型的数据时，遵循JS的语法

2.4 问答环节

1、Vue实例的作用范围是什么？

Vue会管理el选项命中的元素及其内部的后代元素

2、是否可以使用其他选择器？

类选择器和ID选择器但是建议使用ID选择器

3、是否可以设置其他的DOM元素？

可以使用其他的双标签但是不能用HTML和BODY

三、Vue模板语法

1.如何理解前端渲染？
把数据填充到HTM标签中
在这里插入图片描述
2.前端渲染方式

原生js拼接字符串
使用前端模板引擎心
使用vue特有的模板语法

3.模板语法概览

差值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

四、指令

4.1 什么是指令

什么是指令？
什么是自定义属性
指令的本质就是自定义属性指令的格式：以v开始（比如：v- cloak）

4.2 v-cloak指令

插值表达式存在的问题：“闪动“
如何解决该问题：使用 v-cloak指令
解决该问题的原理：先隐藏，替换好值之后再显示最终的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  [v-cloak]{
    display: none;
  }
  </style>
</head>
<body>
  <div id="app">
    <div v-cloak>{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-cloak指令的用法
      1、提供样式
        [v-cloak]{
          display: none;
        }
      2、在插值表达式所在的标签中添加v-cloak指令

      背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue'
      }
    });
  </script>
</body>
</html>

4.3 数据绑定指令

总览：

v-text填充纯文本
①相比插值表达式更加简洁
v-htm填充HTML片段
①存在安全问题
②本网站内部数据可以使用，来自第三方的数据不可以用
v-pre 填充原始信息
①显示原始信息，跳过编译过程（分析编译过程）

4.3.1 v-text

  <h1 v-text="msg"></h1>

v-text指令的作用是：

v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
v-text指令无论内容是什么，都只会解析为文本

没有闪动问题，可以经常使用。

4.3.2 v-html指令

<div v-html='msg2'></div>

v-html指令的作用是：

用法和v-text 相似但是他可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

v-html存在安全隐患一般不进行使用。

4.3.3 v-pre指令

<div v-pre>{{msg}}</div>

v-pre指令作用：

显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <div v-text='msg'></div>
    <div v-html='msg1'></div>
    <div v-html='msg2'></div>
    <div v-pre>{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
      2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
      3、v-pre用于显示原始信息
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        msg1: '<h1>HTML</h1>',
        msg2:"<a href='https://www.baidu.com'>我是百度</a>"
      }
    });
  </script>
</body>
</html>

截图展示：
在这里插入图片描述

4.4 数据响应式

如何理解响应式
①htm5中的响应式（屏幕尺寸的变化导致样式的变化）
②数据的响应式（数据的变化导致页面内容的变化）
什么是数据绑定
①数据绑定：将数据填充到标签中
v-once只编译一次
①显示内容之后不再具有响应式功能

4.4.1 v-once指令

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <div v-once>{{info}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        info: 'nihao'
      }
    });
  </script>
</body>
</html>

在这里插入图片描述

4.5 双向数据绑定

当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化

MVVM设计思想详解 mvvm(分治思想)：

MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel
m model
- 数据层 Vue 中数据层都放在 data 里面
v view 视图
- Vue 中 view 即我们的HTML页面
vm （view-model）控制器将数据和视图层建立联系
- vm 即 Vue 的实例就是 vm

4.5.1 v-model指令

1）v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>{{msg}}</div>
    <div>
      <input type="text" v-model='msg'>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      双向数据绑定
      1、从页面到数据
      2、从数据到页面
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue'
      }
    });
  </script>
</body>

</html>

总结：
1、v-model指令的作用是便捷的设置和获取表单元素的值
2、绑定的数据会和表单元素的值动态关联

2）v- model的低层实现原理分析
在这里插入图片描述

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

<input type="text" v-bind:value='msg' v-on:input='handle'>
<input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>{{msg}}</div>
    <input type="text" v-bind:value="msg" v-on:input='handle'>
    <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
    <input type="text" v-model='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-model指令的本质

    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
      methods: {
        handle: function (event) {
          // 使用输入域中的最新的数据覆盖原来的数据
          this.msg = event.target.value;
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

v-model底层的实现原理就是基于v-on和v-bind来实现的。

4.6 事件绑定

Vue如何处理事件呢？那么将介绍如下指令：
在这里插入图片描述

4.6.1 v-on指令

在这里插入图片描述

v-on 指令用法

 <input type = 'button' v-on:click='num++'/>

v-on 简写形式

 <input type = 'button'  @click='num++'/>

4.6.2 事件函数的调用方式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <button v-on:click='num++'>点击</button>
            <button @click='num++'>点击1</button>
            <button @click='handle'>点击2</button>
            <button @click='handle()'>点击3</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {

                num: 0

            }, // 注意点： 这里不要忘记加逗号 
            // methods  中 主要是定义一些函数
            methods: {
                handle: function () {
                    // 这里的this是Vue的实例对象+
                    console.log(this === vm)
                    //   在函数中 想要使用data里面的数据 一定要加this 
                    this.num++;
                }
            }
        });
    </script>

</body>

</html>

在这里插入图片描述

总结：
1、v-on指令的作用：为元素绑定事件(单击，移入，移出，双击···)
2、事件名不需要写on
3、指令可以简写为@
4、绑定的方法写在methods属性中
5、方法内部通过this关键字才能访问定义在data中的数据
6、事件绑定的方法写成函数调用的形式，可以传入自定义的参数
7、定义方法时可以定义形参来接收传入的实参
8、事件的后面可以跟上.修饰符对事件进行控制(如keyup.enter回车键触发)
9、this就是Vue的实例。vm

4.6.3 事件函数参数传递

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

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

</html>

在这里插入图片描述

4.6.4 事件修饰符

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>{{num}}</div>
    <div v-on:click='handle0'>
      <button v-on:click.stop='handle1'>点击1</button>
    </div>
    <div>
      <a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-事件修饰符
    */
    var vm = new Vue({
      el: '#app',
      data: {
        num: 0
      },
      methods: {
        handle0: function () {
          this.num++;
        },
        handle1: function (event) {
          // 阻止冒泡
          // event.stopPropagation();
        },
        handle2: function (event) {
          // 阻止默认行为
          // event.preventDefault();
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

stop阻止冒泡
prevent阻止默认行为

4.6.5 按键修饰符

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <form action="">
      <div>
        用户名：
        <input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
      </div>
      <div>
        密码：
        <input type="text" v-on:keyup.enter='handleSubmit' v-model='pwd'>
      </div>
      <div>
        <input type="button" v-on:click='handleSubmit' value="提交">
      </div>
    </form>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-按键修饰符
    */
    Vue.config.keyCodes.f1 = 113
    var vm = new Vue({
      el: '#app',
      data: {
        uname: '',
        pwd: '',
        age: 0
      },
      methods: {
        clearContent: function () {
          // 按delete键的时候，清空用户名
          this.uname = '';
        },
        handleSubmit: function () {
          console.log(this.uname, this.pwd)
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

4.6.6 自定义按键修饰符

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

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

</html>

在这里插入图片描述

 <input type="text" v-on:keyup='handle' v-model='info'>

在这里插入图片描述

4.7 简单计算器案例

1）需求：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <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 v-on:click='handle'>计算</button>
    </div>
    <div>
      <span>计算结果:</span>
      <span v-text='result'></span>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      简单计算器案例 
    */
    var vm = new Vue({
      el: '#app',
      data: {
        a: '',
        b: '',
        result: ''
      },
      methods: {
        handle: function () {
          // 实现计算逻辑
          this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

4.8 属性绑定

4.8.1 v-bind指令

在这里插入图片描述

1、v-bind指令用法1
<a v-bind:href='url'>跳转</a>
2、v-bind指令写法2
<a :href='url'>跳转</a>

书写格式：v-bind:属性名 = 表达式

    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <img v-bind:title="imgTitle" alt="">
        <img v-bind:class="isActive?'active':''">
        <img v-bind:class="{active:isActive}">
        <img :src="imgSrc" alt="">
        <img :title="imgTitle" alt="">
        <img :class="isActive?'active':''">
        <img :class="{active:isActive}">
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                imgSrc: "图片地址",
                imgTitle: "标题",
                isActive: false
            },
            methods: {

            }
        });
    </script>

实例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <a v-bind:href="url">百度</a>
    <a :href="url">百度1</a>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      属性绑定
    */
    var vm = new Vue({
      el: '#app',
      data: {
        url: 'http://www.baidu.com'
      },
      methods: {
        handle: function () {
          // 修改URL地址
          this.url = 'https://www.sohu.com/';
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

总结：

1、v-bind指令的作用：为元素绑定属性

2、完整写法：v-bind：属性名简写：省略v-bind 直接写：属性名

3、需要动态的增删class 建议使用对象的方式

4.9 样式绑定

4.9.1 class样式处理对象用法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</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="{active: isActive,error: isError}">
      测试样式
    </div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定

    */
    var vm = new Vue({
      el: '#app',
      data: {
        isActive: true,
        isError: true
      },
      methods: {
        handle: function () {
          // 控制isActive的值在true和false之间进行切换
          this.isActive = !this.isActive;
          this.isError = !this.isError;
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

4.9.2 class样式处理数组用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</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 v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定

    */
    var vm = new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'error'
      },
      methods: {
        handle: function(){
          this.activeClass = '';
          this.errorClass = '';
        }
      }
    });
  </script>
</body>
</html>

在这里插入图片描述

4.9.3 样式绑定的语法细节

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active {
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }

    .error {
      background-color: orange;
    }

    .test {
      color: blue;
    }

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

<body>
  <div id="app">
    <div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>
    <div v-bind:class='arrClasses'></div>
    <div v-bind:class='objClasses'></div>
    <div class="base" v-bind:class='objClasses'></div>

    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定相关语法细节：
      1、对象绑定和数组绑定可以结合使用
      2、class绑定的值可以简化操作
      3、默认的class如何处理？默认的class会保留
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'error',
        isTest: true,
        arrClasses: ['active', 'error'],
        objClasses: {
          active: true,
          error: true
        }
      },
      methods: {
        handle: function () {
          this.isTest = false;
          this.objClasses.error = false;
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

4.9.4 stye样式处理

在这里插入图片描述

4.10 分支循环结构

4.10.1 v-if和v-show指令

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>

<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 type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      分支结构

      v-show的原理：控制元素样式是否显示 display:none
    */
    var vm = new Vue({
      el: '#app',
      data: {
        score: 10,
        flag: false
      },
      methods: {
        handle: function () {
          this.flag = !this.flag;
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

总结：
1、v-if指令的作用：根据表达式的真假切换元素的显示状态
2、本质是通过操作DOM元素来切换显示状态(操作DOM树对性能的消耗较大)
3、频繁切换的元素用v-show，反之用v-if
4、表达式为true，元素存在于DOM树中，若为false，则从DOM树种移除
5、v-show指令的作用是:根据真假切换元素的显示状态
6、其原理是修改元素的display，实现隐藏(display:none)

4.10.2 v-for指令遍历数组

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>

<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>
      <li :key='item.id' v-for='(item, index) in myFruits'>
        <span>{{item.ename}}</span>
        <span>-----</span>
        <span>{{item.cname}}</span>
      </li>

    </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      循环结构-遍历数组
    */
    var vm = new Vue({
      el: '#app',
      data: {
        fruits: ['apple', 'orange', 'banana'],
        myFruits: [{
          id: 1,
          ename: 'apple',
          cname: '苹果'
        }, {
          id: 2,
          ename: 'orange',
          cname: '橘子'
        }, {
          id: 3,
          ename: 'banana',
          cname: '香蕉'
        }]
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

4.10.3 v-for指令遍历对象

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>

<body>
  <div id="app">
    <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    // 使用原生js遍历对象
    var obj = {
      uname: 'lisi',
      age: 12,
      gender: 'male'
    }
    for (var key in obj) {
      console.log(key, obj[key])
    }
    /*
      循环结构
    */
    var vm = new Vue({
      el: '#app',
      data: {
        obj: {
          uname: 'zhangsan',
          age: 13,
          gender: 'female'
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述
根据数据生成列表结构

总结：
1、v-for指令的作用：根据数据生成列表结构
2、数组经常和v-for结合使用
3、语法：(item,index) in 数据
4、item和index可以结合其他指令一起使用
5、数组长度的更新会同步到页面上，是响应式的。

五、案例Tab选项卡

5.1 案例分析

在这里插入图片描述

5.2 实现步骤

在这里插入图片描述

5.3 实现代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .tab 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 blue;
      border-right: 1px solid blue;
      cursor
    }

    .tab ul li:first-child {
      border-left: 1px solid blue;
    }

    .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: 1px solid blue;
      border-top: 0px;
    }

    .tab div.current {
      display: block;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="tab">
      <ul>
        <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id'
          v-for='(item,index) in list'>{{item.title}}</li>
      </ul>
      <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
        <img :src="item.path">
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        currentIndex: 0, // 选项卡当前的索引
        list: [{
          id: 1,
          title: 'apple',
          path: 'img/apple.png'
        }, {
          id: 2,
          title: 'orange',
          path: 'img/orange.png'
        }, {
          id: 3,
          title: 'lemon',
          path: 'img/lemon.png'
        }]
      },
      methods: {
        change: function (index) {
          // 在这里实现选项卡切换操作：本质就是操作类名
          // 如何操作类名？就是通过currentIndex
          this.currentIndex = index;
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

猫天意

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue | 01Vue概述之模板语法

文章目录一、Vue概述1.1、Vue的起源1.2、Vue概述二、Vue基本使用2.1 传统开发模式对比2.2 Vues.js之HelloWorld2.3 data：数据对象2.4 问答环节三、Vue模板语法四、指令4.1 什么是指令4.2 v-cloak指令4.3 数据绑定指令4.3.1 v-text4.3.2 v-html指令4.3.3 v-pre指令4.4 数据响应式4.4.1 v-once指令4.5 双向数据绑定4.5.1 v-model指令4.6 事件绑定4.6.1 v-on指令4.6.2 事件函数
复制链接

扫一扫