vue基础01day

vue

一，什么是vue

vue是第三方开发的，渐进式的，基于MVVM设计模式的纯前端的js框架
第三方：别人写好的，我们直接下好即可
渐进式：可以逐步在项目中引入vue各项功能，同时可以与其他技术混用，但是不推荐（只要不是使用框架，一律使用es5，不能出现es6；我们使用框架的时候就使用es6）
mvvm 设计模式：
1，传统前端三大部分：html/css/JavaScript
问题：html/css功能都太弱了，对于页面中发生的一切变化都需要JavaScript来编写，导致了需要JavaScript编写大量重复增删改查操作
2，现代前端三大部分：（mvvm）
界面（view）：指网页中的元素和样式，一般指的是html/css。view是html网页中的一个需要动态加载内容的父元素，比如:“div#app”。html中的视图，也被称为模板template，如果发生template错误，那么就在html中查找就可以了
数据模型（model）：集中保存页面中所需要的所有变量和变量值。模型，指程序中
控制器（viewmodel）：视图模型/控制，用于替代之前的DOM/jquery操作，封装了重复的增删改查操作，吧模型中的数据和视图中html绑定在一起。vue类型提供的就是一种强大的viewmodel对象，可以9自动同步数据和页面元素，专门负责自动将模型中的变量值自动同步到界面中所需要的位置，实现实时同步
viewmodel核心原理：（响应系统/虚拟DOM树）

纯前端：不需要任何后端技术，就能够独立运行
框架：包含核心功能的半成品代码开发人员只需要根据业务的需求，添加定制自己个性化 的 一部分内容即可

二，对比原生DOM，jQuery，Vue框架

1，原生DOM：使用原生DOM，必须是一步一步来，而且每一步都不能少，步骤上非常繁杂，
问题：jQuery中有多少种查找方法？
查找id的元素，查找class的元素，查找name的元素
2.jQuery：jQuery其实是对DOM的每一步都进行了简化，但是并没有从根本上改变程序流程
3，Vue：
优点：已经包含核心功能，而且已经封装了很多重复的功能，编写时我们就不必要再编写重复的功能，比如：增删改查
再开发中彻底简化了开发步骤

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

缺点：旧浏览器不兼容，开发成员需要彻底改变编程习惯和思维
DOM树重绘问题：一个两个看不出来，弄几百个会卡

三，为什么使用Vue？什么时候使用Vue

1，Vue适用于于以Vue适用于以数据操作为主的项目(web/app)，2.我们使用vue框架可以提高项目的开发效率

如何在项目中使用Vue

下载独立的Vue.js文件：打开官网，点击页面中的起步按钮，之后再在页面左侧选择安装，在安装下选择要 下载的版本
最好使用开发版本的，会有警告和提示
在网页中引入Vue，js。

vue的基本用法

问题：new Vue的绑定原理
其实就是创建一个viewModel对象，自动的绑定界面和数据，new Vue 就会自动将data中的初始值，替换到界面中所有的{{变量}}的位置，只要data中的值发生变化，new Vue就会自动将新的变量值，更新到页面中{{变量}}的位置
new Vue中包含了两大子系统（响应系统，虚拟DOM树）
1，响应系统：new vue（)刚创建的时候，需要先引入data对象，并自动为data中每个变量添加访问器属性保护起来，所有访问器属性都 直接隶属于new vue 对象。如果想要修改fdata中的变量，可以通过“this.变量名”的方式进行访问。但是，其实都是访问变量的set访问器，而且，new vue（）在每个set 访问器中都添加了通知机制，只要修改变量，就会自动调用访问器，只要调用了访问器，就会触发通知。
2，虚拟DOM树：new vue（）通过扫描真实的DOM树，形成一个简化版的DOM树模型，它仅包含可能变化的属性，那些固定不变的属性和变量，一点都不包含，因为真实的DOM树太大了，包含了很多无关的属性，不便于查找，所以我们需要使用虚拟DOM树
优点：1，小，遍历极快，而且只修改变化的元素，影响的范围小
2，封装了重复的增上改查操作，极大的减少了代码量
3，效率高，仅修改个人可能受影响

什么是绑定语法

1,绑定语法就是专门为html添加变量，html本身并不支持变量，但是html中的个别内容又需要根据程序中的变量自动变化，当html中的任何一个位置的内容，需要根据程序中语法：{{变量/js 表达式}}
双花括号{{}}，也叫大胡子语法，官方语法：mustache，补缺，插值的意思，大胡子语法，用于特定的model数据绑定到视图中，当model数据发生了改变，所有用到显示树的{{}}}，里面数据会自动更新。
注意：不能使用大胡子语法动态绑定属性

2,指令（13种）
什么是指令？
Directive，指令就是为html添加新功能的自定义属性，因为html本身是静态的，不具备任何的动态生成能力，所以当我们想要 在html种使用一些特征的时候，就要进行绑定
v-bind

