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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
js实现简单选项卡功能
Mar 23 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
代码整洁之道(重构)
Oct 25 Javascript
JavaScript实现简单动态表格
Dec 02 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世纪万年历
2006/12/06 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
[JS]点出统计器
2020/10/11 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python实现全角半角字符互转的方法
2016/11/28 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
英语翻译系毕业生求职信
2013/09/29 职场文书
企业法人授权委托书
2014/04/03 职场文书
个园导游词
2015/02/04 职场文书
工作自我评价范文
2019/03/21 职场文书