Vue基础学习1

Vue简介

作者：尤雨溪
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架****。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层**，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

---

Vue框架是一款MVVM框架，它是渐进式框架，它是初创公司的首选框架，轻量级的，有很多根据Vue拓展的独立的功能或库。
Github网站

一、Vue基本使用

开发版本下载地址【将代码复制并粘贴入新建js文件】

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

//检查是否引入Vue
alert(Vue);

语法格式：
插值语法（双大括号）：内部是对data数据管理中序的属性进行渲染，可以是简单表达式（判断、三元表达式），不能使用if等条件语句。
moustache（胡子）是双大括号学名，也叫胡子语法。

<div id= "app">
	{{a}}//插值语法
</div>

<script>
var vue = new Vue({
	//挂载点，所有的Vue方法和属性都必须在对应的根标签内部使用
	el:'#app',
	//数据管理中心，所有Vue数据都必须在data对象中
	data:{
		a:100
	}
	//方法，对应Vue事件方法清单
	methods:{

	}
})
</script>

所有Vue清单内容都是规定的，不能随意创建、改变。

二、Vue指令

vue指令通过带有v-的特殊属性实现dom的响应式加载。

1.v-if、v-else-if

通过一个布尔表达式实现dom的上树和下树的渲染。

<div id= "app">
	<p v-if="boo">我是第一行dom</p>//将不会出现在页面
	<p v-if="!boo">我是第二行dom</p>
</div>

工作中不是直接使用布尔值进行渲染，而是
1.用data带有布尔值进行渲染
2.逻辑表达式判断（对值隐式转换）。

<script>
var vue = new Vue({
	el:'#app',
	data:{
		boo:false
		//boo:0
	}
	methods:{

	}
})
</script>

实时渲染

<div id= "app">
	//当boo的值等于100的时候再显示
	<p v-if="boo==100">我是第一行dom</p>
	<button @click="add">按我加1</button>
</div>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		boo:95
	}
	methods:{
		add(){
			this.boo++
		}
	}
})
</script>

v-else-if使用

<div id= "app">
	<h2>{{boo}}</h2>
	<p v-if="boo>=0 && boo<=5">我是5</p>
	<p v-else-if="boo>=6 && boo<=10">我是10</p>
	<p v-else-if="boo>=11 && boo<=15">我是15</p>
	<p v-else-if="boo>=16 && boo<=20">我是20</p>
	<p v-else-if="boo>20">我是大于20</p>//带有v-if和v-else-if的标签之间不能有任何标签，必须连续
	<button @click="add">按我加1</button>
</div>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		boo:95
	}
	methods:{
		add(){
			this.boo++
		}
	}
})
</script>

2.v-show

v-show与v-if显示情况类似，v-show是通过控制元素的display属性，对元素的显示和隐藏进行逻辑判断，并没有元素的下树。

<div id= "app">
	<p v-show="boo>=5">我是5</p>
	<button @click="add">按我加1</button>
</div>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		boo:0
	}
	methods:{

	}
})
</script>

v-show与v-if使用场景区别是如果页面切换的特别频繁，使用v-show；如果页面设计范围特别大，逻辑复杂，切换的不是特别频繁，使用v-if（涉及到页面加载性能）

3.v-for

v-for是Vue的循环指令，作用是遍历数组（对象）的每一个值。

<div id= "app">
	<ul>
		<li v-for="item in arr">
			{{item}}
		</li>
	</ul>
</div>

item是arr数组的每一项枚举值

<!--v-for遍历数组综合使用-->
<div id= "app">
	<ul>
		<li v-for="（item,index） in arr" :key="index">
			{{index}}-{{item}}
		</li>
	</ul>
</div>

item是被遍历的数组（对象）的每一个值，item的命名不是规定的，可以自定义命名。
index指的是每一项被遍历的值的下表索引值。
key是用来给每一项值加元素标量，作用是为了区分元素，为了实现最小量的更新。

<script>
var vue = new Vue({
	el:'#app',
	data:{
		arr:[
			'苹果',
			'橘子',
			'香蕉',
			'草莓',
		]
	}
})
</script>

v-for遍历对象

<div id= "app">
	<ul>
		<li v-for="(item,index) in obj">
			{{index}}:{{item}}
		</li>
	</ul>
</div>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		obj:{
			name:'小弥',
			age:'17',
			height:'175',
			sex:'man',
			hobby:'play basketball'
		}
	}
})
</script>

此时index代表的是对象的key，如name、age等。
应该用如下方式表示：

<div id= "app">
	<ul>
		<li v-for="(item,key,index) in obj">
			{{index}}—{{key}}:{{item}}
		</li>
	</ul>
</div>

此时item表示对象的内容，key表示对象的key键值名称，index表示当前obj的下标索引。

实际工作中用v-for遍历JSON

<style>
	table,td-th{
		border:1px solid #111;
		/*表格合并*/
		border-collapse:collapse;
	}
</style>

