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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
javascript 计算两个整数的百分比值
Dec 26 Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
解决vue 退出动画无效的问题
Aug 09 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下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
layui使用label标签的方法
2019/09/14 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
python二元表达式用法
2019/12/04 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
《九色鹿》教学反思
2014/02/27 职场文书
高中教师评语大全
2014/04/25 职场文书
入党推优材料
2014/06/02 职场文书
大学英语专业求职信
2014/06/21 职场文书
2014年审计工作总结
2014/11/17 职场文书
自我检讨报告
2015/01/28 职场文书
暑假安全保证书
2015/02/28 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript