VUE的基础知识

注意：先看菜鸟教程和手册
菜鸟教程
官方文档

一、VUE的介绍

面试或者笔试要问

• 类似于 view，vue是一套构建用户界面的`渐进式框架
• Vue 只关注视图层， 采用自底向上增量开发`的设计。
• 采用MVVM设计模式
• vue是基于MVVM（M:model(数据处理) V:view VM:viewmodel(业务逻辑层)）设计模式，支持数据的双向绑定(v-model)
• MVC设计模式:
  M model数据层(进行价格之类的数据处理) 、V：view视图层、C:conreol控制层（判断、循环等逻辑）
• 与js不同的是不需要再获取元素了

二、vue的安装

2.1 下载vue.js直接引入

<script src="vue.js"></script>

2.2 通过CDN加载

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

2.3 npm安装

npm install vue -g
npm install vue-cli -g

通过
npm run dev 启动项目（2.0）   npm run serve（3.0）
npm run build 打包项目

三、vue的基本使用

• 1.el为vue的作用范围，代表元素标签，作用是将div联系起来（相当于挂载）
• 2.data为vue的数据，有对象和函数两种形式，若是对象，里面写键值对，里面的值可以在标签使用或则js里使用
• 3.methods里面的方法需要用逗号隔开
• 4.this绑定了整个vue实例，所以this.变量名可以获取值
• 5.标签里面获取data的值
  5.1、{ {data里面的变量名}}
  5.2、{ {方法名()}}
  和4.1里面的插值
• 6.必写data、el、methods

<div id="app">
<!-- 1.{
   {变量名}}获取值 -->
	<p>{
  {msg}}</p>
	
	<!-- 2.{
   {方法名()}}获取值 -->
	<p>{
  {getData()}}</p>
	
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
	new Vue({
     
		// 选项(必写el、data、methods)
		
		// 3.0.el代表element:元素标签
		// 3.1.这里写最大div的id名称,建议用id
		// 3.2.作用：将div联系起来（相当于挂载），不需要获取了
		el:'#app',
		
		// 4.普通的data		里面写键值对
		// 作用：里面的值可以在标签使用或者js里面使用
		data:{
     
			msg:'学习vue'
		},
		
		// 5.1组件时的data(简写方法)
		// data(){
     
		// 	return{}
		// },
		
		// 6.方法(里面的方法需要简写)
		methods:{
     
			getData(){
     
				// 6.1this绑定了整个vue实例
				// 6.2所以this.msg可以获取值
				return this.msg
			}
		}
	})
</script>

四、vue的常见指令（重点）

4.1vue的插值

<!-- 方式一：采用{
   {变量名}}插入文本值 -->
<p>{
  {text}}</p>

<!-- vue指令 -->
<!-- 方式二：v-text="data的变量名"插文本值 -->
<p v-text="text"></p>

<!-- 方式三：v-html="data的变量名"插文本值 -->
<p v-html="msg"></p>

<!-- 方式四：{
   {方法名()}}插入值 -->
<p>{
  {getData()}}</p>

v-text和v-html的区别

• 1.v-html相当于innerHtml,可以识别标签+文本 注意：v-html不建议动态渲染标签，容易受到xss攻击。禁止在提交内容上使用
• 2.v-text相当于innerText，可以识别文本

<div id="app">
<!-- 方式一：采用{
   {变量名}}插入文本值 -->
<p>{
  {text}}</p>

<!-- vue指令 -->
<!-- 方式二：v-text="data的变量名"插文本值 -->
<p v-text="text"></p>

<!-- 方式三：v-html="data的变量名"插文本值 -->
<p v-html="msg"></p>

<!-- 方式四：{
   {方法名()}}插入值 -->
<p>{
  {getData()}}</p>
<!-- v-text和v-html的区别
	1.v-html相当于innerHtml,可以识别标签+文本	注意：v-html不建议动态渲染标签，容易受到xss攻击。禁止在提交内容上使用
	2.v-text相当于innerText，可以识别文本
 -->

</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
new Vue({
     
	
	el:'#app',
	data:{
     
		msg:'<b>学习vue</b>',//不建议写标签
		text:'插值'
	},
	methods:{
     
		// 6.1简写方法
		getData(){
     
			return this.msg
		}
	}
})
</script>

4.2 vue中的条件语句

• v-if=“布尔值”，true则显示，false则隐藏(标签名都不在了)
• v-else
• v-else-if

