v-text:更新元素的text内容

  1. <template>
  2. <div class="about">
  3. <p v-text="msg"></p>
  4. <!--和下面效果一样-->
  5. <p>{{msg}}</p>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. components: {MyList},
  11. data: ()=> ({
  12. msg: '更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。'
  13. })
  14. }
  15. </script>

页面:

v-html:更新元素的innerHTML,这里面的内容不会作为Vue模板编译

  1. <template>
  2. <div class="about">
  3. <!--v-html 内容不会被处理-->
  4. <p v-html="msg"></p>
  5. <!--v-text 内容会被作为vue模板编译-->
  6. <p v-text="msg"></p>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. data: ()=> ({
  12. msg: '<h1>在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。</h1>' +
  13. '<h1>只在可信内容上使用 v-html,永不用在用户提交的内容上。</h1>'
  14. })
  15. }
  16. </script>

页面:

v-show:根据表达式之真假值,切换元素的 display CSS 属性

  1. <template>
  2. <div class="about">
  3. <p v-show="flag" v-text="msg"></p>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. data: ()=> ({
  9. flag: true,
  10. msg: '根据表达式之真假值,切换元素的 display CSS 属性'
  11. })
  12. }
  13. </script>

页面:

v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

  1. <template>
  2. <div class="about">
  3. <p v-if="flag" v-text="msg"></p>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. data: ()=> ({
  9. flag: true,
  10. msg: '根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。'
  11. })
  12. }
  13. </script>

页面:

如果flag=false,那么元素不会被渲染

v-else:前一兄弟元素必须有 v-if 或 v-else-if

  1. <template>
  2. <div class="about">
  3. <p v-if="flag" v-text="msg"></p>
  4. <p v-else>我是穷逼</p>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. data: ()=> ({
  10. flag: false,
  11. msg: '我很有钱'
  12. })
  13. }
  14. </script>

页面:

v-else-if:前一兄弟元素必须有 v-if 或 v-else-if

  1. <template>
  2. <div class="about">
  3. <p v-if="flag == 1">{{msg}}</p>
  4. <p v-else-if="flag == 2">我假装我很有钱</p>
  5. <p v-else>我是穷逼</p>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. data: ()=> ({
  11. flag: 2,
  12. msg: '我很有钱'
  13. })
  14. }
  15. </script>

页面:

v-for

  1. <template>
  2. <div class="about">
  3. <div v-for="(item,index) in items">
  4. {{index}} -- {{ item }}
  5. </div>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. data: ()=> ({
  11. items: ['鱼香肉丝','宫保鸡丁','炖排骨']
  12. })
  13. }
  14. </script>

页面:

v-on:事件处理

缩写:@

修饰符:

  1. .stop - 阻止事件冒泡
  2. .prevent - 阻止默认事件
  3. .capture
  4. .self
  5. .once - 只触发一次回调。
  6. .passive
  7. .native - 监听组件根元素的原生事件。
  8.  
  9. 按键修饰符
  10. .enter
  11. .tab
  12. .delete (捕获“删除”和“退格”键)
  13. .esc
  14. .space
  15. .up
  16. .down
  17. .left
  18. .right
  19.  
  20. 系统修饰键
  21. .ctrl
  22. .alt
  23. .shift
  24. .meta - Mac 系统键盘上,meta 对应 command (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)
  25.  
  26. 鼠标按钮修饰符
  27. .left
  28. .right
  29. .middle

代码

  1. <template>
  2. <div class="about" @click="parentClick">
  3. <button @click="aClick">普通点击事件</button>
  4. <br><br>
  5. <button @click.stop="bClick">阻止冒泡事件</button>
  6. <br><br>
  7. <a href="https://www.qq.com/" @click.stop.prevent="cClick">阻止默认事件</a>
  8. <br><br>
  9. <button @click.once="dClick">执行一次事件</button>
  10. <br><br>
  11. <input @keyup.enter="eClick" placeholder="有本事按Enter"/>
  12. <br><br>
  13. <input @click.stop.ctrl="fClick" placeholder="有本事按Ctrl+Click"/>
  14. <br><br>
  15. <input @keydown.ctrl.alt="gClick" placeholder="有本事按Ctrl+Alt"/>
  16. <br><br>
  17. <button @click.stop.left="hClick">鼠标左键事件</button>
  18. </div>
  19. </template>
  20. <script>
  21. export default {
  22. methods: {
  23. parentClick: function () {
  24. alert('父元素点击事件')
  25. },
  26. aClick: function () {
  27. alert('普通点击事件')
  28. },
  29. bClick: function () {
  30. alert('点击之后,不再继续冒泡到父元素')
  31. },
  32. cClick: function () {
  33. alert('点击之后,不再触发默认跳转事件')
  34. },
  35. dClick: function () {
  36. alert('只能点击一次,你再也不能看见我')
  37. },
  38. eClick: function () {
  39. alert('监听回车事件')
  40. },
  41. fClick: function () {
  42. alert('监听Ctrl+Click事件')
  43. },
  44. gClick: function () {
  45. alert('监听Ctrl+Alt事件')
  46. },
  47. hClick: function () {
  48. alert('监听鼠标左键事件')
  49. },
  50. }
  51. }
  52. </script>

