vue中的指令

最新推荐文章于 2021-12-15 21:57:04 发布
最新推荐文章于 2021-12-15 21:57:04 发布
阅读量487 收藏 3
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43236850/article/details/105583342
版权

vue中的指令

插值表达式

vue中如果需要在html标签的“内容区域”中表现数据，就可以使用**{{}}双花括号**，这个技术称为插值表达式

语法：

<标签> {{ 表达式 }} </标签>

表达式：变量、常量、算术运算符、比较运算符、逻辑运算符、三元运算符等等

使用示例：

<body>
    <div id="app">
        <p>{{ city }}</p>
        <p>{{ people }}</p>
        <!--变量-->
        <p>{{ 300 }}</p>
        <!--常量-->
        <p>{{ people+400 }}</p>
        <!--算术-->
        <p>{{ people>1000 }}</p>
        <!--比较-->
        <p>{{ people>1000 && city==='北京' }}</p>
        <!--逻辑-->
        <p>{{ people>1000 ? '超级城市' : '大城市' }}</p>
        <!--三元运算-->
    </div>
    <script src="./vue.js"></script>

    <script>
        var vm = new Vue({
            // delimiters:['${'，'}$'],
            el: '#app',
            data: {
                city: '北京',
                people: 2000
            }
        })
    </script>
</body>

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

如果{{}}使用中有冲突，想更换为其他标记，可以这样：

delimiters:['${'，'}$']  // 标记符号变为${  }$了

使用要点：

  1. 在插值表达式中 只能设置简单的javascript表达式，不能设置复杂表达式(例如for循环)
  2. 在data值大小不改变的前提下，可以进行一般的 算术运算、比较运算、逻辑运算、三元操作符 等运算使用，也可以通过常量进行数据体现
  3. 插值表达式只能用在html标签的内容区域；不能用在其他地方
  4. {{}}花括号与变量之间为了美观可以有适当的空格，数量不限制，例如{{ msg}}、{{msg }}、{{ msg }}等都可以，为了美观，表达式左右各一个空格即可。

v-text

v-text与{{}}的作用是一样的，都是操控 标签的内容区域信息

语法：

<标签 v-text="表达式"> </标签>

注意：

  1. v-text 是通过标签的属性形式呈现
  2. 如果 标签 内容区域 有默认信息，则会被v-text覆盖掉
  3. v-text 可以进行 变量、常量、算术符号、比较符号、逻辑符号、三元运算符号等运算

使用示例：

<body>
    <div id="app">
        <p>{{ city }}87</p>
        <p v-text="city">87</p>
        <p v-text="people">{{city}}</p>
        <!--变量-->
        <p v-text="300"></p>
        <!--常量-->
        <p v-text="people+400"></p>
        <!--算术-->
        <p v-text="people>1000"></p>
        <!--比较-->
        <p v-text="people>1000 && city==='北京'"></p>
        <!--逻辑-->
        <p v-text="people>1000 ? '超级城市' : '大城市'"></p>
        <!--三元运算-->
    </div>
    <script src="./vue.js"></script>

    <script>
        var vm = new Vue({
            // delimiters:['$','#'],
            el: '#app',
            data: {
                city: '北京',
                people: 2000
            }
        })
    </script>
</body>

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

v-text与{{}}(插值表达式)的区别

v-text与{{}} 都可以操控 标签 内容区域，但是他们有一点区别

网速非常慢的时候，{{}} 有闪烁问题，而 v-text没有(属性 本身就是不会显示出来的)

什么是闪烁：

网速非常慢时，{{ }}花括号 等原生内容 在 Vue编译期间 在浏览器短时显示的现象就是闪烁

闪烁是负面的内容，想方设法不要让其出现

出现闪烁的条件：

  1. http协议方式打开应用程序文件(给vscode编辑器 安装 live server)
  2. 调整网速为 慢3G(firebug–>network–>slow 3G)

解决闪烁：

  1. 使用v-text
  2. vue.js在div容器上边引入

示例代码：

<div id="app">
  <p>{{ city }}</p><!--有闪烁-->
  <hr />
  <p v-text="city"></p><!--没有闪烁-->
</div>

<!--vue.js在div之后引入 是 闪烁出现的必要条件-->
<script src="./vue.js"></script>
<script>
  var vm = new Vue({
    // delimiters:['$','#'],
    el:'#app',
    data:{
      city: '北京',
      people: 2000
    }
  })

