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 相关文章推荐
javascript的内存管理详解
Aug 07 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
js倒计时简单实现方法
Dec 17 Javascript
Javascript之String对象详解
Jun 08 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
JS轮播图的实现方法
Aug 24 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项目应该注意的几点事项分享
2013/12/20 PHP
php绘制一个扇形的方法
2015/01/24 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
详解React 条件渲染
2020/07/08 Javascript
python实现划词翻译
2020/04/23 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
Python读写文件基础知识点
2019/06/10 Python
python函数与方法的区别总结
2019/06/23 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
安全教育第一课观后感
2015/06/17 职场文书
安全生产奖惩制度
2015/08/06 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server