Vue.js学习笔记 第二天

第二天

• v-model指令
  实现数据的双向绑定

<!--
	v-bind只能实现数据的单向绑定
	从M绑定到V
-->
<input type="text" name="msg" id="msg" v-bind:value="msg" />
<!--
	v-model指令可以实现表单元素和M中数据的双向绑定
	注意：v-model只能用在表单中
-->
<input type="text" name="msg" id="msg" v-model="msg" />

表单中的内容改变后其他相应的msg也会改变

例如：制作简易计算器，可以将表单中的值绑定到data中的值
可以用到eval（）方法，自动解析出字符串的结果

在Vue中使用样式

1. 数组

<h1 :class="['thin','italic']">这是一个h1</h1>

2. 数组中使用三元表达式

<h1 :class="['thin','italic',flag?'active':'']">这是一个h1</h1>

3. 数组中嵌套对象

<h1 :class="['thin',{'active':flag}]">这是一个h1</h1>

1. 直接使用对象

<h1 :class="{red:true,thin:true,italic:true,active:true}">这是一个h1</h1>
<h1 :class="classobj">这是一个h1</h1>

data: {
	flag:true,
	classobj:{red:true,thin:true,italic:true,active:true},
},

使用内联样式

1. 直接在元素上通过：style样式书写样式对象
2. 将样式对象定义到data中，并直接引用到：style中
3. 在：style中通过数组引用多个data上的样式对象

<h1 :style="{'color':'red','font-weight':'200'}">
	这又是一个h1
</h1>
<h1 :style="styleobj1">
	这又是一个h1
</h1>
<h1 :style="[styleobj1,styleobj2]">
	这又是一个h1
</h1>

data: {
	flag:true,
	classobj:{red:true,thin:true,italic:true,active:true},
	styleobj1:{'color':'red','font-weight':'bold'},
	styleobj2:{'font-style':'italic'}
},

• v-for的使用

<!--v-for遍历普通数组-->
<p v-for="item in list">{{item}}</p>
<p v-for="(item,i) in list">{{i}}---{{item}}</p>
<!--v-for遍历对象数组-->
<p v-for="user in list2">{{user.id}}---{{user.name}}</p>
<p v-for="(user,i) in list2">{{i}}---{{user.id}}---{{user.name}}</p>
<!--v-for遍历对象-->
<p v-for="(val,key,i) in user">{{key}}---{{val}}---{{i}}</p>
<!--v-for迭代数字-->
<p v-for="count in 10">这是第{{count}}次循环</p>

<label>id:</label><input type="text" name="id" id="id" value="" v-model="id"/>
<label>name:</label><input type="text" name="name" id="name" value="" v-model="name"/>
<button @click="add">添加</button>
<!--
	
v-for循环的时候，key属性只能使用number获取string
必须！！！！要用v-bind绑定key的值，有利于单个元素的重新渲染
key的作用主要是为了高效的更新虚拟DOM！！！
可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果
-->
<p v-for="item in list3" :key="item.id">
	<input type="checkbox" name="name" id="name" value="姓名" />
	{{item.id}}---{{item.name}}
</p>

//普通数组
list:[1,2,3,4,5],
//对象数组
list2:[
{id:1,name:'zhang1'},
{id:2,name:'zhang2'},
{id:3,name:'zhang3'},
{id:4,name:'zhang4'}
],
//对象
user:{
	id:1,
	name:'张如意',
	gender:'女',
},
//对象数组
list3:[
{id:1,name:'张如意1'},
{id:2,name:'张如意2'},
{id:3,name:'张如意3'},
{id:4,name:'张如意4'},
{id:5,name:'张如意5'},
]
},
methods: {
add(){
//					this.list3.push({id:this.id,name:this.name})
	this.list3.unshift({id:this.id,name:this.name})
	
}
}