<div id="app">
	<!-- 
		v-if="布尔值"，true则显示，false则隐藏(标签名都不在了)
		v-else
		
		v-else-if
	 -->
	
	<!-- 单向分支 -->
	<p v-if="true">我显示了</p><!--显示-->
	<p v-if="false">我隐藏了</p><!--隐藏-->
	<p>赚大钱</p>
	
	<!--双向分支-->
	<p v-if="flag">认真学习</p>
	<p v-else>好好玩耍</p>
	
	<!-- 多分支	从大到小 -->
	<p v-if="score>=90">你真棒！</p>
	<p v-else-if="score>=60">革命没成功！继续努力</p>
	<p v-else>你是猪吗</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
	new Vue({
     
		el:'#app',
		data:{
     
			flag:'true',
			score:90
		},
		methods:{
     
			
		}
	})
</script>

4.3 vue的显示隐藏

方式一：v-if的隐藏  true显示	false隐藏(标签都不在了)
<p v-if="false">我们来玩捉迷藏</p>

方式二：2.v-show的隐藏	true显示 false隐藏
<p v-show="false">你来找找我在哪儿</p>

v-if和v-show的区别：
v-if 隐藏是直接将该元素移除
v-show是将元素设置为display:none进行隐藏

<div id="app">
	<!-- 1.v-if的隐藏  true显示	false隐藏(标签都不在了)-->
	<p v-if="false">我隐藏了</p>
	
	<!-- 2.v-show的隐藏	true显示 false隐藏 -->
	<p v-show="true">see you</p>
	
	<!-- 3.v-if和v-show的区别
			3.1v-if隐藏就是直接移除元素(标签)
			3.2v-show隐藏通过display:none；进行隐藏
	 
	 
	 -->
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
	new Vue({
     
		el:'#app',
		data:{
     
			
		},
		methods:{
     
			
		}
	})
</script>

4.4vue点击事件

<div id="app">
	<!--双向分支-->
	<p v-if="flag">认真学习</p>
	<p v-else>好好玩耍</p>
	
	<!-- 点击事件 -->
	<button v-on:click="change">切换</button>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
	new Vue({
     
		el:'#app',
		data:{
     
			flag:'true',
		},
		methods:{
     
			change(){
     
				this.flag=!this.flag
			}
		}
	})
</script>

4.5绑定样式

1.v-bind可以简写为":"
2.方法一:传入对象，多个对象采用","连接；写法:v-bind:class="{class名：true/data里面的变量}
3.方式二：传入数组	写法v-bind:class=[data的变量1,data的变量2],这个会自动解析数组里面的值
4.方式三：内联样式（不推荐）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.gbColor{
     
			width: 300px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			background: lightblue;
		}
		.color{
     
			color: red;
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- 1.方法一:传入对象，多个对象采用","连接；写法:v-bind:class="{class名：true/data里面的变量}"
		 -->
		 <p v-bind:class="{gbColor:isActive,color:true}">鞠婧祎</p>
		 
		 <!-- 2.方式二：传入数组	写法v-bind:class=[data的变量1,data的变量2],这个会自动解析数组里面的值 -->
		 <p v-bind:class=[bg,textColor]>满月之下请相爱</p>
	</div>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script type="text/javascript">
		new Vue({
     
			el:'#app',
			data:{
     
				isActive:true,
				// 值写class名称
				bg:'gbColor',
				textColor:'color'
			}
			
		})
	</script>
</body>
</html>

4.6vue的事件处理

• 1.v-on可以简写为@,":"也不要了,比如@click
• 2.方法一：直接调用处理数据 num++
• 3.方法二：触发处理函数

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		p{
     
			width: 300px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			background: #ccc;
		}
		p.active{
     
			background: lightseagreen;
		}
	</style>
</head>
<body>
	<!-- 1.v-on可以简写为@,":"也不要了,比如@click -->
	<div id="app">
		<!-- 2.事件绑定
				2.1方法一：直接调用处理数据	num++
				2.2方法二：触发处理函数
				2.3按键修饰符		写法：比如@keyup.按键别名、v-on:click.stop 	.stop阻止冒泡  .once只触发一次
		 -->
		
		<!-- 方式一：直接调用处理数据 -->
		<p v-on:click="changeColor()" v-bind:class="{active:isActive}"><button v-on:click.stop="num--">-</button>{
  {num}}<button v-on:click.stop="num++">+</button></p>
		
		<input v-on:keyup.enter="submit()"/>
	</div>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script type="text/javascript">
		new Vue({
     
			el:'#app',
			data:{
     
				num:1,
				isActive:false
			},
			methods:{
     
				changeColor(){
     
					this.isActive=!this.isActive
				},
				submit(){
     
					console.log(111)
				}
				
			}
			
		})
	</script>
</body>
</html>

4.7事件修饰符

.stop 阻止事件冒泡行为
.prevent 阻止事件默认行为
.capture 使用事件捕获模式
.self 阻止事件委派（只能当前元素触发事件而不是子元素）
.once 事件只触发一次

• 写法：比如v-on:click.stop

4.8按键修饰符

.enter 回车键
.tab tab键
.delete (捕获 “删除” 和 “退格” 键)
.esc ESC键
.space 空格键
.up 上键
.down 下键
.left 左键
.right 右键
.ctrl Ctrl键
.alt alt键
.shift shift键
.meta meta键
写法：比如@keyup.按键别名

4.9循环出数据

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
     margin: 0;padding: 0;}
		ul{
     list-style: none;
			display: flex;
			justify-content: space-between;
		}
		
		ul>li{
     
			width: 240px;
			height: 466px;
		}
		
		ul>li .meiyuan{
     
			color: #e4393c;
		}
		
		ul>li .price{
     
			color: #e4393c;
			font-size: 20px;
		}
		
		ul>li .desc{
     
			font-size: 12px;
			color: gray;
		}
		
		#wrap{
     
			width: 1300px;
			margin: 100px auto;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<ul>
			<li v-for="(val,index) in pic" :key="val.id">
				<!-- 标签里面获取v-for里面的值：{
   {变量名.data里面的变量名}} -->
				<img :src=`image/${val.path}`>
				<p><span class="meiyuan">{
  {val.meiyuan}}</span><span class="price">{
  {val.price}}</span></p>
				<p class="desc">{
  {val.desc}}</p>
			</li>
		</ul>
	</div>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script type="text/javascript">
		new Vue({
     
			el:'#wrap',
			data:{
     
				pic:[
					{
     
						path:'jjy1.jpg',
						meiyuan:'￥',
						price:"199",
						desc:'鞠婧祎雷初同款白色海军领毛呢外套女秋呢子大衣 图片色 S'
					},
					{
     
						path:'jjy2.jpg',
						meiyuan:'￥',
						price:"299",
						desc:'鞠婧祎雷初夏同款泰迪熊大衣中长羊羔毛卷毛外套女预售 同款外套 S'
					},
					{
     
						path:'jjy3.jpg',
						meiyuan:'￥',
						price:"250.04",
						desc:'雷初夏鞠婧祎同款衣服连帽衫宽松卫衣白色宽松卫衣 图片色 S'
					},
					{
     
						path:'jjy4.jpg',
						meiyuan:'￥',
						price:"299.04",
						desc:'鞠婧祎同款小香风针织条纹宽松时尚毛衣女 上衣 L'
					},
					{
     
						path:'jjy5.jpg',
						meiyuan:'￥',
						price:"399.04",
						desc:'鞠婧祎雷初夏同款黑色丝绒上衣波点网纱拼接预售 同款上衣 S'
					}
					
				]
			},
			methods:{
     
				
			}
		})
	</script>
