Vue.js常用指令的使用小结


Posted in Javascript onJune 23, 2017

1.数据渲染:v-text、v-html、{{}}

1.1 v-text

详细:更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。

实例:

<div id="app">
 <p v-text="message"></p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      message:'Hello World!'
    }
  });
</script>

1.2 {{}} 和上面的v-text效果一样

实例:

<div id="app">
 <p>{{message}}</p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      message:'Hello World!'
    }
  });
</script>

1.3 v-html

详细:更新元素的 innerHTML 。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用v-html 组合模板,可以重新考虑通过是否通过使用组件来替代。

注意:在网站上动态渲染任意 HTML 是非常危险的,因为容易导致XSS攻击。只在可信内容上使用v-html,永不用在用户提交的内容上。

实例:

<div id="app">
 <p v-html="message"></p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      message:'<h5>hello vue.js</h5>'
    }
  });
</script>

2.条件渲染 控制模板隐藏:v-show 、v-if、v-else

2.1 v-show

用法:根据表达式之真假值,切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。

注意: v-show 不支持 <template> 语法

实例:

<div id="app">
 <p v-show="isShow">
  show
 </p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      isShow:true
    }
  });
</script>

2.2 v-if

v-show和v-if大体效果相同,不同的是:v-show的元素会始终渲染并保持在DOM中。

用法:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ,

将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。

实例:

<div id="app">
 <p v-if="isShow">
  show
 </p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      isShow:false
    }
  });
</script>

 2.3 v-else

限制:前一兄弟元素必须有 v-if 或 v-else-if

用法:为v-if 或者v-else-if 添加 “else 块”

<div id="app">
 <p v-if="isShow">show</p>
 <p v-else>hide</p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      isShow:true
    }
  });
</script>

2.4 v-else-if

<div id="app">
 <p v-if="type === 'a'">A</p>
 <p v-else-if="type==='b'">B</p>
 <p v-else>C</p>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
      type:'b',
    }
  });
</script>

3. v-for 渲染循环列表

用法:基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名:

v-for 默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,您需要提供一个key 的特殊属性:

实例:

<body>
 <div id="app">
  <ul>
   <li v-for="item in items" :key="item.id">{{item.name}}</li>
  </ul>
 </div>
 <script>
   new Vue({
     el:'#app',
     data: {
      items:[
        {name:'hxl'},
        {name:'zp'},
        {name:'hxlzp'},
      ],
     }
   });
 </script>

4. v-on绑定事件

用法:

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。

用在普通元素上时,只能监听 原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event 属性:

修饰符:

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.native - listen for a native event on the root element of component.
.once - 触发一次。
.left - (2.2.0+) only trigger handler for left button mouse events.
.right - (2.2.0+) only trigger handler for right button mouse events.
.middle - (2.2.0+) only trigger handler for middle button mouse events.
.passive - (2.3.0+) attaches a DOM event with { passive: true }.

实例:

<div id="app">
 <!--方法处理器-->
 <button v-on:click="doSomething">方法处理器</button>
 <!--内联语句-->
 <button v-on:click="doSomething('Vue.js!',$event)">内联语句</button>
 <!--缩写-->
 <button @click="doSomething">缩写</button>
 <!--停止冒泡-->
 <button @click.stop="doSomething">停止冒泡</button>
 <!--阻止默认行为-->
 <button @click.prevent="doSomething">阻止默认行为</button>
 <!--串联修饰符-->
 <button @click.stop.prevent="doSomething">串联修饰符</button>
 <!--键修饰符,键别名-->
 <input @keyup.enter="onEnter" placeholder="回车键" v-model="msg">
 <button v-on:click.once="doSomething">执行一次</button>
</div>
<script>
  new Vue({
    el:'#app',
    data: {
     name:'vue.js',
     msg:''
    },
    //在methods对象中定义方法
    methods:{
      doSomething:function (event) {
        //方法中的this指向Vue实例
        alert(this.name)
      },
      onEnter:function (event) {
        this.msg = '按下了回车键'
      }
    },
  });
</script>

5.v-bind 绑定属性

用法:

动态地绑定一个或多个特性,或一个组件 prop 到表达式。

在绑定 class 或 style 特性时,支持其它类型的值,如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

修饰符:

.prop - 被用于绑定 DOM 属性。
.camel - (2.1.0+) transform the kebab-case attribute name into camelCase.
.sync - (2.3.0+) a syntax sugar that expands into a v-on handler for updating the bound value.

实例:

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

以上所述是小编给大家介绍的Vue.js常用指令的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS清除IE浏览器缓存的方法
Jul 26 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 #Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 #Javascript
JavaScript订单操作小程序完整版
Jun 23 #Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 #Javascript
JavaScript实现简单的树形菜单效果
Jun 23 #Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 #Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 #jQuery
You might like
博士208HAF收音机实习报告
2021/03/02 无线电
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python如何存储数据到json文件
2020/03/09 Python
迷你西餐厅创业计划书范文
2013/12/31 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
《母鸡》教学反思
2014/02/25 职场文书
品酒会策划方案
2014/05/26 职场文书
医德医风个人总结
2015/02/28 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
教育教学工作反思
2016/02/24 职场文书