<!--v-for遍历数组综合使用-->
<div id= "app">
	<table>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th>身高</th>
		</tr>
		<tr v-for="(item,index) in arr"></tr>
		<!-- JSON中的信息-->
		<td>{{iten.name}}</td>
		<td>{{iten.age}}</td>
		<td>{{iten.sex}}</td>
		<td>{{iten.height}}</td>
	</table>
</div>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		arr:[
			{name:'mike',age:'18',sex:'man',height:'178'}
			{name:'rose',age:'17',sex:'female',height:'163'}
			{name:'july',age:'17',sex:'female',height:'169'}
			{name:'wiwian',age:'18',sex:'female',height:'168'}
		]
	}
})
</script>

v-for的嵌套

<!--v-for遍历数组综合使用-->
<div id= "app">
	<table>
		<tr v-for="i in num" :key='i'>
			<td v-for="j in i" ；key='j'>{{i}}x{{j}}={{i*j}}</td>
		</tr>
	</table>
</div>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		num:[1,2,3,4,5,6,7,8,9]
	}
})
</script>

4.v-text、v-html

v-text、v-html都是渲染文本的指令，使用场景会不同
三种渲染方法：
1.双大括号插值{{}}
双大括号和v-text渲染内容类似，都是以文本类型进行翻译，方法如下
区别：
1）双大括号在渲染结果之前，隐约会有编译之前的文本显示，而v-text没有这种现象
2）双大括号更加灵活，标签中间可以添加内容，v-text只能渲染data中的内容，中间不允许插入内容
2.v-text

<!--v-for遍历数组综合使用-->
<div id= "app">
	<table>
		<p>{{a}}</p>
		<p v-text="a"></p>
		<p v-html="a"></p>
	</table>
</div>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		a:"<h1>我是要插值的内容</h1>"
	}
})
</script>

5.v-html

v-html能识别模板（即使用h1标签）,而v-text不能使用h1，只能字面显示，示例如上。
使用和v-text类似，中间不允许插入内容

6.v-cloak

v-cloak作用是示例渲染后关联结束
双大括号插值语法在遇到网络延迟的的时候会显示编译之前的文本

<style>
	[v-cloak]{/*选择有v-cloak的属性的标签，解决网络延迟下的情况*/
		display:none;
	}
</style>

<div id= "app" v-cloak>
	{{a}}
</div>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		arr:[
			a:"我是渲染的指令v-cloak"
		]
	}
})
</script>

7.v-once

只渲染对应元素一次，数据更新不会引起视图的更新，目的是为了优化页面性能。

<!--v-for遍历数组综合使用-->
<div id= "app">
	<h2 v-once>{{a}}</h2>
	<button @click="add">按我加一</button>
	<button @click="minus">按我减一</button>
</div>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		a:100
	},
	methods:{
		add(){
			this.a ++
			console.log(a)
		},
		minus(){
			this.a --
			console.log(a)
		}
	}
})
</script>

点击按钮视图显示不会改变，但底层数据是在改变的。
一般没有动态内容时使用，如文章等。

8.v-pre

跳过该元素的编译过程，直接显示元素内部的文本，特点是跳过大量没有指令的节点。

<!--v-for遍历数组综合使用-->
<div id= "app">
	<h2 v-pre>{{a}}</h2>
</div>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		a:100
	},
})
</script>

直接显示{{a}}，不会编译，优化页面的加载性能。

9.v-on

给元素添加事件监听，可以简写为@。
JS的元素的事件监听都可以在Vue中使用。

原生Javascript事件监听

事件名称	方法
点击	onclick
双击	ondblclick
鼠标移上	onmouseenter
鼠标离开	onmouseleave
鼠标滑过	onmousemove
鼠标移除	onmouseout
失去焦点	onblur
聚焦	onfocus
键盘事件	onkeydown

在Vue中使用事件监听一律去除on，然后添加v-on，或者用@，单击示例如下

<div id= "app">
	<h2>{{a}}</h2>
	<button @click="add">点击加1</button>
	<button v-on:click="minus">点击减1</button>
</div>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		a:100
	},
	methods:{
		add(){
			this.a++
		}，
		minus(){
			this.a--
		}
	}
})
</script>

注意：
1.所有方法都必须写在methods中！
2.同名的方法会发生覆盖，后写的方法会覆盖先写的同名方法。
3.方法是可以传参的

<div id= "app">
	<h2>{{a}}</h2>
	<button @click="add(5)">点击加1</button>
</div>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		a:100
	},
	methods:{
		add(num){
			this.a+=num
		}
	}
})
</script>

4.不给事件传参，事件是有自己的参数，默认输入会有该方法的事件参数。

<button @click="add">点击加1</button>

//方法名称
add(event){
			console.log(event)
		}

10.v-bind

将普通的w3c属性变为动态属性，让属性具有动态能力。
v-bind:可简写为一个冒号：

<img v-bind:src="'inages/'+url+'.jpg'" alt="">
<!--等同于如下代码-->
<img :src="'inages/'+url+'.jpg'" alt="">

