vue个人学习（一）

一、 vue隐藏加载时的{ }的方法：

       1、v-cloak（数据较多时）

       在元素中添加v-cloak属性，同时在style中通过属性选择器选中该属性并设置display：none

 

<li v-for="value in aside_test_show" v-cloak>  
<style>
    [v-cloak]{
         display: none;
    }
</style>

 

       2、v-text（单一数据并且没有html标签）

<span v-text="msg"></span>
msg：“welcome！”----data中数据

       3、v-html（单一数据并且存在html标签）

<span v-html="msg"></span>
msg：“<strong>welcome！</strong>”

 

二、 vue计算属性的应用（computed）：

        在vue中，与data、methods并列的一个json----》computed，代表着计算功能，它里面的属性以函数形式存在，但却以属性形式输出，输出的是函数的返回值。通常computed中会放置一些业务逻辑，但是必须要return出值。

         1、通常利用computed的特性，我们可以完成一个属性随另一个属性动态变化的功能：

                        

new Vue({
    el:"#box",
    data:{
          a:1
         },
    computed:{
          b:function(){               //默认调用get方法
                  return this.a+13;
              }
          }
     });
//输出：
    a = {{a}}<br />
    b = {{b}}

        2、computed属性无法通过常规方法进行赋值，需要将computed属性的set方法重写后，才能触发赋值函数：

computed:{
    b:{
        get:function(){
            return this.a+13;
            },
            set:function(val){         //val为赋值进来的10，通过set函数中的逻辑来进行一些数据改变
                this.a=val;
           }
    }
}

//然后通过一些方法直接给b赋值，如
document.onkeydown=function(){
    vm.b=10;
}

三、 vue实例对象的简单方法：

        创建一个vue实例对象vm。

        1、vm.$el          //vm获取的element元素，等同于document.getElement...所获取到的元素。

        2、vm.$data      //vm中的data对象

        3、vm.$mount("#box")      //在vm之外设置vm的el属性，即手动挂载元素

        4、vm.$options.自定义属性名    //获取vm的自定义属性，vm的自定义属性无法直接获取，需要使用options.???：

new Vue({
    aa:11,
    el:"#box",
    data:{
            a:1
    }
});

console.log(vm.$options.aa);

        5、vm.$log()                 //查看vm中数据当前的状态（如当前值等等）     console.log(vm.$log)