页面:

v-bind:动态绑定

缩写:   :

  1. <template>
  2. <div class="about">
  3. <!--绑定src属性-->
  4. <img :src="imgSrc"/>
  5. <!--绑定class:数组方式-->
  6. <div :class="[myClass]"></div>
  7. <!--绑定class:class 存在与否将取决于数据属性 active-->
  8. <div :class="[myClass,{'area-active': active}]"></div>
  9. <div style="text-align: center">
  10. <!--:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名-->
  11. <span :style="{display: 'inline-block',width: width1 + 'px',height: width1 + 'px',backgroundColor: color1}"></span>
  12. <span :style="{display: 'inline-block',width: width2 + 'px',height: width2 + 'px',backgroundColor: color2}"></span>
  13. <!--:style 的数组语法-->
  14. <span :style="[styleObject]"></span>
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. export default {
  20. data: ()=> ({
  21. styleObject: {
  22. display: 'inline-block',
  23. width: '150px',
  24. height: '150px',
  25. 'background-color': '#2990c4'
  26. },
  27. width1: 50,
  28. color1: '#12BC99',
  29. width2: 100,
  30. color2: '#9455bc',
  31. active: true,
  32. myClass: 'area',
  33. imgSrc: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=935292084,2640874667&fm=27&gp=0.jpg'
  34. })
  35. }
  36. </script>
  37. <style scoped>
  38. .area{
  39. margin: 8px auto;
  40. width: 50px;
  41. height: 50px;
  42. background-color: darkcyan;
  43. }
  44. .area-active{
  45. background-color: crimson;
  46. }
  47. </style>

页面:

v-model:表单绑定

  1. 限制:
  2. <input>
  3. <select>
  4. <textarea>
  5. components
  6. 修饰符:
  7. .lazy - 取代 input 监听 change 事件
  8. .number - 输入字符串转为有效的数字
  9. .trim - 输入首尾空格过滤
  1. <template>
  2. <div class="about">
  3. <div>Message is: {{msg}}</div>
  4. <br/>
  5. <input v-model="msg"/>
  6. <br/><br/>
  7. <!--textarea绑定-->
  8. <textarea v-model="msg" cols="80" rows="5"></textarea>
  9. <br/><br/>
  10. <!--复选-->
  11. <input type="checkbox" v-model="checked">
  12. <label for="checkbox">{{ checked }}</label>
  13. <br/><br/>
  14. <!--复选数组-->
  15. <div>
  16. <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  17. <label for="jack">Jack</label>
  18. <input type="checkbox" id="john" value="John" v-model="checkedNames">
  19. <label for="john">John</label>
  20. <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  21. <label for="mike">Mike</label>
  22. <br>
  23. <span>Checked names: {{ checkedNames }}</span>
  24. </div>
  25. <br/><br/>
  26. <!--单选数组-->
  27. <div>
  28. <input type="radio" id="one" value="One" v-model="picked">
  29. <label for="one">One</label>
  30. <br>
  31. <input type="radio" id="two" value="Two" v-model="picked">
  32. <label for="two">Two</label>
  33. <br>
  34. <span>Picked: {{ picked }}</span>
  35. </div>
  36. <br/><br/>
  37. <!--select的绑定-->
  38. <div>
  39. <select v-model="selected">
  40. <option v-for="option in options" v-bind:value="option.value">
  41. {{ option.text }}
  42. </option>
  43. </select>
  44. <span>Selected: {{ selected }}</span>
  45. </div>
  46. <br/><br/>
  47. <!--自动将用户的输入值转为数值类型-->
  48. <input type="number" v-model.number="age"/>
  49. <span>{{typeof age}}</span>
  50. <br/><br/>
  51. <!--自动过滤用户输入的首尾空白字符-->
  52. <input v-model.trim="msgs">
  53. <p>{{msgs}}</p>
  54.  
  55. <!--取消实时同步-->
  56. <input v-model.lazy="lmsgs">
  57. <p>{{lmsgs}}</p>
  58. <br/><br/>
  59. </div>
  60. </template>
  61. <script>
  62. export default {
  63. data: ()=> ({
  64. age: 10,
  65. selected: '',
  66. options: [
  67. { text: 'One', value: 'A' },
  68. { text: 'Two', value: 'B' },
  69. { text: 'Three', value: 'C' }
  70. ],
  71. picked: [],
  72. checkedNames: [],
  73. checked: false,
  74. msg: '你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。',
  75. msgs: '',
  76. lmsgs: '',
  77. })
  78. }
  79. </script>

