vue学习第2天，基础知识，v-bind v-on v-if v-for v-model v-html computed watch methods

1，还没有开始学习node npm webpack vue-cli等工具

2，使用传统的写页面的方法引入的vue

3，创建vue对象 

var app=new({

el:'#id',

data:{

name:'sukla',

age:2017,

some:'',

value:'',

istrue:true,

isActive:true

todos:[

{text:"sukla1“,date:"2017-10-17"},

{text:"sukla2",date:"2017-10-18"}

]

},

methods:{

computedvalue:function(){

this.value++

},

doSomething:function(){

alert("你还真点啊！")

},

computed:{

computedvalue:function(){

return this.value+1;

},

computedclass1:function(){

return isActive?this.class1:";

}

},

watch:{

value:function(){

value++

}

}

}

})

4，el 是vue实现的一个属性，app.$el===app.el===document.getElementById('id'),表示的是当前页面上面id为 ‘id’的元素；

5，data 是vue实现的一个属性，app.$data===app.data；

6，加$是为了区分自有属性和用户自定义属性；

7，v-model

<input v-model="some"/> 将这个元素的值和对应的vue对象的data中的some属性的值绑定，当修改这个input的值的时候，data中的some属性对应的值也发生改变，可以在多个元素上绑定，当一个发生修改的时候，同时变化；

如果只是想绑定一次的话，可以使用 v-once 

8，v-bind

<input v-bind:name="name"/> 将参数 name="name" 传给v-bind 告诉v-bind 这个元素的name属性的值是data中的name属性对应的值 ,可以动态改变

9，v-on

<a v-on:click="doSomething">点我啊</a> 将参数click="doSomething" 传给v-on 告诉v-on 当这个元素执行click动作的时候 执行methods中的doSomething所对应的方法

10，v-if

<a v-if="istrue">我能藏起来</a>  用来控制这个元素的显示与隐藏 当data中的istrue属性对应的boolean值为true的时候 这个元素就能看见，当为false的时候就看不见了，但是位置还在

11，v-for

<ol><li v-for="todo in todos">{{todo.text}}</li></ol> 一般用来配合插值 循环插一批元素

12，v-html

<div v-html="rawhtml"></div> 指定将data中的rawhtml属性对应的字符串按照html格式解释后插入这个元素里面，注意不能将自定义的模板写在那个字符串里面，引擎解释不出来

13，class

<div v-bind:class="class1"></div> 指定当前元素的class属性中有一个是在data中的class1对应的值

<div v-bind:class="{class2:isActive}"><div> 指定当前元素有一个叫做class2的类在class属性当中，但是受到data中的isActive对应的boolean值的控制，isActive为true的时候加上去，isActive为false的时候就去掉

<div v-bind:class="[class1,class2]"></div> 指定当前元素的class属性中添加数组[class1,class2]中每个值在data中对应的值的class

<div v-bind:class="[{class1:isActive},class2]"></div> 指定当前元素的class属性种添加数组[{class1:isActive},class2]中对应的每一个值在data中的值所表示的class,但是其中的class1是否添加是被data中的isActive对应的boolean值所控制的，为true的时候 添加，为false的时候就不添加

<div v-bind:class="[computedclass1,class2]"></div> 在一个表达式中写太多的东西看上去不够清爽，可以使用计算属性，将计算过程放到其它地方

14，computed 计算属性 里面的this表示的是当前这个Vue对象，这个对象代理了data里面的属性与方法，可以直接 . 调用

15，computed 与 methods 缓存问题

<input v-model="value"/> <div>{{computedvalue}}</div>  <div>{{computedvalue()}}</div>发现用计算属性和方法都可以实现input的输入的值加1之后放到div中，其中计算属性是依赖缓存的，如果缓存没有变化就不去计算了，而方法是只要触发了，不管结果有没有变化都执行下去，如果不希望有缓存的话就使用methods，如果需要有缓存的话就使用计算属性computed

16，watch 当指定的属性的值发生改变的时候 就执行一次watch里面的方法

17,component 模板 可以自定义模板 然后在html上像标签一样使用

Vue.component("component",{

template:"<div>我是一个模板</div>",

porps:[]

})

<component></component>

渲染出来之后 <div>我是一个模板</div>