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 相关文章推荐
JS隐藏参数post传值实例
Apr 18 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
vue实现评论列表功能
Oct 25 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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
如何删除多级目录
2006/10/09 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
javascript学习之闭包分析
2010/12/02 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
js实现随机数小游戏
2019/06/28 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
python绘制热力图heatmap
2020/03/23 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
java字符串格式化输出实例讲解
2021/01/06 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
简述安装Slackware Linux系统的过程
2012/05/08 面试题
网络工程专业大学生求职信
2014/10/01 职场文书
银行授权委托书范本
2014/10/04 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
《法国号》教学反思
2016/02/22 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
PHP获取学生成绩的方法
2021/11/17 PHP
Java无向树分析 实现最小高度树
2022/04/09 Javascript
nginx容器方式反向代理实战
2022/04/18 Servers