Vue常用的几个指令附完整案例

 更新时间:2018-11-06 15:00:43   作者:佚名   我要评论(0)

越来越多的人在用Vue,刚开始接触vue的话常接触的指令就几个,统一归纳一下,做个demo演示。
指令
v-text

v-html

v-bind

v-on

v-model

v-for


越来越多的人在用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里建立长按指令
  • vue指令只能输入正数并且只能输入一个小数点的方法
  • 基于Vue自定义指令实现按钮级权限控制思路详解
  • 浅析vue中常见循环遍历指令的使用 v-for
  • 使用Vue开发一个实时性时间转换指令
  • 解决vue组件中使用v-for出现告警问题及v for指令介绍
  • 详解Vue用自定义指令完成一个下拉菜单(select组件)
  • 详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
  • VUE元素的隐藏和显示(v-show指令)
  • 浅谈 Vue v-model指令的实现原理
  • vue 中自定义指令改变data中的值

相关文章

  • Vue常用的几个指令附完整案例

    Vue常用的几个指令附完整案例

    越来越多的人在用Vue,刚开始接触vue的话常接触的指令就几个,统一归纳一下,做个demo演示。 指令 v-text v-html v-bind v-on v-model v-for 代
    2018-11-06
  • 微信小程序自定义tabBar组件开发详解

    微信小程序自定义tabBar组件开发详解

    本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下 以下代码保存在github地址 先看一看目录 template文件夹里存放tabb
    2018-11-06
  • 易语言截取当前窗口图片功能

    易语言截取当前窗口图片功能

    快照命令 英文命令:GetWinPic 操作系统支持:Windows 所属类别:系统处理 为高级用户提供,初级用户无需掌握; 捕获指定窗口或屏幕上所有现有显示内容,返回
    2018-11-06
  • 利用JavaScript缓存远程窃取Wi-Fi密码的思路详解

    利用JavaScript缓存远程窃取Wi-Fi密码的思路详解

    我一直想在这个小项目上花一些时间做一些研究,但是由于生活所迫让我总是一直繁忙。现在我终于可以抽出一些时间了继续研究这种攻击技术了,我将在本文中阐
    2018-11-05
  • windows10系统安装mysql-8.0.13(zip安装) 的教程详解

    windows10系统安装mysql-8.0.13(zip安装) 的教程详解

    安装环境说明 &#8226;系统版本:windows10 &#8226;mysql版本:mysql-8.0.13-winx64.zip &#8226;下载地址:http://mirrors.163.com/mysql/Downloads/MySQL
    2018-11-05
  • 易语言获取当前是几月份的方法

    易语言获取当前是几月份的方法

    这个功能要用到以下几个命令: 到时间命令 取现行时间命令 取月份命令 例程 说明 首先将编辑框中输入的时间转换成日期时间型的数据,然后用“取月份
    2018-11-05
  • Centos7 安装mysql 8.0.13(rpm)的教程详解

    Centos7 安装mysql 8.0.13(rpm)的教程详解

    yum or rpm? yum安装方式很方便,但是下载mysql的时候从官网下载,速度较慢。 rpm安装方式可以从国内镜像下载mysql的rpm包,比较快。rpm也适合离线安装。 环
    2018-11-05
  • c#和java base64不一致的解决方法

    c#和java base64不一致的解决方法

    本文主要介绍了关于c#和java base64不一致的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 不一致的问题不是编码的问题 而是j
    2018-11-05
  • 易语言将十进制数值转换为八进制文本的方法

    易语言将十进制数值转换为八进制文本的方法

    取八进制文本命令 英文命令:oct 操作系统支持:Windows、Linux 所属类别:数值转换 返回一个文本,代表指定数值的八进制形式。 语法: 文本型 取八进制
    2018-11-05
  • 易语言将指定数据类型转换为字节集类型

    易语言将指定数据类型转换为字节集类型

    到字节集命令 英文命令:ToBin 操作系统支持:Windows、Linux 所属类别:字节集操作 将指定数据转换为字节集后返回转换结果。 语法: 字节集 到字节集
    2018-11-05

最新评论