el：

挂载点：支持id，class，标签选择器。（同时也作用到子代元素）
建议使用id选择器
只支持双标签，不能用body，html
2，双花括号里可以写三目运算符，可以写计算数值，进行==，进行比较><（不推荐在双花括号里写这写）

data

注意：在组件中data必须是个函数
数据对象
可以写复杂数据，遵守js中的语法

<div id="app">
		{{message}}
		<h2>{{school.name}}</h2>
		<h3>{{arr[0]}}</h3>
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				message:"哈哈哈哈",
				school:{
					name:"lili",
				},
				arr:["1","2","3"]
			}
		})
	</script>

v-text 设置标签的文本值

<div id="app">
		<h2 v-text="message">当丁丁打</h2>
		<!-- 结果是哈哈哈哈， -->
		<!-- 因为v-text覆盖该标签下的所有的文本， v-text="message"中可以使用拼接字符串-->
		<h2>成都{{message}}</h2>
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				message:"哈哈哈哈"
			}
		})
	</script>

//注意默认v-text没有闪烁问题

v-html:设置标签的innerHtml

可以解析html语法

<div id="app">
	<p v-html="content"></p>
	</div>
	
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				content:"<a href=''>百度</a>"
			}
		})
	</script>

<div id="app">
	<div v-html="message"></div>
	</div>
	
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				message:"<h1>我是一级标题</h1>"
			}
		})
	</script>

v-on:为元素绑定事件

<div id="app">
		 <button type="button" v-on:click="doit">点击1</button>
		 <!-- 简写模式 -->
		 <button type="button" @click="doit">点击</button>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
			        el: '#app',
			        data: {
			            count:0
			        },
					methods: {
					    doit: function () {
					       alert("做个程序元")
					    }
					}
			    });

<div id="app">
		<h2>{{food}}</h2>
		<button type="button" @click="changefood">添加食物</button>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
			        el: '#app',
			        data: {
			            food:"番茄炒蛋"
			        },
					methods: {
					    changefood: function () {
					       this.food+="蛋炒番茄"
					    }
					}
			    });
		</script>

补充
v-on传递自定义参数，事件修饰符

<div id="app">
			<button type="button" @click="doit(666,888)">点击</button>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
			        el: '#app',
			        data: {
			         
			        },
					methods:{
					doit:function(x1,x2){
						console.log(x1);
						console.log(x2)
					}	
					}
			    });
		</script>

问题：如果我们将button按钮换成a标签，href="…"属性，默认会改变我们的地址栏或跳转到其他页面
解决问题：（阻止默行为）
1. js中
实参：event
function(e){
e.preventDefault();
}
2.vue中
实参：$eventfn(e)e.preventDefault();提示：$event是vue对象的内置变量，是将DOM事件对象e封装后得到的产物，是现成的内置变量，可以直接使用，只要想要vue的处理函数中使用事件对象，就必须在html绑定的调用方法中传入$event

3. 使用事件修饰符
事件修饰符会自动实现原DOM事件对象操作的特殊属性，当需要修改事件的行为时，就要使用事件修饰符
.prevent
使用.prevent代替内置变量KaTeX parse error: Expected 'EOF', got '#' at position 51: …网页跳转） <a href="#̲" @click.preven…event下的e.stopPropagation(),取消冒泡/蔓延
.self
只有点击了自己才会触发事件，不会受冒泡的影响
.capture
实现 捕获事件触发
.once
事件只触发一次
<a href="#" @click.prevent.once=“xxx”>//这个阻止默认跳转的事件只触发一次，当第二次点击时，页面会跳转。
多个修饰符可以同时修饰同一个事件，而且与顺序无关

v-show:根据表达式的真假，地址元素的显示和隐藏（修改display：none）

有较高的初始渲染消耗

<div id="app">
		<h2 v-show="isShow">哈哈哈哈</h2>
		<button type="button" @click="changeshow">点击显示和隐藏</button>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
			        el: '#app',
			        data: {
			            isShow:"ture"
			        },
					methods: {
					    changeshow: function () {
					       this.isShow=!this.isShow
					    }
					}
			    });
		</script>

v-if 根据表达式的真假，地址元素的显示和隐藏（操作Dom元素，直接将元素从DOM树移除）

有较高的切换性能消耗

//如果haha大于1就显示哈哈哈哈
//如果小于1就显示heheehehe
<div id="app">
		<h2 v-if="haha>1">哈哈哈哈</h2>
		<h2 v-else>heheheheheh</h2>
		//也可以多个选一个
		//v-if
		//v-else-if
		//...
		//v-else
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
			        el: '#app',
			        data: {
			            haha:0,
			        },
					methods: {
					   
					}
			    });
		</script>
		//其他用法和v-show一样

面试题：为什么被移除的元素还能显示回来呢

v-bind：设置元素属性（src，tilte，class）

