首页 / VUE / Vue常用的几个指令附完整案例
Vue常用的几个指令附完整案例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue常用的几个指令附完整案例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2228字,纯文字阅读大概需要4分钟。
内容图文
![Vue常用的几个指令附完整案例](/upload/InfoBanner/zyjiaocheng/335/7140515a9e81420d9a0b86730c15d2ad.jpg)
越来越多的人在用Vue,刚开始接触vue的话常接触的指令就几个,统一归纳一下,做个demo演示。
指令
v-text
v-html
v-bind
v-on
v-model
v-for
代码
学习技术最好还是要看下代码是什么样的。
v-text
解释:更新DOM对象的 textContent
<h1 v-text="msg"></h1>
v-html
解释:更新DOM对象的 innerHTML
<h1 v-html="msg"></h1>
v-bind
作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
语法:
v-bind:title="msg" // 简写::title="msg" <!-- 完整语法 --> <a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a> <!-- 缩写 --> <a :href="url" rel="external nofollow" rel="external nofollow" ></a>
v-on
作用:绑定事件
语法:v-on:click="say" or v-on:click="say('参数', $event)"
简写:@click="say"
说明:绑定的事件定义在methods
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
v-model
作用:在表单元素上创建双向数据绑定
说明:监听用户的输入事件以更新数据
案例:计算器
<input type="text" v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>
v-for
作用:基于源数据多次渲染元素或模板块
<div v-for="item in items"> {{ item.text }} </div> <!-- item 为当前项,index 为索引 --> <p v-for="(item, index) in list">{{item}} -- {{index}}</p> <!-- item 为值,key 为键,index 为索引 --> <p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
完整案例
<template> <div> <p v-text="msgData"></p> <p>{{ msgData }}</p> <p v-text="msgHtml"></p> <p v-html="msgHtml"></p> <input v-model="msgModel" type="text"/> <p>v-model数据:<span v-text="msgModel"></span></p> <button v-on:click="alert">按钮</button> <p v-for="(item, index) in list" :key="index">{{item}} -- {{index}}</p> </div> </template> <script> export default { data () { return { message: 'Vue的生命周期', msgData: '消息数据', msgHtml: '<span style="color: red">消息HTML</span>', msgModel: '', list: [ 'apple', 'banana', 'fruit' ] } }, methods: { alert () { this.$notify({ title: '请求异常', message: '通知' }) } }, mounted: function () { console.log('------mounted 挂载结束状态------') }, } </script>
Note:代码是在脚手架的项目中写的。
效果如下:
结束
介绍几个基本的指令用法,更多指令参考官方文档
参考
Vue官方参考
总结
以上所述是小编给大家介绍的Vue常用的几个指令附完整案例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
内容总结
以上是互联网集市为您收集整理的Vue常用的几个指令附完整案例全部内容,希望文章能够帮你解决Vue常用的几个指令附完整案例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。