vue部分笔记

VUE

vue一大特色：双向数据绑定

1.单项数据绑定：

{{ message }} //双括号
{{ str }}

1.创造vue对象：var vm = new Vue(
	{
		/*挂载	挂载：el:'#app'*/
		el:'#app',	//挂载不能挂标签，尽量挂id
		data:{		//样式要记得把双括号加上进行单项数据绑定
			message:'VUE学习 真好！'，
			str:'whdjhewbfui',
		}
	})

2.双项数据绑定：

{{ message }} //双括号
{{ str }}

3.创建组件
Vue.component(组件名.{模板})

Vue.component('card',{模板})

4.过滤器filters:转换数据类型 (与data同级，不可写data里面) |管道符（传输作用）
//把输入进去的数据转换成整型
fileters:{
toInt(value){
return parseInt(value);
}
}

<div id='app'>
	数据1：{{ num1 | toInt }}	//管道符后加函数名，把num1数据传到toInt函数处理后返回
</div>

5.计算属性
computed:{
sum(){
/三个变量之和 this 代指当前实例对象/
return this.num1+this.num2+this.num3;
}
}

6.methods:{} 装函数

7.绑定事件：v-on
v-on:click 鼠标点击事件

8.watch监控作用 监控属性值是否变化

watch:{
	a(){		//监控a的值
	}
}

9.渲染标签效果的文本时不用{{}}，用v-html=‘message’

10.循环迭代

{{index}}{{item}}

data:{
	list:['1','2','3','4']
	obj:{
		name:'范冰冰',
		sex:'女',
	}
}

11.类样式:class="{‘red’:myRed,‘font’:myFont}" {‘类名’：值（true/false）}

(v-bind===>:绑定类样式)

12.防止a标签点击后刷新href=‘javascript:;’

13.父子传参
子：
Vue.component(‘ymy’,{
props:[‘detail’],
data:{
组件项…}})

13.盒子总宽 = width + padding2 + border2 ===> content-box 内减

box {
	box-sizing:border-box  //不需要内减
	}

14.删除数组，从第index项删除一项
list[index].splice(index,1)

3.Bootstrap中文网 栅格系统