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 Event学习第六章 事件的访问
Feb 07 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
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错误和异长常处理总结
2014/03/06 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
一文读懂Python 枚举
2020/08/25 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
《雨点》教学反思
2014/02/12 职场文书
家教广告词
2014/03/19 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
年底个人总结范文
2015/03/10 职场文书
开除通知书范本
2015/04/25 职场文书
千手观音观后感
2015/06/03 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
无故旷工检讨书
2015/08/15 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python