</script>

示例效果：
在这里插入图片描述

v-html

v-html与v-text、{{ }}的作用一样，都是操控标签的内容区域

语法：

<标签 v-html="表达式"> </标签>

v-html、v-text、{{ }}的异同：

  1. v-html对 html标签 和 普通文本 内容都可以设置显示

  2. v-text、{{ }} 只针对 字符串 起作用，如果数据中有html标签，那么标签的箭头符号要做字符实体转换，进而使得浏览器上直接"显示箭头"等标签内容，等同于不解析html标签内容

  3. v-html和v-text没有闪烁问题

  4. 它们都可以进行 变量、常量、算术运算、比较运算、逻辑运算、三元运算等技术应用

应用场景:

如果 服务器返回的数据中，包含有HTML标签(例如富文本编辑器内容)，就可以使用 v-html 来渲染(v-text和 {{}}都不行)

默认内容

<p>{{score}}默认内容</p>
<p v-text="score">默认内容</p>
<p v-html="score">默认内容</p>

以上三者，v-text和v-html标签有默认内容，但是都会被覆盖掉，而 插值表达式 不会覆盖

注意：

  1. v-html尽量避免使用(除非完全掌控)，否则会带来危险(XSS攻击 跨站脚本攻击)
  2. 标签的默认内容会被v-html覆盖

使用示例：

<div id="app">
    &lt;p&gt;
    <p>{{ city }}</p>
    <p v-text="city"></p>
    <p v-html="city"></p>
    <p v-html="people"></p>  <!--变量-->
    <p v-html="300"></p>  <!--常量-->
    <p v-html="people+400"></p>  <!--算术-->
    <p v-html="people>1000"></p>  <!--比较-->
    <p v-html="people>1000 && city==='北京'"></p>  <!--逻辑-->
    <p v-html="people>1000 ? '超级城市' : '大城市'"></p>  <!--三元运算-->
  </div>
  <script src="./vue.js"></script>

  <script>
    var vm = new Vue({
      // delimiters:['$','#'],
      el:'#app',
      data:{
        city: '<a href="#">北京</a>是一个超级城市',
        people: 2000
      }
    })

  </script>

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

v-bind

属性绑定简单使用

操作标签的属性需要通过 v-bind: 指令

语法：

<标签 v-bind:属性名称="表达式" ></标签>
<标签 :属性名称="表达式"></标签>  // 简易方式设置，推荐使用

注意：

  1. 冒号的简易设置推荐使用
  2. 如果有需要，绑定的内容可以进行 变量、常量、算术运算、比较运算、逻辑运算、三元运算等技术应用

案例:

通过v-bind对img标签的src、width、height属性进行绑定

<body>
    <div id="app">
        <p>
            <img v-bind:src="mysrc" alt="" :width="wh" :height="ht" />
        </p>
    </div>
    <script src="./vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                mysrc: './02.jpg',
                wh: 480,
                ht: 290
            }
        })
    </script>
</body>

效果:
在这里插入图片描述

属性绑定-class属性

class属性较比其他属性不一样的地方是，其既可以接收一个值，也可以通过空格分隔接收多个值

例如：

<tag class="a"></tag>	 <!--接收一个值-->
<tag class="a b c"></tag><!--接收多个值-->

class属性绑定的语法：

1) 对象方式
	<tag :class="{xx:true, xx:false}"></tag>
	<!--true: 设置   false:不设置-->
2) 数组方式
	<tag :class="['xx','yy','zz']"></tag>
	<!--数组元素值如果不是data成员 就要通过单引号圈选，代表是普通字符串-->

提示：

​ 通过数组方式给class绑定多个值，值如果不是Vue的 data成员，就需要通过单引号圈选，表明其是普通字符串

案例:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .a {
            color: darkorange;
        }
        
        .b {
            font-size: 25px;
        }
        
        .c {
            background-color: cyan;
        }
    </style>
</head>

<body>

    <div id="app">
        <h2>属性绑定</h2>
        <!-- 通过vue方式给class绑定如上3个信息 -->
        <!-- 1. 对象方式 -->
        <p :class=" {a:true, b:true, c:true, d:false} ">中国的首都是北京</p>
        <!-- 2. 数组方式 -->
        <p :class=" ['a','b','c'] ">北京是中国的首都</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {}
        })
    </script>

</body>

</html>

