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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
javascript this详细介绍
Sep 19 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
python基础练习之几个简单的游戏
2017/11/10 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
什么是会话Bean
2015/05/14 面试题
《音乐之都维也纳》教学反思
2014/04/16 职场文书
关于保护环境的标语
2014/06/09 职场文书
三问三解心得体会
2014/09/05 职场文书
2015年校长新年寄语
2014/12/08 职场文书
成本会计岗位职责
2015/02/03 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers