day25-Vue基础

一 认识Vue

Vue就是一个js的一个库，这个库中提供了一个Vue类，通过这个类的对象可以和htnl中的标签进行绑定。

1.1.Vue对象

new Vue({
el:需要绑定的标签的id选择器,
data:对象 - 为被绑定的标签提供各种数据
methods:对象 - 通过提供方法来提供功能,
computed:对象 - 通过提供方法来提供数据
})

1.2.指令

①{{Vue属性}} - 标签内容

<p>{{message}}</p>
<a href="">{{message+'阿康'}}</a>
<p>信息:{{message}}</p>

②v-bind:标签属性名 = “Vue属性” - 标签属性

<a v-bind:href='url'>百度</a>
<a v-bind:href="'https://'+url2">京东</a>

③v-for=“变量 in Vue对象提供的序列” - for循环

<div id="" v-for="item in names">
	<p>{{item}}</p>
	<a href="">{{item[0]+'...'+item[item.length-1]}}</a>
</div>

④v-on:事见属性 = ‘Vue方法名’ (@事件属性名 = ‘Vue方法名’) - 事件绑定

<button type="button" v-on:click="action1">按钮1</button>
<button type="button" @click="action1">按钮11</button>
<button type="button" v-on:click="action1">按钮2</button>
<button type="button" v-on:click="action3">按钮3</button>

⑤v-model = ‘Vue属性’ - 双向绑定

<!-- 案例1:输入框双向绑定,邦定的是输入框的内容 -->
<p>{{name}}</p>
<input type="text" id="" v-model="name" />
<br>
<!-- 案例2:下拉列表双向绑定,邦定的是当前选中的选项 -->
<p>{{select}}</p>
<select name="" v-model="select">
	<option v-bind:value="city" v-for="city in citys">{{city}}</option>
</select>

<!-- 案例3:单选按钮和复选按钮双向绑定,邦定的是按钮的选中状态 -->
<input type="checkbox" name="" id="ball" value="篮球" v-model="isSelectBall" /><label for="ball">篮球</label>
</div>

⑥v-if=‘Vue对象对应的条件属性’ - 条件语句的结果是true对应的标签就存在,否则对应标签不存在.

<p v-if="title.length>0||title==null">{{title}}</p>

<script type="text/javascript">
	
	function btnAction3(event){
		alert('按钮3被点击')
	}
	app1 = new Vue({
		el:"#app1",
		data:{
			p:'我是康他爹',
			message:'how are you?',
			url:'https://www.baidu.com',
			url2:'www.jd.com',
			names:['肖生客的救赎','交付','老师'],
			title:'电视剧',
			isShowTitle:true,
			name:'张三',
			citys:['成都','北京','大连','青岛'],
			select:'成都',
			isSelectBall:true
		},
		
		methods:{
			action1:function(event){
				// methods中所有方法的this都是当前Vue对象
				console.log(this)
				console.log(arguments,event)
				alert('你已被点击')
			},
			action2:(event)=>{
				alert('你被点击')
			},
			action3:btnAction3
		}
	})
// 通过Vue对象获取或者修改data中的值
app1.p = '啊吧啊吧'
app1.$data.p = '哦哈'
</script>

二 计算属性

<div id="app1">
			<p>总数量:{{totalCount}}</p>
			<p>总价格:{{totalPrice}}</p>
		</div>
		<script type="text/javascript">
			app1 = new Vue({
				el:'#app1',
				data:{
					goods:[
						{price:199,count:3},
						{price:19,count:4},
						{price:189,count:5},
						{price:196,count:6}
					]
				},
				computed:{
					totalPrice:function(){
						var goods = this.goods
						return goods.reduce(function(x,y){
							return x+y.price*y.count
						},0)
					},
					
					totalCount:function(){
						var goods = this.goods
						// 穷人:
						// var sum1 = 0
						// goods.forEach((item)=>{
						// 	sum1 += item.count
						// })
						// return sum1
						
						// 小资:
						return goods.reduce((x,y)=>{
							return x + y.count
						},0)
						
					}
				}
			})
		</script>