Vue常用的几个指令附完整案例


Posted in Javascript onNovember 06, 2018

越来越多的人在用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常用的几个指令附完整案例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript iframe的相互操作浅析
Oct 14 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
vue.js实现简单轮播图效果
Oct 10 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 #Javascript
100行代码实现一个vue分页组功能
Nov 06 #Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 #Javascript
Vue递归实现树形菜单方法实例
Nov 06 #Javascript
electron中使用bootstrap的示例代码
Nov 06 #Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 #Javascript
浅谈Vue数据响应思路之数组
Nov 06 #Javascript
You might like
php tp验证表单与自动填充函数代码
2012/02/22 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
JSON 学习之完全手册 图文
2007/05/29 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
办公室文书岗位职责
2013/12/16 职场文书
经销商培训邀请函
2014/01/21 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
信息工作经验交流材料
2014/05/28 职场文书
个人剖析材料范文
2014/09/30 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
消防安全主题班会
2015/08/12 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
2019年大学推荐信
2019/06/24 职场文书