效果:
在这里插入图片描述
注意：

  1. 通过class绑定多个值，每个值都可以设置css样式

  2. 表达式：就是要按照javascript的语法规则设置相关内容

属性绑定-style属性

style样式属性较比普通属性也比较特殊，其也可以接收多个值

具体绑定语法：

(1)对象方式
     <tag :style="{xx:yy,xx:yy.....}"></tag>
     <!--xx:样式名称，yy:样式的值-->
(2)数组方式
	<tag :style="[{xx:yy},{xx:yy.....}]"></tag>
	<!--根据需要，数组的每个元素都是一个对象，每个对象包含一对或多对css样式-->

提示：

  1. 数组方式绑定style属性，每个数组元素可以包含一个或多个css样式对
  2. 复合属性带中横线(例如background-color)的需要通过单引号圈选，或变为驼峰名称

案例：

通过数组、对象两种style属性绑定方式，实现如下标签效果

<p style="color:blue;font-size:25px;background-color:hotpink;">学习Vue课程-style绑定</p>

  <div id="app">
    <h2>属性绑定</h2>
    <!-- <p style="color:blue;font-size:25px;background-color:hotpink;">学习Vue课程-style绑定</p> -->
    <!-- 通过vue实现给style绑定多个css样式信息 -->
    <!-- 1. 对象方式 -->
    <p :style=" {'color':'blue','fontSize':'25px','background-color':'hotpink'} ">学习Vue课程-style绑定</p>
    <!-- 2. 数组方式 -->
    <p :style=" [{'color':'blue','fontSize':'25px','background-color':'hotpink'}] ">学习Vue课程-style绑定</p>
    <p :style=" [{'color':'blue'},{'fontSize':'25px','background-color':'hotpink'}] ">学习Vue课程-style绑定</p>
    <p :style=" [{'color':'blue'},{'fontSize':'25px'},{'background-color':'hotpink'}] ">学习Vue课程-style绑定</p>
  </div>

  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        // apple:'pingguo'
      }
    })
  </script>

效果：
在这里插入图片描述
注意：

​ 通过传统方式也可以操作class或style属性，但是Vue的操控会更加灵活 和 精准，可以针对某一个值进行设置

v-on(@)

事件绑定-简单使用

web端网页应用程序开发，事件是一个不不可或缺的技术

在vue中给元素进行事件绑定，需要通过v-on:指令实现，也使用@符号，@是v-on:的简写，使用更方便

事件类型：

鼠标事件：onclick ondblclick onmouseenter onmouseleave onmouseover onmousedown等等

键盘事件：onkeyup onkeydown onkeypress 等等

语法：

<tag v-on:事件类型="事件处理驱动"></tag>
<tag @事件类型="事件处理驱动"></tag>  <!-- @符号 简便用法，推荐使用-->
<div @click="事件处理驱动"></tag>

<script>
var vm new Vue({
  el:xx
  data:xx,
  // 给当前vue实例 声明方法，以供事件调用
  methods:{
    名称：function(){}
  }
})
</script>

注意：

  1. 事件处理驱动 需要通过methods定义
  2. 被绑定的事件类型可以是 click、dblclick、keyup、keydown等等，不要设置on标志了

案例：

定义一个按钮，使得单击后 控制台 可以输出 “hello，你好呀”

  <div id="app">
    <h2>事件操控</h2>
    <!-- <button v-on:click="方法名称">说</button> -->
    <!-- <button @click="方法名称">说</button> @是 v-on: 的简写，推荐使用，记住-->
    <button v-on:click="say()">说</button>
    <button @click="say()">说</button>
  </div>

  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        // apple:'pingguo'
      },
      // 给Vue实例 声明方法，该方法可以给事件使用
      methods:{
        // 名称:function(){}  // es6简易设置为  名称(){}   :function被清除了
        say(){
          console.log('hello,北京')
        }
      }
    })
  </script>

效果：
在这里插入图片描述

事件绑定-传递参数

vue“单击”事件参数的3种类型：

  1. 有声明()，也有传递实参，形参就代表被传递的实参
  2. 有声明(),但是没有传递实参，形参就是undefined
  3. 没有声明()，第一个形参就是事件对象
  <div id="app">
    <h2>事件操控</h2>
    <p><button @click="delA(301)">删除A</button></p>
    <p><button @click="delB()">删除B</button></p>
    <p><button @click="delC">删除C</button></p>
  </div>

  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      // 给Vue实例 声明方法，该方法可以给事件使用
      methods:{
        delA(id){
          console.log('id为'+id+'的商品被删除了')  // 301
        },
        delB(id){
          console.log('id为'+id+'的商品被删除了')  // undefined
        },
        delC(id){
          console.log('id为'+id+'的商品被删除了')  // [object MouseEvent/鼠标事件对象]
        }
      }
    })
  </script>

千万注意：

没有()括号情形，由于事件类型不一样，参数所代表的 事件对象 也会不同，请灵活使用

事件绑定-访问data成员

根据业务需要，事件在执行过程中需要对Vue实例的data数据进行操作，通过this关键字实现，

this代表Vue实例对象，并且针对data或methods成员都可以直接进行调用

案例：

​ 给data声明city成员，值为“铁岭”

​ 设置按钮，使得单击后控制台可以输出“铁岭是一个大城市”

<button @click="getInfo()" >获取数据</button>

<script>
  var vm = new Vue({
    el:'#app',
    data:{
      address:'铁岭'
    },
    methods:{
      getInfo:function(){
        // 通过 this关键字 获得 data区域的数据信息
        console.log(this.address+'是一个大城市');
      }
    }
  })
</script>

事件绑定-this是谁

在Vue实例内部包括不限于methods方法中，this关键字 是Vue实例化对象，具体与 new Vue() 是一样的

并且其可以对 data 和 methods成员进行直接访问

可以理解为this和vm是同一个对象的两个不同名字，this === vm

  <div id="app">
    <h2>事件操控</h2>
    <p><button @click="say()">说</button></p>
  </div>

  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        city:'北京',
        weather:'snow'
      },
      // 给Vue实例 声明方法，该方法可以给事件使用
      methods:{
        say(){
          console.log(this) // 是对象，具体是new Vue()的对象，构造器是Vue
          // 外部的vm也是Vue实例化对象
          // this 和 vm  是同一个Vue实例化对象的两部同步名字而已，它们全等于
          console.log(this === vm) // true
          // (实例化对象的构造函数 new XXX,XXX就是当前实例化出来对象的构造器)
          console.log(this.city)
          console.log(this.weather)
          console.log(this.say2())
        },
        say2(){return 1234}
      }
    })
  </script>

注意：

this 与 vm 的指引完全一致，它们可以通过===判断等于(是同一个实体对象的两个不同名字而已)

一般this指向：

  1. this就是window对象

    var age = 20
function getInfo(){
  console.log(this)  // window
  console.log(this.age)
}
getInfo()  // 20

  2. this代表调用该方法的当前对象

    const tiger = {
  name:'东北虎', 
  act:'猛虎扑食', 
  say(){
    console.log('我的名字是'+this.name+'，我的招牌动作是'+this.act)
    // this代表tiger对象
  }
}
tiger.say()

  3. this代表元素节点对象

    <button onclick="this.style.color='red'" />确定</button>

注意：

this在不同情况下代表不同对象，不用强记，通过console.log输出查看便知

事件绑定-方法简易设置

具体设置：

根据es6标准，可以给methods各个方法做简易设置如下：

  <script>
    var vm = new Vue({
      el:'#app',
      // 给Vue实例 声明方法，该方法可以给事件使用
      methods:{
        // 对象成员方法简易设置  方法名称:function(){}  简易设置为：   方法名称(){}
        delA(id){
          console.log('id为'+id+'的商品被删除了')  // 301
        },
        delB(id){
          console.log('id为'+id+'的商品被删除了')  // undefined
        },
        delC(id){
          console.log('id为'+id+'的商品被删除了')  // [object MouseEvent]
        }
      }
    })
  </script>
// delA:function(){}   简易设置为  delA(){}
// delB:function(){}   简易设置为  delB(){}
// delC:function(){}   简易设置为  delC(){}

以后在其他应用中，对象中成员方法都可以把 “:function” 去除，做简易设置，是es6的标准规范

原理：

es6标准里边规定，对象成员名称 与 值的变量名称 保持一致，就可以做简易设置

// 对象属性简易设置如下：
var name = "xiaoqiang"
var height = 176
var run = function(){
  console.log('在跑步')
}

var person = {name:name,height:height,run:run}		// 正常创建对象
var person = {name, height, run}					// 简便方式创建对象

// 对象成员方法简易设置如下：
var obj = {
  // walk:function(){
  //   console.log('走直线')
  // }
  //变形
  // walk:function walk(){
  //   console.log('走直线')
  // }
  // 简易设置为如下：
  walk(){
    console.log('走直线')
  }
}

给一个对象直接声明一个成员方法，也可以简写为如上形式，去除": function"字样

v-model

在Vue中有一个很重要的指令，名称为v-model，其被称为双向数据绑定指令，就是Vue实例对数据进行修改，页面会立即感知，相反页面对数据进行修改，Vue内部也会立即感知

v-model是vue中 唯一实现 双向数据绑定 指令
在这里插入图片描述
v-bind单向数据绑定，Vue实例修改数据，页面会感知到，相反页面修改数据Vue实例不能感知

v-model双向数据绑定，页面修改数据，Vue实例会感知到，Vue实例修改数据，页面也会感知到

简单使用

语法：

<标签 v-model="data成员"></标签>

注意：

  1. v-model是vue中唯一的双向数据绑定指令

  2. v-model只针对value属性可以绑定，因此经常用在form表单标签中，例如input(输入框、单选按钮、复选框)/select(下拉列表)/textarea(文本域)，相反div、p标签不能用

  3. v-model只能绑定data成员，不能设置其他表达式，否则错误

    例如

    v-model=“score+100” 错误

    v-model=“120” 错误

    v-model=“score” 正确的

  4. v-model绑定的成员需提前在data中声明好

示例代码：

  <div id="app">
    <p>{{ city }}</p>
    <p><input type="text" :value="city"></p>
    <p><input type="text" v-model="city"></p>
  </div>
  <script src="./vue.js"></script>

  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        city:'北京'
      },
    })
  </script>

v-model对应的city发生变化后，其他的{{ }} 和 :value的值也会发生变化

效果：
在这里插入图片描述
{{表达式}}

v-text=“表达式”

v-html=“表达式”

v-bind:src=“表达式”

表达式此情此景有两种意思：

  1. 有具体的返回信息
  2. 按照javascript的正确语法规则设置相关内容

响应式

目标：

​ 知道什么是响应式

在这里插入图片描述

v-model数据双向绑定步骤：

  1. ①页面初始加载，vue的数据渲染给div容器

  2. ②通过v-model修改数据，修改的信息会直接反馈给vue内部

  3. ③vue的数据发生变化，页面上(也包括Vue实例本身)用到该数据的地方会重新编译渲染

    2和3 步骤在条件满足情况下会重复执行

响应式：

vue实例的data数据如果发生变化，那么页面上(或Vue实例内部其他场合)用到的地方会重新编译执行，这样就把更新后的内容显示出来了，这个过程就是“响应式”，即上图的步骤3

如果Vue实例内部对变化的数据有使用，也会同步更新编译执行

注意：

响应式 是Vue中非常重要的机制，请留意

加法计算器

案例：

利用 v-model 和 事件绑定 实现 加法计算器案例效果：

  <div id="app">
    <input type="text" v-model="num1" />
    <span>+</span>
    <input type="text" v-model="num2" />
    <button @click="add">=</button>
    <span>{{ result }}</span>
  </div>
  <script src="./vue.js"></script>

  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        num1:null,
        num2:null,
        result:null
      },
      methods:{
        add(){
          this.result = Number(this.num1) + Number(this.num2)
        }
      }
    })
  </script>

提示：

加法计算器用到的技术点有：v-model + 事件绑定 + 响应式 + this + 数据类型转换为数值的

简易原理

给input输入框中定义oninput事件，在该事件中把用户输入的信息都给随时获得到，并对data成员进行赋值

data成员变化了，页面上用到的地方就重新渲染，达成简易双向绑定的效果

oninput：是事件，可以随时感知输入框输入的信息

具体设置：

  <div id="app">
    <h2>v-model简易原理</h2>
    <p>{{city}}</p>
    <p><input type="text" :value="city"></p>
    <hr />
    <!-- oninput:是一个键盘事件，可以感知输入框输入信息状态 -->
    <!-- 事件@xxx="方法名称/语句" -->
    <!-- $event:在vue的事件被绑定元素的行内部，代表事件对象 -->
    <p><input type="text" :value="city" @input="city = $event.target.value"></p>
    <p><input type="text" :value="city" @input="feel"></p>
  </div>

  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        city:'北京'
      },
      // 给Vue实例 声明方法，该方法可以给事件使用
      methods:{
        feel(evt){
          // console.log(evt)  // InputEvent输入键盘事件对象
          // evt.target: 触发当前事件的元素节点dom对象(类似document.getElementById()的返回结果)
          // console.dir(evt.target)
          // evt.target.value // 获得输入框当前输入的信息
          // console.log(evt.target.value)
          // 把输入框已经输入的信息赋予给city
          this.city = evt.target.value
        }
      }
    })
  </script>

