清澈的风

vue2.0笔记(一)

基础

el是vue的固定写法，代表element，el:后面不仅可以跟id,也可以跟class或tagName,即el:"#app",el:".main",el:"ul"都是合理的，但写在body上不太好使目前，建议还是用一个div包裹

data是必不可少的环节，当你发觉数据出不来时，可以审查是否在data定义过，或者根据vue的自带报错查找bug

this是指你创建的这个实例new Vue,如果你var vm=new Vue({}),那么this就是你命名的vm

常用指令

v-model

v-model用于一般表单元素,可实现双向数据绑定

1
2
<input type="text" v-model="msg">
<p>{{msg}}</p>

1
data: {msg:'default text'}

v-for

v-for常用于循环，循环时遵循的顺序是value,key,index
用于json时：

1
<li v-for="(key,value,index) in json">{{index}}-{{key}}:{{value}}</li>
1
2
3
4
5
6
data: {
	json: {
                name: 'john',
                age: 18
            }
      }

用于对象组成的数组时注意循环的是条目，如需输出值需要写出具体对应的属性

1
<li v-for="(item,index) in arr">{{index}}:{{item.name}}</li>

1
2
3
4
5
6
data: {
	arr: [
		{name: 'john'},
		{name: 'sherlock'}
		]
      }

v-show

v-show的元素会始终渲染并保持在DOM中。v-show是简单的切换元素的CSS属性display
点击显示元素

1
2
<div v-show="a">123</div>
<button @click="a=true">click to show</button>

1
data:{a:false}

或者添加methods写this.a=true也可

v-bind

v-bind通常用来绑定属性，例如v-bind:src='',v-bind:class='',v-bind:style='',缩写为:src=''
同样，等号后面也可以直接写属性语句，如:class='.red',:class='[red,blue]'
除此之外，也可以添加:width,:title等详细属性

1
<img :src="imgSrc" :style="imgStyle" :class="imgClass" :width="w" :title="t">

1
2
3
4
5
6
7
data: {
    imgSrc: 'https://www.baidu.com/img/baidu_jgylogo3.gif',
    imgStyle: 'border:1px solid black;padding:10px',
    imgClass: ['red','shadow'], //red,shadow都是类名
    t: 'this is title',
    w: '300px'
    }

:class='data',data代表数据，可以是直接的类名或者类名组成的数组,也可以是写在data里自定义变量名,可以使用json去控制类的true/false

1
2
3
4
5
data:{
    red:'.red',
    shadow:'.shadow',
    imgClass: {red:true,shadow:false}//json也可以直接写在:class上
}

:style='data'除了上面的例子外，写style里的属性名都需要使用驼峰命名法

1
2
3
4
5
6
<div :style="{ fontSize: size + 'px' }"></div>
<!-- size可以直接写数值也可以在data里另定义变量-->
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 数组形式的styleObjectA在data里必须写成对象的形式 -->
<div :style="styleObject"></div>
<!-- styleObject可以是data里的一个拥有多个属性键值对的对象 -->

vuev-modelv-forv-show