</body>
</html>

4.10双向数据绑定

• 1.什么是双向绑定：先解释单向绑定，view拿到data的数据不能跟新了，有了v-model，view数据更新，data也能更新，从而让页面也能更新，比如在输入框上面输入值，下面的p标签会实时更新值
• 2.双向绑定是MVVM设计模式
• 3.什么是vue，它是渐进式框架，是MVVM设计模，有着丰富的指令
• 4.v-model绑给需要更新数据的，比如input输入框、form表单、单选框、复选框、下拉框
• 5.写法:v-model=“data里面的变量名”
• 6.v-model可以删除

<div id="app">
	<!--输入框  -->
	<input type="text" v-model="msg">
	<p>{
  {msg}}</p>
	
	<hr>
	<!--2.小购物车 -->
	单价:<input type="text" v-model="price"/><br>
	数量:<input type="number" v-model="num"/>
	总价:<p>{
  {price*num}}</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
	new Vue({
     
		el:'#app',
		data:{
     
			msg:'',//这里为初始数据，可以不写
			price:10,
			num:2,
			msg2:'',
			sex:'',
			foods:[],
			city:'成都'
		},
		methods:{
     
			
		}
	})
</script>

4.11vue的表单

• 1.vue中采用v-model进行数据双向绑定
• 2.单选框 v-model里面写的变量一样的而且还是字符串，value里面的值给v-model了
• 3.复选框 v-model里面的变量是数组，value给v-model
• 4.下拉框中name和v-model给select，value给option

<div id="app">
	<!--3.单选框	 v-model里面写的变量一样的而且还是字符串，value里面的值给v-model了  -->
	<input type="radio" name="sex" value="男"  v-model="sex"/>男
	<input type="radio" name="sex" value="女"  v-model="sex"/>女
	<input type="radio" name="sex" value="保密"  v-model="sex"/>保密
	<p>性别:{
  {sex}}</p>
	<!-- 4.复选框	v-model里面的变量是数组，value给v-model -->
	<hr >
	<h2>复选框</h2>
	<p>你最想吃啥:</p>
	<input type="checkbox" name="foods" value="重庆火锅" v-model="foods">重庆火锅
	<input type="checkbox"