VueJS基本使用

一、基础语法以及指令(v-xx)

1.<span>Message: {{ msg }}</span>插值语法用双大括号在页面显示msg的值

2.v-html=”msg” 以html的格式解析在页面显示msg的值

3.v-text=”msg” 以文本格式解析在页面显示msg的值

4.v-bind:class=”[c1,c2]” 绑定属性，简写形式为:class=”[c1,c2]”

5.v-if=”boolean” 判断是否加载，具有懒惰加载机制，如果为false，审查看不到该元素

6.v-else 否则判断语句，同样必须紧跟v-if判断语句

7.v-else-if=”boolean2” 否则判断指令，必须紧跟v-if判断语句

8.v-show=”boolean” 判断是否呈现在页面不具有懒惰加载机制，不管怎样都会加载，当判断条件为false的时候display=”none”，审查可以看到该元素

9.遍历数组：   v-for=”(value,index) in array”  

  遍历对象：   v-for="(value,key,index) in object"  

10.v-model 是数据模型绑定指令，效果与{{}}相同，但是不会出现闪屏的问题

11.v-on:click=”show” 绑定事件行为，简写形式为@click=”show”  

关于绑定事件：

（1）@click=”show($event)”可以传递事件对象，然后可以在事件方法中接收到该$event对象然后做一系列的操作：

function show(evt){
    evt.preventDefault();  //阻止默认事件
    evt.cancelBubble = true;  //阻止冒泡事件
    console.log(evt);   //查看evt的结构类型
}

（2）@click=”show($event,args)”传参数-à接收：function(evt,args){}

（3）@click.stop=”show”  阻止冒泡的简易写法

（4）@click.prevent=”show”  阻止默认事件的简易写法

（5）@click.stop.prevent=”show”同时阻止冒泡跟阻止默认事件

（6）@keydown.enter=”show”  点击回车键的时候才生效

还有其他的绑定事件就不一一详述了...

 二、自定义指令

（1）注册一个全局指令v-focus

Vue.directive('focus', {

   inserted: function (el) {

        el.focus()

   }

 })

注册局部指令v-focus

directives: {

  focus: {

    inserted: function (el) {

      el.focus()

    }

  }

}

 （2）在元素上使用新的指令<input v-focus>

 三、计算属性(computed)

     有时候我们的其中一个属性 是通过一段代码来计算出来的，而我们data下面又不能直接写代码，所以我们要用到这computed 元素。

 （1）当用于计算的属性发生变化时该方法会自动调用，然后得到最新的计算结果。

computed: {
    reversedMessage: function () {
        return this.msg.split('').reverse().join('');
    }
}

     以上方法就是计算属性的一个小例子，用到了data中声明的msg属性，当msg发生改变的时候reversedMessage方法会自动调用并返回最后的计算结果。

 页面上可以用这两种方式显示：{{ reversedMessage }} 或者用v-text=” reversedMessage”  

 （2）计算属性的getter、setter方法

 提供了site属性的get，set方法，并且site是通过name、url两个属性计算得来的。

 computed: {

     site: {

       get: function () {

           return this.name + ' ' + this.url

        },

        set: function (newValue) {

           var names = newValue.split(' ')

           this.name = names[0]

           this.url = names[names.length - 1]

        }

     }

  }

 当我们调用 vm.name=’jack’; 的时候set方法会自动执行

 当我们调用 vm.name; 的时候get方法会自动执行

 页面引用{{site}} 就会呈现get方法中的返回值