//src
<div id="app">
			<img v-bind:src="imgsrc" >
			<!-- 简写 -->
			<img :src="imgsrc" >
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
			        el: '#app',
			        data: {
			            imgsrc:"img/sheng1.jpg"
			        },
					methods: {
					   
					}
			    });
		</script>

//title
<div id="app">
			
			<img :src="imgsrc" :title="imgtitle" >
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
			        el: '#app',
			        data: {
			            imgsrc:"img/sheng1.jpg",
						imgtitle:"哈哈啊哈哈"
			        },
					methods: {
					   
					}
			    });

//class
<style type="text/css">
			img{
				width: 50px;
				height: 50px;
			}
			.active{
				
				border: 5px solid #ff0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
			<img :src="imgsrc" :title="imgtitle" :class="{active:isActive}" @click="toggleActive" >
			//如果isActive为ture这个类的样式就显示
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
			        el: '#app',
			        data: {
			            imgsrc:"img/sheng1.jpg",
						imgtitle:"哈哈啊哈哈",
						isActive:false
			        },
					methods: {
					   toggleActive:function(){
						   this.isActive=!this.isActive;
					   }
					}
			    });
		</script>
	</body>
</html>

v-for:根据数据生成列表

<div id="app">
		<ul>
			<li v-for="item in arr">{{item}}</li>
			//可以自动循环出四个列表
		</ul>	
		//或者
		<p v-for="(item,index) in arr">{{item}}</p>
		</div>
      
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
			        el: '#app',
			        data: {
			           arr:[1,2,3,4]
			        },
					methods: {
					   toggleActive:function(){
						   this.isActive=!this.isActive;
					   }
					}
			    });
		</script>

<div id="app">
		<h2 v-for="item in vegtables">{{item.name}}</h2>
			
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
			        el: '#app',
			        data: {
			           vegtables:[
						   {name:"小红"},
						   {name:"小名"}
					   ]
			        },
			    });
		</script>

<div id="app">
			<p v-for="(val,key,i) in user">值是{{val}} 键是{{key}} 索引是{{i}}</p>
			<!-- in后面我们放过普通数组，对象数组，对子那个，还可以数字  -->
			<!-- 注意：如果使用 v-for迭代数字的画，前面的count值从1开始 -->
			<p v-for="count in 10 ">这是第{{count}}次循环</p>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					user: {
						id: 1,
						name: '宵夜',
						sex: "女"
					}
				},
			});
		</script>

v-for循环中属性的使用

<div id="app">
			id:<input type="text" v-model="id"/>
			name:<input type="text"v-model="name">
			<button type="button" @click="add">添加</button>
			<!-- 注意循环的时候，key只能使用number获取string -->
			<!-- 注意:key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值 -->
			<!-- 在组件中使用v-for的时候,火鹤在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时指定唯一的字符串/数字类型  :key 值-->
			<p v-for="item in list":key="item.id">
			<input type="checkbox"  />id:{{item.id}}
			{{item.name}}</p>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					id:"",
					name:"",
					list:[
						{id:1,name:'哈哈哈'},
						{id:2,name:'哈哈'},
						{id:3,name:'哈'},
						
					]
				},
				methods:{
					add:function(){
						this.list.push({id:this.id,name:this.name})
					}
				}
			});
		</script>

注意：of可以代替in，因为要更接近js迭代器语法

v-model 获取和设置表单元素（唯一一个双向绑定）

<div id="app">
			<button type="button" @click="setM">修改message的值</button>
			<input type="text" v-model="message" name="" id="" value="" />
			
			<h2>{{message}}</h2>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
			        el: '#app',
			        data: {
			         message:"黑马"
			        },
					methods:{
						setM:function(){
							this.message="成都"
						}
					}
			    });
		</script>

用原生js实现双向绑定

<!-- 模拟双向 绑定 -->
	<div id="app">
		<input type="text" name="" id="te" value="" />
		<div id="di">
			
		</div>
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var obj={};
		Object.defineProperty(obj,'txt',{
			get:function(){
				return obj
			},
			set:function(newname){
				document.getElementById('te').value=newname;
				document.getElementById('di').innerHTML=newname;
				}
		})
		document.addEventListener('keyup',function(e){
			obj.txt=e.target.value
		})
		

v-cloak:解决插值表达值{{}}闪烁的问题

当网速较慢，vue。js还没有加载完成的时候页面上会闪动{{}}的字样，知道vue创建实例，编译模板时，DOM才被替换 ，这个过程是有闪动的

<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
//或者在js中写
<p v-cloak>{{mesagges}}</p>

v-once：只绑定一次，设定之后就不可改

<div id="app">
			<p v-once>{{message}}</p>
			<button type="button" @click="change">点击改变值</button>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
			        el: '#app',
			        data: {
			         message:"不可改变的1234"
			        },
					methods:{
					change:function(){
						this.message="西兰花"
					}
					}
			    });
		</script>

小 总结