搜索
首页web前端js教程vue内置指令使用总结

vue内置指令使用总结

Apr 08, 2018 pm 02:17 PM
使用总结指令

这次给大家带来vue内置指令使用总结,vue内置指令使用的注意事项有哪些,下面就是实战案例,一起来看一下。

指令 (Directives) 是带有 v- 前缀的特殊属性, 职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

内置指令

1、v-bind:响应并更新DOM特性;例如:v-bind:href  v-bind:class  v-bind:title  等等

主要用法是绑定属性,动态更新HTML元素上的属性;

<a>...</a>
<!-- 缩写 -->
<a>...</a>
<p>标题</p>
var app = new Vue({
  el: '#app',
  data: { 
    url: 'www.baidu.com',
    title: 'bind'
  },
})

2、v-on:用于监听DOM事件; 例如:v-on:click  v-on:keyup

顺带讲一下方法与事件

2.1 @click 的表达式可以直接使用JavaScript 语句,也可以是一个在Vue 实例中methods 选项内的函数名,可以在方法中传递参数

<!-- 完整语法 -->
<a>...</a>
<!-- 缩写 -->
<a>...</a>    //是一个方法名
<p>一段文本</p>
<button>点击隐藏文本</button>  //直接是一个内联的语句
<button>Add 1</button>
var app = new Vue({
  el: '#app',
  data:{
    show: true,
    counter: 0
  },
  methods: {
    doSomething: function(){
      console.log(this.title);
    },
  }
})

2.2方法与事件:

Vue 提供了一个特殊变量$event ,用于访问原生DOM 事件,可以阻止事件冒泡或者阻止链接打开

写一个阻止冒泡的例子:

  <p>
      </p><p>
        </p><p>阻止冒泡</p>
      
    
  
methods:{
    stopClick3: function(message, event){
      console.log(message);
      event.stopPropagation();  //阻止冒泡
    },
    stopClick2: function(message, event){
      console.log(message);
    },
    stopClick1: function(message, event){
      console.log(message);
    }
}

2.3修饰符:

在@绑定的事件后加小圆点“.”,再跟一个后缀来使用修饰符。

上面的阻止冒泡事件,可以直接用户修饰符的方式写为:

<p>阻止冒泡</p>  //不用通过$event事件再来写了

常用的一些修饰符有:

• .stop

• .prevent

• .capture

• .self

• .once

< !一阻止单击事件冒泡一〉
<a></a>
〈!一修饰符可以串联一〉
<a></a>
〈!一添加事件侦听器时使用事件捕获模式一〉
<p> ... </p>
〈!一只当事件在该元素本身(而不是子元素) 触发时触发回调一〉
<p> ... </p>
< !一只触发一次,组件同样适用一〉
<p> ... </p>

在表单元素上监昕键盘事件时,还可以使用按键修饰符,比如按下具体某个键时才调用方法:

< !一只有在keyCode 是13 时调用vm.submit()一〉
<input><p style="text-align: left;">3、v-model:数据双向绑定;用于表单输入等;例如:</p><p style="text-align: left;">4、v-show:条件渲染指令,为DOM设置css的style属性</p><p style="text-align: left;">5、v-if:条件渲染指令,动态在DOM内添加或删除DOM元素</p><p style="text-align: left;">6、v-else:条件渲染指令,必须跟v-if成对使用</p><p style="text-align: left;">7、v-else-if:判断多层条件,必须跟v-if成对使用;</p><p style="text-align: left;">8、v-text:更新元素的textContent;例如:<span v-text="msg"></span> 等同于 {{msg}}  span>;</p><p style="text-align: left;">9、v-html:更新元素的innerHTML;会把标签名也带上。</p><p style="text-align: left;">10、v-for:循环指令;例如:</p><pre class="brush:php;toolbar:false"><p>
    </p>
          
  • { { book.name } }
  •     
   var app =new Vue({   el: '#app',   data: {     books: [       {name: ''},       {name: ''},       {name: ''}     ]   } });

10.1 v- for 的表达式遍历数组时支持一个可选参数作为当前项的索引, 例如:

  <p>
    </p>
          
  • {{ index}} - {{book.name })
  •     
  

10.2 v- for 的表达式遍历对象属性时,有两个可选参数,分别是键名和索引:

  <p>
    </p>
          
  •         { { index } } - { { key } } : { { value } }       
  •     
   var app = new Vue({   el: '#app',   data: {     name: 'Aresn',     grender: '男',     age:23   } });

10.3 v- for 的表达式还可以迭代整数:

 <p>
    <span>{{n}}</span>
  </p>

10.4 数组更新

当我们修改数组时, Vue 会检测到数据变化,所以用v-for 渲染的视图也会立即更新。

• push()
• pop()
• shift()
• unshit()
• splice()
• sort()
• reverse()

这些方法会改变被这些方法调用的原始数组

例如,我们将之前一个示例的数据books 添加一项:

app.books.push({
  name: '《css世界》'
});

有些方法不会改变原数组,例如:

• filter()
• concat()
• slice()

它们返回的是一个新数组,在使用这些非变异方法时,可以用新数组来替换原数组,如:

app.books = app.books.filter(function (item) {
  return item . name.match(/JavaScript/);
});

Vue 在检测到数组变化时,并不是直接重新渲染整个列表,而是最大化地复用DOM 元素。

替换的数组中,含有相同元素的项不会被重新渲染,因此可以大胆地用新数组来替换旧数组,不用担心性能问题。

10.5 过滤与排序

当你不想改变原数组,想通过一个数组的副本来做过滤或排序的显示时, 可以使用计算属性来返回过滤或排序后的数组 ,例如: 

  <p>
    </p>
               
   var app= new Vue({   el: '#app',   computed: {     filterBooks: function(){       return this.books.filter(function (book) {         return book.name.match(/JavaScript/);       })     },   } });

11、v-cloak:不需要表达式,这个指令保持在元素上直到关联实例结束编译; v-cloak 是一个解决初始化慢导致页面闪动的最佳实践 ;

12、v-once:也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。

首次渲染后,不再随数据的变化重新渲染,将被视为静态内容; v-once 在业务中也很少使用,当你需要进一步优化性能时,可能会用到。

13、v-pre:不需要表达式,跳过这个元素以及子元素的编译过程,以此来加快整个项目的编译速度;例如: {{ this will not be compiled }} span>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样使用FileReader API创建Vue的文件阅读器

Vue中的slots/scoped slots应该如何使用

以上是vue内置指令使用总结的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
幕后:什么语言能力JavaScript?幕后:什么语言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行,依赖JavaScript引擎解析和执行代码。1)解析阶段生成抽象语法树(AST);2)编译阶段将AST转换为字节码或机器码;3)执行阶段执行编译后的代码。

Python和JavaScript的未来:趋势和预测Python和JavaScript的未来:趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括:1.Python将巩固在科学计算和AI领域的地位,2.JavaScript将推动Web技术发展,3.跨平台开发将成为热门,4.性能优化将是重点。两者都将继续在各自领域扩展应用场景,并在性能上有更多突破。

Python vs. JavaScript:开发环境和工具Python vs. JavaScript:开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗?检查证据JavaScript是用C编写的吗?检查证据Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C和JavaScript:连接解释C和JavaScript:连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

从网站到应用程序:JavaScript的不同应用从网站到应用程序:JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python vs. JavaScript:比较用例和应用程序Python vs. JavaScript:比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。