结论：

  1. 事件声明没有小括号()，第一个形参就是 事件对象

  2. 在元素行内事件驱动中可以直接使用**$event**,其也是事件对象

其他表单域使用

绑定多行文本框
<textarea v-model="name"></textarea>
<div>{{ name }}</div>

注意：

多行文本框中不要使用{{ name }}的方式绑定，如果这样就没有双向绑定效果了

绑定复选框

  • 绑定一个复选框

    遵守协议：<input type="checkbox" v-model="xieyi">
<div>{{ xieyi }}</div>    <!-- 体现 true 或  false信息-->
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            xieyi: true
        }
    })
</script>

  • 绑定多个复选框

    吃饭：<input type="checkbox" value="eat" v-model="hobby"><br>
睡觉：<input type="checkbox" value="sleep" v-model="hobby"><br>
敲代码：<input type="checkbox" value="qiao" v-model="hobby"><br>
{{ hobby }}    <!-- hobby体现为数组信息  ['eat','sleep','qiao']-->
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            hobby: []
        }
    });
</script>

    此种方式需要input标签提供value属性

绑定单选框
男<input type="radio" name="xingbie" value="男" v-model="sex">
女<input type="radio" name="xingbie" value="女" v-model="sex">
<p>{{sex}}</p>  <!-- 体现 男 或 女 的字符串信息-->
<script>
    var vm = new Vue({
       el: '#app',
       data: {
         sex: ''
       }
    });
</script>
绑定下拉列表
<div id="app">
  居住城市：
  <select v-model="mycity">
    <option disabled value="">请选择</option>
    <option value="B">北京</option>
    <option value="S">上海</option>
    <option value="G">广州</option>
  </select>
  <span>Selected: {{ mycity }}</span> <!--mycity: 体现为 B、S、G等字符串信息-->
</div>
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            mycity: 'S'
        }
    });
</script>

v-for

遍历数组

语法：

<标签 v-for="成员值 in 数组"></标签>
<标签 v-for="(成员值,下标) in 数组"></标签>

示例：

<div id="app">
  <ul>
    <li v-for="item in color">{{item}}</li>
  </ul>
  <ul>
    <li v-for="(item,k) in color">{{k}}-----{{item}}</li>
  </ul>
</div>

<script src="./vue.js"></script>

<script>
  var vm = new Vue({
    el:'#app',
    data:{
      color:['red','yellow','pink']
    },
    methods:{
    }
  })
</script>

效果：
在这里插入图片描述
注意：

​ 使用v-for指令的html标签，由于遍历机制，本身标签会被创建多份出来

品牌管理案例

列表展示

步骤：

  1. 引入vue.js文件

    <script src="./vue.js"></script>

  2. 实例化Vue对象，并通过data声明 brandsList 品牌列表信息

      var vm = new Vue({
    el:'#app',
    data:{
      // 品牌数组对象集
      brandList:[
        {id:10, name:'宝马', ctime:new Date()},
        {id:11, name:'奔驰', ctime:new Date()},
        {id:12, name:'奥迪', ctime:new Date()},
      ],
    },
  }

  3. 通过v-for给tr标签遍历展示品牌信息

    <tr v-for="(item,k) in brandsList">
  <td><input type="checkbox"></td>
  <td>{{ item.id }}</td>
  <td>{{ item.name }}</td>
  <td>{{ item.ctime }}</td>
  <td><button>删除</button></td>
</tr>

提示：

可以在现有的brand.html模板基础上做应用

效果：

在这里插入图片描述

添加品牌

目标：

​ 实现品牌添加操作

步骤：

  1. 给新品牌输入框设置v-model=“newbrand” 双向绑定
  2. 在data中声明newbrand成员
  3. 给“添加”按钮设置@click="add"事件
  4. 在methods中声明add方法，实现添加逻辑，用到了数据方法unshift,在数组的前边添加元素
  5. 在data中另行声明一个名称为xu的成员，记录已经存在品牌的最大id值，以便自增时给新品牌使用

模板代码：

<table>
  <tr>
    <td>
      <input type="text" v-model="newbrand" />
      <button @click="add">添加</button>
    </td>
    <td><input type="text" placeholder="请输入关键字"></td>
  </tr>
</table>

Vue实例代码：

  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        newbrand:'',  // 被添加的新品牌
        xu:13, // 已有品牌最大序号信息
        // 定义品牌列表信息,数组对象集
        brandList:[
          {id:10, name:'奔驰', ctime:new Date()},
          {id:11, name:'宝马', ctime:new Date()},
          {id:12, name:'奥迪', ctime:new Date()}
        ]
      },
      methods:{
        // 添加品牌
        add(){
          // 判断如果没有输入品牌这停止添加
          if(this.newbrand.trim().length===0){return false}

          // 把新品牌做成是对象格式
          var obj = {id:this.xu++, name:this.newbrand, ctime:new Date()}
          // 把obj通过数组元素形式添加给brandList大数组
          // 数组.push(元素)后缀追加  数组.unshift(元素)前置追加
          this.brandList.unshift(obj)

          // 清除添加好的品牌
          this.newbrand = ''
        }
      }
    })
  </script>

注意：

​ 添加新品牌的xu序号，是临时设置的，真实项目中不用维护，数据库会自动生成

vue指令-v-for-:key介入

在vue中v-for做遍历应用时，都需要与:key一并进行使用

在2.2.0+版本里边，v-for使用的同时必须使用:key，以便vue能准确跟踪每个节点，从而重用和重新排序现有元素，你需要为每个数据项提供一个唯一的、代表当前项目的属性值赋予给key

语法：

<标签 v-for="" :key="可以代表每个项目的唯一的值"></标签>

应用：

给品牌列表的v-for设置:key使用

<tr v-for="(item,k) in brandsList" :key="item.id">

项目应用中，每个v-for必须结合:key一并使用

注意：

  1. :key不设置，也是存在的，默认绑定每个项目下标序号信息
  2. key是一个普通属性，前边设置**:冒号**，代表属性绑定
最美是初见
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门
Dear_Mr的博客
05-14 3589
Vue实例构造器每个Vue.js应用都是通过构造函数vue创建一个Vue的根实例启动的：var vm = new Vue({ //选项 });Vue.js没有完全遵循MVVM模式，Vue的设计无疑是收到了它的启发。因为在文档中经常会使用vm（viewModel的简称）这个变量名表示Vue实例在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项可以扩展
vue的指令
zongshao9的博客
04-28 956
注意:前端Vue需导入vue.min.js文件 1.{{ }}插值表达式，绑定vue中的data数据 (1)显示标题源代码: (2)网页显示结果: 、 2.v-bind指令和v-model指令 (1)源代码: (2)网页显示结果: ①v-bind指令(单向绑定数据)网页显示结果: ②v-model指令(双向绑定数据)网页显示结果: 3.条件指令(1)v-if (2)v-else (1)源代码: (2)网页显示结果: 4.v-for指令: (1)源代码.
【vue】vue路由传参的三种方式
weixin_42762167的博客
02-27 2002
【vue】vue路由传参的三种方式 &lt;article class="baidu_pl"&gt; &lt;div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post
vue中export default 在console中是this.$vm
weixin_34004576的博客
06-14 996
vue中export default 在console中是this.$vm 用vue-cli搭出框架，用webstorm进行开发，参考vue2的官网进行教程学习， 在vue-cli中是用es6的export default写法写的，所以vue2教程中的   var app2 = new Vue({     msg:'Weilcome !!'   }) 就变为了 export default{   ...
Vue事件的基本使用
qq_46582421的博客
11-08 246
事件的基本使用: 1.使用v-on:Xxx或@xx绑定事件，其中xx是事件名: 2.事件的回调需要配置在methods对象中，最终会在vm上; 3. methods中配置的函数，不要用箭头函数!否则this就不是vm了; 4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象; 5.@click=“demo"和@click=” demo($event)"效果一致， 但后者可以传参; 代码： <!DOCTYPE html> <html lang="en
Vue之事件相关
玉案轩窗的博客
01-26 899
前言 本篇文章带来Vue.js的事件机制，具体的分析点如下： $emit、$on、$off、$once背后的处理逻辑 @click形式背后的处理逻辑 具体逻辑梳理 实际上在 Vue初始化 这篇文章中就提及了事件相关实例方法的创建，这里就在具体说下。 在Vue.js文件加载执行，其中会执行eventsMixin函数，该函数的作用就是： 创建事件相关的的原型方法，即$on、$once、$off、...
vue指令
skr_Rany的博客
09-22 124
v-text 更新元素的 textContent <span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span> v-show 与v-if一样，v-show的真假控制的是css属性display，block和none <span v-show="false"></span> v-if 操作的时dom,当值为true，false时，分别销毁和创
vue自定义指令实现方法详解
10-17
在Vue中，自定义指令（Custom Directives）是一个强大的特性，它允许我们扩展Vue的内置指令，如v-on、v-bind等，来实现更复杂的DOM操作。下面我们将详细探讨Vue自定义指令的定义、注册和使用方法。 ### 一、定义...
vue内置指令详解
08-27
Vue 内置指令是 Vue 模板中最常用的功能之一，它们带有前缀 v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。下面将详细介绍 Vue 内置指令的使用方法和应用场景。 一、v-bind 指令 v-bind ...
Vue自定义指令写法与个人理解
01-19
什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来...
简单理解vue中实例属性vm.$els
11-30
vue实例属性vm.$els到底是什么？有哪些需要注意的？具体请阅读本文。 不需要表达式 参数： id（必需） 用法： 为 DOM 元素注册一个索引，方便通过所属实例的 $els 访问这个元素。 注意： 因为 HTML 不区分大小写，camelCase 名字比如 v-el:someEl 将转为全小写。可以用 v-el:some-el 设置 this.$els.someEl。 我的理解：$els类似于document.querySelector(‘.class’)的功能,可以拿到指定的dom元素。 Eg: <div></div> var _dom = thi
Vue自定义指令详解
08-29
在Vue.js中，自定义指令是一种强大的机制，允许开发者将数据的变化映射为DOM行为。下面，我们将详细介绍Vue自定义指令的相关知识点。 注册自定义指令 在Vue.js中，可以使用`directive`方法注册一个全局的自定义...
vue源码学习（二）实例方法
zxl1990_ok的博客
11-24 637
vue源码版本为2.6.11（cdn地址为：https://lib.baomitu.com/vue/2.6.11/vue.js） 与事件相关的实例方法有4个，分别是vm.$$on，vm.$emit，vm.$once，vm.$off。这四个方法都是挂载在Vue的prototype属性上：
你就说，你明不明白JavaScript的关键字 this？
qq_35658349的博客
06-16 172
前言 最近，看了一篇关于JavaScript的关键字 this 的教学文章，收益甚多，因此，在这篇文章的基础上，稍微整理了一下，分享给大家。希望可以有助于学习JavaScript的童鞋，好好的理解 this 这个在JavaScript中最重要的关键字。 涵义 1. 定义 this就是属性或方法“当前”所在的对象。 this.property 上面代码中，this就代表property属性当前所在...
Vue学习第二节
Ccxing1的博客
12-15 1066
一、vue事件的基本使用 1：例如使用v-on:xxx或者 @xxx 来绑定事件。xxx为事件名称； <button v-on:click = "study(1)">按钮1</button> <button @click = "study1(1)">按钮2</button> 2:事件的回调需要配置在methods对象中最终会呈现在vm对象上； new Vue({ el: '#id', data: function.
Vue组件中方法的this一直指向vm，源码标记
guang_sszbs的博客
10-24 2618
Vue组件中的方法this固定指向当前组件Vm 具体的原因是源码中使用了装饰者模式进行了this强制绑定
Vue学习笔记二
qq_1763467007的博客
10-27 614
1、vue的数据代理   通过vm对象来代理data对象中属性的操作（读/写）   Vue中数据代理的好处：更加方便的操作data中的数据 基本原理：   通过Object.defineProperty()把data对象中所有属性添加到vm上。   为每一个添加到vm上的属性，都指定一个getter/setter。   在getter/setter内部去操作（读/写）data中对应的属性 <!DOCTYPE html> <html> <head> <meta
vue学习第二天（VM里的this指针、data的监听自身刷新页面、事件修饰符）
b704465039的博客
07-23 991
vue学习第二天 使用字符串截取制作简单效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
在vue中 自定义指令
最新发布
08-16
在Vue中，自定义指令是一种能够扩展已有的HTML元素或者Vue组件的功能的方式。你可以使用自定义指令来直接操作DOM、添加事件监听器、应用动画效果等。 要创建一个自定义指令，你可以使用Vue实例的`directive`方法。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值