vue指令相关的

.array p { counter-increment: longen; margin-left: 10px }
.array p::before { content: counter(longen) "." }
.alink { font-size: 16px; color: blue }

阅读目录

  • 1.v-text
  • 2.v-html
  • 3.v-show
  • 4.v-if
  • 5.v-if vs v-show
  • 6.v-else
  • 7.v-for
  • 8.v-on
  • 9.v-bind 和 v-model
  • 10.v-pre
  • 11.v-once

回到顶部

1.v-text

1. v-text {string} 更新元素的textContent 如下代码：
<span v-text=‘msg‘></span>
<!-- 其实和下面的写法一样的 -->
<span>{{ msg }}</span>

如下demo代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      <span v-text=‘msg‘></span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: ‘#demo‘,
      data: {
        msg: ‘aa‘
      }
    })
  </script>
</html>

查看demo

回到顶部

2.v-html

2. v-html {string} 更新元素的 innerHTML.
作用是：在网站上动态渲染任意的html是非常危险的，因为容易导致XSS攻击，在可信的内容使用v-html,可以防止发生。
还有一个地方就是后端返回的json数据，如果包含html这些标签的话，如果按照普通的html文本插入的话，会把html标签显示出来，但是使用v-html可以
很好的解决这个问题，如下demo：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      <span v-html=‘innerhtml‘></span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: ‘#demo‘,
      data: {
        innerhtml: ‘aaaaaa<i style="color: red;">122334</i>‘
      }
    })
  </script>
</html>

查看demo

回到顶部

3.v-show

作用是： 根据表达式是否有值，切换元素的 display css属性。
如下代码空字符串的话，就不显示内容，但是如果字符串有任何值的话，都显示内容。

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      <span v-show=‘msg‘>1111111</span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: ‘#demo‘,
      data: {
        msg: ‘‘
      }
    })
  </script>
</html>

查看demo

回到顶部

4.v-if

作用：根据表达式的是否有值来渲染元素，在切换元素时及它的数据绑定/组件被销毁并且重建。
如下demo

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      <span v-if=‘msg‘>1111111</span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: ‘#demo‘,
      data: {
        msg: ‘‘
      }
    })
  </script>
</html>

查看demo

回到顶部

5.v-if vs v-show

他们之间的区别是：v-if 是真正的 条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
比如如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      <span v-show=‘msg‘>1111111</span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: ‘#demo‘,
      data: {
        msg: ‘‘
      }
    })
  </script>
</html>

v-show 显示和隐藏直接 display:none, 页面的代码不会被销毁，如下代码：
<div id="demo"><span style="display: none;">1111111</span></div>
但是 v-if 不一样，它会重新创建和重新销毁，比如如果为false的话，span标签不会显示出来。
所以如果需要频繁的切换显示和隐藏的话，使用v-show比较好，如果使用的条件不太可能发生变化的情况下，使用v-if比较好。

回到顶部

6.v-else

作用是：前一兄弟元素必须有 v-if，含义是：如果.... 否则....
如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      <div v-if=‘msg‘>1111</div>
      <div v-else>2222</div>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: ‘#demo‘,
      data: {
        msg: ‘‘
      }
    })
  </script>
</html>

查看demo

回到顶部

7.v-for

7. v-for {Array | Object | number | string }
基于源数据多次渲染元素或模板块，就是遍历元素的意思；
如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      <div v-for=‘item in msg‘>
        {{ item.text }}
      </div>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: ‘#demo‘,
      data: {
        msg: [{‘text‘: 1}, {‘text‘: 2}]
      }
    })
  </script>
</html>

查看demo

当然也可以对数组进行遍历，我们可以为数组索引指定别名。

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      <div v-for=‘(item, index) in msg‘>
        {{ item }}
      </div>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: ‘#demo‘,
      data: {
        msg: [1, 2, 3]
      }
    })
  </script>
</html>
// 总之可以如下遍历：
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
// v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素,您需要提供一个 key 的特殊属性:
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

回到顶部

8.v-on

8. v-on
缩写：@
类型 Function
参数： event(required)
修饰符：
.stop 调用 event.stopPropagation()
.prevent 调用 event.preventDefault()
.capture 添加事件使用 capture模式
.self 只当事件是从监听器元素本身触发时才触发回调。
.{keyCode | keyAlias} 只当事件是从特定键触发时才触发的回调。
.native 监听组件根元素的原生事件。
.once 只触发一次回调。
.left 当点击鼠标左键时触发
.right 当点击鼠标右键时触发。
.middle 当点击鼠标中键时触发。

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat(‘hello‘, $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

// 在子组件上监听自定义事件（当子组件触发 “my-event” 时将调用事件处理器）
<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      <div v-for=‘(item, index) in msg‘ :key=‘item.id‘ @click=‘dothis‘>
        {{ item }}
      </div>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: ‘#demo‘,
      data: {
        msg: [1, 2, 3]
      },
      methods: {
        dothis: function() {
          alert(1)
        }
      }
    })
  </script>
</html>

查看demo

回到顶部

9.v-bind 和 v-model

9. v-bind
缩写： :
类型 {any}
作用：动态地绑定一个或多个特性。
如下代码：

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="‘/path/to/images/‘ + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + ‘px‘ }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, ‘other-attr‘: otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
<my-component :prop="someThing"></my-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

v-model 指令用在<input>, <select>, <textarea> 上可以实现双向绑定，vue实例中的data与其渲染的dom元素上的内容保持一致。

回到顶部

10.v-pre

10. v-pre
作用是：跳过这个元素和它的子元素的编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点会加快编译。
如下代码demo：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id=‘demo‘>
      <span v-pre>{{ msg }}</span>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    new Vue({
      el: ‘#demo‘,
      data: {
        msg: ‘aaa‘
      }
    })
  </script>
</html>

查看demo

当加上 v-pre 时，代码标签没有编译，直接显示 msg内容，如果去掉v-pre时候，就会编译。

回到顶部

11.v-once

只渲染元素和组件一次，随后重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。可用于优化更新性能。

如下代码：

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- v-for 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>
时间： 2024-11-05 18:56:41

vue指令相关的的相关文章

(尚016)Vue指令(11个自带指令+自定义指令)

1.Vue常用指令 1)v:text:更新元素的 textContent 2)v-html:更新元素的 innerHTML 3)v-if:如果为true,当前标签才会输出到页面 4)v-else:如果为false,当前标签才会输出到页面 5)v-show:通过控制display样式来控制显示/隐藏 6)v-for:遍历数组/对象(最终通过列表显示) 7)v-on:绑定事件监听,一般简写为@ 8)v-bind:强制绑定解析表达式,可以省略v-bind,简写为  : 9)v-model:双向数据绑定

第三篇：Vue指令

Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的标签自身内容会被替换掉( 123 会被num替换) v-html可以解析渲染html语法的内容 <div id="app"> <!-- 插值表达式 --> <p>{{ msg }}</p> <!-- eg:原文本会被msg替换 --&g

Vue指令总结---小白同学必看

今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪吧. v-text :string  用法:更新元素的textContent,更新部分的textContent,需要使用{{Mustache}}插值 v-html: string 用法:更新元素的innerHTML:注意:网站动态渲染任意HTML,容易导致XXS攻击 v-show:any 用法:根据

Vue指令实战：结合bootstrap做一个用户信息输入表格

结合前面的vue指令做了个小例子,用户在表单里面输入用户名和年龄,点击"添加"以后会保存到用户信息表里面 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-

VUE指令-样式绑定v-bind

样式绑定v-bind 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强.表达式结果的类型除了字符串之外,还可以是对象或数组. v-bind:style <!-- 格式v-bind:style="{ key:value }" --> <!--

VUE指令-列表渲染v-for

v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名. v-for="item in items" <!-- 格式v-for="item in items" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div s

VUE指令-数据绑定v-model

用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 JavaScript 在组件的 data选项中声明初始值. VUE

vue指令大全~~~

是的,这里有很全的vue指令使用~ 1.简单的vue应用 vue作为一个mvvm框架,想想为什么叫做mvvm? Model是负责数据的存储, View负责页面的展示 Model View 负责业务逻辑处理,对数据加工后视图展示 MVVM的作用是业务逻辑代码与视图代码完全分离,各自的职责更加清晰~ <body> <!--mvvm里面的v--> <div id="app"> {{val}} </div> <script src=&quo

Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定.MVVM设计模式.组件化开发.单页面应用 Vue环境:本地导入和cdn导入 2.Vue是渐进式js框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目.3.怎么使用vue 去官网下载然后导入 <div id="app">