指令 (Directives) 带有前缀 v- , 比如 v-if,v-html,v-pre 等. 指令的作用是当表达式的值改变时, 相应地将某些行为应用到 DOM 上, 我们以 v-if 为例:
HTML:
- <div id="app">
- <p v-if="show">显示</p>
- </div>
JS:
- <script>
- var App=new vue({
- el:'#app',
- data:{
- show:true
- }
- });
- </script>
这个例子中, 当数据 show 的值为 true 时, 会插入 p 元素, 当为 false 时, 则会被移除.
vue.js 的核心理念是数据驱动 DOM, 所以我们只需维护好数据, 剩下的事交给 Vue 就好啦 O(∩_∩)O~
1 v-bind
v-bind 会动态更新 HTML 元素上的属性.
HTML:
- <div id="app2">
- <a v-bind:href="url">人工智能画作拍卖 作品签名是数学方程式</a><p></p>
- <img v-bind:src="imgUrl" width="50%" height="50%">
- </div>
JS:
- var app2=new Vue({
- el:'#app2',
- data:{
- url:'http://news.163.com/photoview/00AO0001/2297321.html#p=DV5FFQOV00AO0001NOS',
- imgUrl:'http://pic-bucket.nosdn.127.net/photo/0001/2018-10-27/DV5FFQOV00AO0001NOS.jpg'
- }
- });
效果:
示例中的链接与图片的地址都做了数据绑定, 当我们通过各种方式改变数据时, 链接和图片都会自动更新.
2 v-on
v-on 用于绑定事件监听器.
HTML:
- <div id="app3">
- <p v-if="show">显示</p>
- <button v-on:click="hide">点击隐藏</button>
- </div>
JS:
- var app3 = new Vue({
- el: '#app3',
- data: {
- show: true
- },
- methods: {
- hide: function () {
- this.show = false;
- }
- }
- });
效果:
在 button 按钮上, 使用 v-on:click 给该元素绑定了一个点击事件.
在普通元素上, v-on 可以监听原生的 DOM 事件, 除了 click 外, 还有 dblclick,keyup,mousemove 等. 表达式可以是一个方法名, 这些方法都写在 Vue 实例的 methods 属性内, 并且是函数的形式, 函数内的 this 指向的是当前 Vue 实例本身, 因此可以直接使用 this.xxx 的形式来访问或修改数据.
表达式也可以是一个内联语句:
HTML:
- <div id="app4">
- <p v-if="show">显示</p>
- <button v-on:click="show=false">点击隐藏</button>
- </div>
JS:
- var app4 = new Vue({
- el: '#app4',
- data: {
- show: true
- }
- });
效果与上例相同.
如果要绑定的事件必须处理复杂的业务逻辑, 那么建议在 methods 里声明方法来实现, 因为这样可读性更好也方便维护.
3 调用 methods 中定义的方法
Vue.JS 代理了 methods 中定义的方法, 所以我们可以像访问 Vue 数据那样来调用方法.
JS:
- var app5 = new Vue({
- el: '#app5',
- data: {
- },
- methods:{
- init:function (val) {
- console.log(val);
- }
- },
- mounted:function () {
- this.init('初始化操作');
- }
- });
- app5.init("初始化页面");
效果:
4 指令缩写
指令缩写也称为语法糖, 它指的是: 在不影响功能的前提下, 添加某种方法实现同样的效果, 从而方便程序开发.
v-bind 和 v-on 指令都提供了缩写.
指令 | 缩写 |
---|---|
v-bind | : |
v-on | @ |
比如之前的例子可以缩写为:
HTML:
- <div id="app2">
- <a :href="url">人工智能画作拍卖 作品签名是数学方程式</a>
- <p></p>
- <img :src="imgUrl" width="50%" height="50%">
- </div>
- <div id="app3">
- <p v-if="show">显示</p>
- <button @click="hide">点击隐藏</button>
- </div>
建议使用缩写形式, 这样代码更简洁哦 O(∩_∩)O~
来源: http://www.jianshu.com/p/d72c6f9dae9c