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 Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 Javascript
Rust中的Struct使用示例详解
Aug 14 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 和 XML: 使用expat函数(一)
2006/10/09 PHP
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
php while循环控制的简单实例
2016/05/30 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
javascript的函数
2007/01/31 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
vue登录注册实例详解
2019/09/14 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
python模块常用用法实例详解
2019/10/17 Python
Python图片的横坐标汉字实例
2019/12/04 Python
美国健康和保健平台:healtop
2020/07/02 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
法人代表授权委托书
2014/04/08 职场文书
初一学生期末评语
2014/04/24 职场文书
厨房管理计划书
2014/04/27 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
城南旧事读书笔记
2015/06/29 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript