Vue学习第一天

Vue01

一.

1.mustache语法->{{}}

2.new Vue({

    el :

    data :

    methods

})

二.

1.v-for="item in arrays"

2.v-on:click->@click

3.v-html  内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 

4.v-pre  跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

5.v-once 只改变一次数据

6.v-text 类似mustache语法，但不灵活

7.v-cloak 斗篷， 这个指令保持在元素上直到关联实例结束编译，等vue实例创建完，显示内容

8.1v-bind绑定基本属性

    v-bind:src

    v-bind:href

8.2v-bind动态绑定class，style

    v-bind:style ->:style

    v-bind:class ->:class

三.

计算属性

<h2> {{totalPrice}} </h2>

data : {

books : [

{ id : 1 , bookName : "111" , bookPrice : 100 } ,

{ id : 2 , bookName : "222" , bookPrice : 200 } ,

{ id : 3 , bookName : "333" , bookPrice : 300 } ,

{ id : 4 , bookName : "444" , bookPrice : 400 } ,

]

} ,

computed : {

totalPrice : function () {

let result = 0

for (book of this . books ){

result+=book. bookPrice ;

}

return result ;

}