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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 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合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
js比较日期大小的方法
2015/05/12 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
python实现指定字符串补全空格的方法
2015/04/30 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
分析python请求数据
2018/08/19 Python
超简单的Python HTTP服务
2019/07/22 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
数控专业个人求职信范例
2013/11/29 职场文书
化学教师自荐信范文
2013/12/28 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
爱耳日活动总结
2014/04/30 职场文书
医院合作协议书
2014/08/19 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
pytorch 使用半精度模型部署的操作
2021/05/24 Python
最新最全的手机号验证正则表达式
2022/02/24 Javascript
Vue监视数据的原理详解
2022/02/24 Vue.js