页面:

v-pre:跳过这个元素和它的子元素的编译过程。

  1. <template>
  2. <div class="about">
  3. <div v-pre>{{这里面的内容不会被编译}}</div>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. data: ()=> ({
  9.  
  10. })
  11. }
  12. </script>

页面:

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

  1. <template>
  2. <div class="about">
  3. <div v-once>{{msg}}</div>
  4. <input v-model="msg"/>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. data: ()=> ({
  10. msg: '这里只编译一次'
  11. })
  12. }
  13. </script>

页面

之后再改变数据模型,v-once部分不会再改变

Vue(三)指令的更多相关文章

  1. vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法

    首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...

  2. vue的指令

    我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new  Vue({          el: "#box", // element(元素) 当前作 ...

  3. vue之指令

    一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...

  4. vue之指令篇 ps简单的对比angular

    这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统 难度系数:ng的指令难度大于vue:至少vue上暂时没发现@&=:require,compile,precom ...

  5. 第3章-Vue.js 指令扩展 和 todoList练习

    一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...

  6. 第2章-Vue.js指令

    一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...

  7. Vue的指令以及组件化开发

    一. 自定义指令 如何: 1. 创建指令 Vue.directive("指令名",{ inserted(elem){//指令所在的元素被加载到DOM树上后自动执行指令 //elem ...

  8. 使用Vue自定义指令实现Select组件

    完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...

  9. Vue的指令和成员

    目录 Vue的指令和成员 指令 表单 斗篷 条件 循环 成员 计算成员 监听成员 Vue的指令和成员 指令 表单 表单指令一般是和属性指令联合使用的,最常见的就是v-model="变量&qu ...

  10. Vue自定义指令 数据传递

    在项目开发过程中,难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 .关于directive的使用方式这里就不做过多的介绍了,Vue官方文档中说的还是听明白的.今天讲讲在使用V ...

随机推荐

  1. python 练习 后台返回当前时间

    新建一个 current_time.html 文件, !cur_time! 用来替换 <!DOCTYPE html> <html lang="en"> &l ...

  2. Odoo 10的Linux安装

    CentOS7安装Odoo10流程如下一.更新系统#yum clean all#yum update 二.安装 PostgreSQL 1.安装数据库#yum install postgresql po ...

  3. Webpack 4教程 - 第六部分 增强开发时体验

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/08/06/webpack-4-course-part ...

  4. pyltp安装踩坑记录

    LTP(Language Technology Platform)由哈工大社会计算与信息检索研究中心开发,提供包括中文分词.词性标注.命名实体识别.依存句法分析.语义角色标注等丰富. 高效.精准的自然 ...

  5. 安卓9.0系统机器(亲测有效)激活Xposed框架的步骤

    对于喜欢玩手机的哥们来说,经常会用到xposed框架及其种类繁多功能无敌的模块,对于5.0以下的系统版本,只要手机能获得root权限,安装和激活xposed框架是非常简便的,但随着系统版本的持续更新, ...

  6. 荣耀5.0以上手机(亲测有效)激活xposed框架的经验

    对于喜欢搞机的朋友而言,大多时候会使用到xposed框架及其种类繁多功能强悍的模块,对于5.0以下的系统版本,只要手机能获得Root权限,安装和激活xposed框架是非常简便的,但随着系统版本的不断迭 ...

  7. Ionic3关闭弹出页面,跳转到列表后刷新父页面

    记得上次写过一篇如何弹出页面的文章,好像是2月28号ionic3 Modal组件那一篇,这篇也算那一篇的续集吧!这篇是弹出的页面关闭后刷新父页面的干活!上代码! 弹出页面:(关闭的时候可以传入值,再父 ...

  8. java 易错选择题 编辑中

    1 System.out.println(int(a+b)); 编译错误  应该是(int)(a+b) 2 String s="john"+3; 是正确的,结果就是 john3 3 ...

  9. 【Python实战】模块和包导入详解(import)

    1.模块(module) 1.1 模块定义 通常模块为一个.py文件,其他可作为module的文件类型还有".pyo".".pyc".".pyd&qu ...

  10. sprintboot 中占位符及多环境配置

    (原) 关于springboot中多环境配置问题 1.在application.properties文件中通过 spring.profiles.active=... 选择系统所要加载的配置文件,这里的 ...