Vue（一）

Vue

是什么

Vue.js是前的主流框架之一，和Angular.js、React.js一起，并称为前端三大主流框架。

是一套构建用户界面的框架。

为什么

让用户不再操作DOM元素；

什么是DOM？文档对象模型（Document Object Model），HTML文档解析成树形结构；在操作过程中，将一个元素看成一个对象，使用它的属性和方法进行相关操作。

MVC层（model-view-controller，后端数据-模板页面-控制器）

https://www.runoob.com/design-pattern/mvc-pattern.html

后端

• M

model层，只负责操作数据库。

• V

用户可视化界面。

• C

controller，业务逻辑处理层。

MVVM（Model-View-ViewModel）

将视图 UI 和业务逻辑分开

前端

• M

JavaScript对象

数据。

• VM

关联两者，把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

• V

显示。

html框架。

一个MVVM框架和jQuery操作DOM相比有什么区别？

答：MVVM不关心DOM的结构，关注的是数据的存储。

    
{{ msg }}

        



	
Hello, name:{{content}}!
	
You are age:{{content}}.

	

https://cn.vuejs.org/v2/api/

数值绑定语法

v-cloak，防止网页卡卡卡出源代码，隐藏未编译的 Mustache 标签直到实例准备完毕。

v-text ，string

v-html，解释为html

v-bind，缩写:，数据data绑定

v-on，缩写@，绑定事件监听器。

methods:{ //这个methods属性中定义了当前vue实例所有可用的方法
show:function(){
alert("Hello")
 }
}

事件修饰符https://v3.cn.vuejs.org/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

.stop
.prevent
.capture
.self
.once
.passive

v-model

表单元素，语法糖，数据表单元素和Model中数据的双向数据绑定，只能运用在表单元素中。

eval()的使用

https://www.runoob.com/jsref/jsref-eval.html

通过属性绑定为元素设置class类样式（4种）

css

			
如果明天有可能见不到你，祝你早上好，下午好，晚上好
	

v-bind

• 数组

创建view实例，得到VM。

var vm = new Vue({
			el: '#app',
			data:{},
			methods:{}
		});

			
如果明天有可能见不到你，祝你早上好，下午好，晚上好
	

• 数组中使用三元表达式（不妨切到下一个）

var vm = new Vue({
			el: '#app',
			data:{
				flag:false
			},
			methods:{}
		});

			
如果明天有可能见不到你，祝你早上好，下午好，晚上好
	

• 数组中嵌套对象

var vm = new Vue({
			el: '#app',
			data:{
				flag:true
			},
			methods:{}
		});

			
如果明天有可能见不到你，祝你早上好，下午好，晚上好
	

• 直接使用对象

			
如果明天有可能见不到你，祝你早上好，下午好，晚上好
	

			
如果明天有可能见不到你，祝你早上好，下午好，晚上好
	

var vm = new Vue({
			el: '#app',
			data:{
				flag: true,
				classObj: {red:true, thin:false, italic:false, active:false}
			},
			methods:{}
		});

通过属性绑定为元素设置style行内样式

• 在元素上通过:style的样式，书写样式对象

	

			
如果明天有可能见不到你，祝你早上好，下午好，晚上好
	


	

v-for指令的四种使用方式

	

			
{{item}}
	


	

	

			
索引值{{i}} 每一项的值{{item}}
	


	

	

			
{{user.id}} {{user.name}} 
	


	

	

			
{{val}}--->{{key}} 
	


	

	

			
{{count}}--->{{count+1}} 
	


	

		
	


		

			Id:
			
			

			Name:
			
			

			
		

		

			 {{item.id}}--->{{item.name}} 
	


	

key值的绑定！

v-if有较高的切换性能消耗 v-show 有较高的初始渲染消耗

每次都会删除或创建元素；切换display:none;

		
	


			

			
这是用v-if控制的元素
			这是用v-show控制的元素
	


	

案例：综合以上

关键的几个点是：VM如何连接V与M；

V：使用到了v-model，v-on，v-bind；

VM：自定义add方法，del方法，search方法；

学习or复习JavaScript中的内容：

push

https://www.w3school.com.cn/jsref/jsref_push.asp

splice

https://www.w3school.com.cn/jsref/jsref_splice.asp

some

https://www.w3school.com.cn/jsref/jsref_some.asp

findIndex

https://www.w3school.com.cn/jsref/jsref_findindex.asp

	
	
	
	
	
	
	


	

		
		

			

				
豆瓣Top
			
			
			

				start!
			
			
				id:
				
				
			
			
				name:
				
			
			
				date:
				
			
			
				score:
				
			
			
		
		
		

			

				

					
id
					
name
					
date
					
score
	
					
operation
				
			

			

				

					
{{item.id}}
					
{{item.name}}
					
{{item.date}}
					
{{item.score}}
					

						
						删除
					
				
			
		
		

	

	
	

根据关键字实现数组的过滤

新定义keywords，是我在“搜索名称或关键词”中输入的内容，

search函数：定义一个新的列表存放找到的item，是按照item.name进行的查找，采用了forEach，filter

https://www.w3school.com.cn/jsref/jsref_foreach.asp

https://www.w3school.com.cn/jsref/jsref_filter.asp

V:

			
				搜索名称或关键词：
				
			

			
				
				
					{{item.id}}
					{{item.name}}
					{{item.date}}
					{{item.score}}
					
						
						删除
					
				
			

M:

		data:{
				// 定义，上部分已经做了数据绑定
				id:'',
				name:'',
				date:'',
				score:'',
				keywords:'',
				list:[
				{id:1, name:'肖申克的救赎', date:1994, score:9.7},
				{id:2, name:'霸王别姬', date:1993, score:9.6},
				{id:3, name:'阿甘正传', date:1994, score:9.5},
				{id:4, name:'这个杀手不太冷', date:1994, score:9.4},
				{id:5, name:'泰坦尼克号', date:1997, score:9.4}
				]
			},

*** VM:

			search(keywords){
					/* 方法一
					var newList = []
					this.list.forEach(item=>{
						// 包含了这个keywords，添加到新的列表中去
						if(item.name.indexOf(keywords) != -1){
							newList.push(item)
						}
					})
					return newList
					*/

					// 方法二：
					var newList = this.list.filter(item => {
						if (item.name.includes(keywords)){
							return item
						}
					})
					return newList
				}