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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
原生JS实现微信通讯录
Jun 18 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
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Python实现ATM系统
2020/02/17 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
市场开发计划书
2014/05/07 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
领导班子整改方案
2014/10/25 职场文书
安装工程师岗位职责
2015/02/13 职场文书
幼师个人总结范文
2015/02/28 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
办公室卫生管理制度
2015/08/04 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
导游词之神仙居景区
2019/11/15 职场文书
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电