五张轮播图案例

<div id= "app">
	<img v-bind:src="'inages/'+url+'.jpg'" alt="">
	<button @click="add">点击加1</button>
	<button @click="minus">点击减1</button>
</div>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		url:0
	},
	methods:{
		add(event){
			if(this.url>5){
				this.url = 0;
			}
			this.url++
		},
		minus(){
			if(this.url<=0){
				this.url = 5;
			}
			this.url--
		}
	}
})
</script>

10.1 绑定类名

绑定会默认在Model中查找，直接使用会差找不到
将绑定的类放在数组中，且类名用引号包裹。
可以用三木运算符判断，从而实现样式的改变

<div :class="['color','size']">qqq</div>
<!--三目运算符判断-->
<div :class="['color',flag ? 'size1' : 'size2']">qqq</div>
<!--用对象判断-->
<div :class="['color',{'size1' : false}]">qqq</div>
<!--在Model中直接展示要不要绑定,从服务端动态获取类名，便于修改-->
<div :class="obj">qqq</div>

<script>
<script>
var vue = new Vue({
	el:'#app',
	data:{
		obj:{
			"size":true,
			"color":false
		}
	},
	methods:{}
})
</script>

10.1 绑定样式

使用动态属性实现class类名的动态效果
动态的class必须使用大括号{ }包裹，值可以有多个，值得参数是布尔值

p{
	width:100px;
	height:100px;
	background:red;
}
.blue{
	background:blue;
}
.pink{
	background:pink;
}

<div id= "app">
	<p :class="{red:a >=5,pink:a>=10}">{{a}}</p>
</div>
<button @click="add">点击加1</button>
<button @click="minus">点击减1</button>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		a:0
	},
	methods:{
		add(event){
			this.a++
		},
		minus(){
			this.a--
		}
	}
})
</script>

除了class属性可以实现动态外，style属性也可以实现对应功能
style和class属性有特殊性，使用动态传参必须传入一个object对象。

<p :style="{width:b+'px'}">{{a}}</p>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		b:100
	},
	methods:{
		add(event){
			this.b++
		},
		minus(){
			this.b--
		}
	}
})
</script>

11.v-model

对表单和数据的双向绑定。Vue是MMVVM框架，vue的核心之一就是双向数据绑定。
调查表单

<h2>问卷调查</h2>
<p>姓名:<input type="text" v-model="val"></p>
<p>性别:
	<input type="radio" name='男' v-model="sex">男
	<input type="radio" name='女' v-model="sex">女
</p>
<p>
	爱好：
	<input type="checkbox" name='hobby' value="打篮球" v-model="hobby">打篮球
	<input type="checkbox" name='hobby' value="跳舞" v-model="hobby">跳舞
	<input type="checkbox" name='hobby' value="看书" v-model="hobby">看书
</p>
<p>
	籍贯：
	<select name="native" id="" v-model="native">
		<option value="河北">河北</option>
		<option value="北京">北京</option>
		<option value="湖南">湖南</option>
		<option value="四川">四川</option>
		<option value="广东">广东</option>
	</select>
</p>
<p>
您填写的表单内容为：姓名：{{name}}姓别：{{sex}},爱好：{{hobby}},籍贯：{{native}}
</p>
<button @click="submit">提交</button>

<script>
var vue = new Vue({
	el:'#app',
	data:{
		name:'',
		sex;'男',
		hobby:[],
		native:'河北'
	},
	methods:{
		//汇总提交表单
		submmit(){
			let obj = {
				name: this.name,
				sex:this.sex,
				hobby:this.hobby,
				native: this.native
			}
			console.log(obj)
		}
	}
})
</script>

vue自定义指令

<div id= "app">
	<p v-color>我是段落</p>
</div>

<script>
	//directive方法接收两个参数
	//第一个参数：指令名称
	//第二个参数：对象
	//注意：在指定指令名称的时候，不需要写v-，直接写名称
	//注意点：指令可以在不同生命周期阶段执行
	//bind ：指令被绑定到元素上的时候执行
	//inserted :绑定指令的元素被添加到父元素的时候调用
	Vue.directive("color",{
		bind: (el)=>{
			el.style.color = "red";
		} 
	}); 
</script>

vue自定义指令参数

<div id= "app">
	<p v-color ="'blue'">我是段落</p>
	<p v-color ="curColor">我是段落</p>
</div>

<script>
	Vue.directive("color",{
		bind: (el,obj)=>{
			el.style.color = obj.value;
		} 
	}); 
	var vue = new Vue({
	el:'#app',
	data:{
		curColor:"green"
	},
	methods:{}
})
</script>

vue自定义局部指令

<div id= "app">
	<p v-color ="curColor">我是段落</p>
</div>

<script>
	var vue = new Vue({
	el:'#app',
	data:{
		curColor:"green"
	},
	methods:{},
	//定义局部指令
	directives:{
		"color":{
			bind: (el,obj)=>{
			el.style.color = obj.value;
			} 
		}
	}
	
})
</script>