Vue自学之路

1、{{}}给html代码赋值（text里面）文本域插值

{{ }}双大括号赋值，可以在指定的地方赋值；

 

2、属性v-html赋值，将文本域值全部覆盖

<p>{{ message }}</p>

<h1 v-html="message">site : {{site}}</h1>

 

 

3、v-model 给html属性赋值（value）

 <input v-model="use" type="checkbox"></input>

 

 

4、HTML 属性中的值应使用 v-bind 指令。为指定属性绑定参数

以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

v-bind:class="{'class1': use}"  当use为true时，绑定class1的样式

<div v-bind:class="{'class1': use}">

v-bind:class 指令

</div>

 

 

5、Vue.js 都提供了完全的 JavaScript 表达式支持。

{{5+5}}<br>            可以做算术运算

 

{{ ok ? 'YES' : 'NO' }}<br>         根据‘ok’是true还是false输出不同的值

{{ message.split('').reverse().join('') }}

 

 

6、v-on 指令，它用于监听 DOM 事件：

<a v-on:click="fun">   <!--为a标签添加click事件，后面加不加（）都可以，fun()或者fun-->

 

 

7、过滤器：Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

 

过滤器可以串联
{{ message | filterA | filterB }}

 

过滤器是 JavaScript 函数，因此可以接受参数：第一个参数为当前message，之后的为传入参数：
{{ message | capitalize('arg1', arg2) }}

 

 

 

 

8、v-bind 缩写 ：

 

<a v-bind:href="url"></a>   <!-- 完整语法 -->
<a :href="url"></a>           <!-- 缩写 -->

 

 

 

 

v-on 缩写 @

<a v-on:click="doSomething"></a>            <!-- 完整语法 -->
<a @click="doSomething"></a>                 <!-- 缩写 -->

 

 

条件语句

9、v-if="seen" ：判断seen是否为true来决定是否插入 p 元素。

 <p v-if="seen">现在你看到我了</p>

 

v-if  v-else  

<div v-if="Math.random() > 0.5">

Sorry

</div>

<div v-else>

Not sorry

</div>

 

 

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

<div v-if="type === 'A'"> A </div> 
<div v-else-if="type === 'B'"> B </div> 
<div v-else-if="type === 'C'"> C </div>
 <div v-else> Not A/B/C </div>

 

10、v-show：根据传入参数是否为true来判断是否添加display: none;样式

 <h1 v-show="ok">Hello!</h1>

 

11、v-for 指令需要以 test in listTest 形式的特殊语法， listTest是源数据数组并且 test 是数组元素迭代的别名。

 

<div >

<p v-for="test in listTest">{{test.name}}</p>

</div>


<!--
数据格式：

listTest : [
            {name : 'q'},
            {name : 'w'},
            {name : 'e'}
]

-->

 

 

 

 <!--List迭代可以传两个参数，第二个是索引 -->
<div >

<p v-for="(test,index) in listTest">name : {{test.name}}:{{index}}</p>

</div>

 

 

12、v-for 可以通过一个对象的属性来迭代数据：

 

<div >

<p v-for="test in ObjectTest">{{test}}</p>

</div>


<!--数据格式：

ObjectTest : {
        name : 'asd',
        url : 'asdfweeferfrtgrt',
        type : 'BB'
} 

-->

 

 

 

 

<!--对象迭代可以多传两个参数第二个参数是键,第三个参数是索引。-->

<div >

<p v-for="(test,key,index) in ObjectTest">{{key}}:{{test}}</p>

</div>

 

<!--迭代整数-->

<li v-for="n in 10"> {{ n }} </li>

 

 

13、Computed 使用方法同methods

<p>{{ message }}</p>

<p>翻转之后：{{ reversedMessage }}</p>

 
computed : {

    reversedMessage : function(){

        return this.message.split('').reverse().join('');

    }

}

 

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。

而使用 methods ，在重新渲染的时候，函数总会重新调用执行。如下例子reversedMessage调用多次都是2，reversedMessage2会一直往上加。

var cnt=1;

var vm = new Vue({

  el: '#app',

  data: {

    message: 'Runoob!'

  },

  computed: {

    // 计算属性的 getter

    reversedMessage: function () {

      // `this` 指向 vm 实例

      cnt+=1;

      return cnt+this.message.split('').reverse().join('')

    }

  },

  methods: {

    reversedMessage2: function () {

      cnt+=1;

      return cnt+this.message.split('').reverse().join('')

    }

  }

})

 

 

 

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

data: {

    name: 'Google',

    url: 'http://www.google.com'

  },

computed: {

    site: {

      // getter

      get: function () {

        return this.name + ' ' + this.url

      },

      // setter

      set: function (newValue) {

        var names = newValue.split(' ')

        this.name = names[0]

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

      }

    }

  }

 

 

14、监听属性 watch，我们可以通过 watch 来响应数据的变化。

第一个参数表示当前值，第二个参数表示修改之前的值。

//法一：

watch : {

        alexa : function(val,last){

         console.log(last + "" +val);

        }

}

//法二：

ss.$watch('alexa', function(val, last) {

alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');

});

 

//当alexa等于5时，设置属性disabled为true

v-bind:disabled="alexa === 5"

 

 

15、样式绑定

15.1 可以为 v-bind:class 设置一个对象，从而动态的切换 class:

<div v-bind:class="{ active: isActive }"></div>

 

 

15.2 也可以在对象中传入更多属性用来动态切换多个 class 。

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>

 

 

15.3属性赋值

<div v-bind:class="classObject"></div>

数据样式：

 

 

 

 

 

 

15.4数组绑定语法

<div v-bind:class="[activeClass, errorClass]"></div>

 

 

 

 

15.5 isActive 为 true 时添加 activeClass 类：有引号代表类，没有引号代表 data里面的key

<div v-bind:class="[isActive ? activeClass : '']"></div>

 

 

15.6 样式绑定

<div id="app">

<div v-bind:style="{ color:activeColor,fontSize:fontSize+'px' }">测试div</div>

</div>

 

 

 

 

 

15.7 直接绑定成一个对象

<div id="app"> <div v-bind:style="styleObject">caicaicai</div> </div>

 

 

 

 

15.8 v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

<div id="app"> 

<div v-bind:style="[baseStyles, overridingStyles]">caicaicai</div> </div>

 

 

16.事件处理器

<button @click="greets">Greet</button>

<input v-model="greet"/>

 

 

 

 

方法名不能跟属性名一样，否则只有属性值可读，方法失效。（亲测过）。