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 相关文章推荐
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
js实现飞机大战小游戏
Aug 26 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
多重?l件?合查?(一)
2006/10/09 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
Python变量和数据类型详解
2017/02/15 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
Python 变量的创建过程详解
2019/09/02 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
详解Python 中的容器 collections
2020/08/17 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
创先争优活动方案
2014/02/12 职场文书
购房协议书
2014/04/11 职场文书
会计岗位职责范本
2015/04/02 职场文书
信仰观后感
2015/06/03 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
mysql创建存储过程及函数详解
2021/12/04 MySQL
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python