Vue_基础学习

最新推荐文章于 2024-08-09 15:29:32 发布

sinat_39045958

最新推荐文章于 2024-08-09 15:29:32 发布

阅读量327

点赞数

本文链接：https://blog.csdn.net/sinat_39045958/article/details/87885120

版权

start

SPA

单页应用
Single Page Application
特点
- 更好的用户体验
  - 让用户在web App 感受native app 的速度和流畅
- 前后端职责分离,架构清晰
  - 前端负责交互逻辑, 后端负责数据处理
- 前后端单独开发,单独测试
- 良好的交互体验,前端进行的是局部渲染
- 不利于搜索引擎优化

Vue

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

第一个VUE程序

<html>
	<head>
		<meta charset="utf-8" />
		<title>simple_Vue</title>
		<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
	
		<div id="myApp">
			<h1>{{msg}}</h1>
		</div>
		
		<script type="text/javascript">
			$(document).ready(function(){
				//创建vue对象
				var vm = new Vue({
					//绑定
					el:"#myApp",
					//代理数据
					data:{
						msg:"hello"
					}
				})
			})
		</script>
	</body>
</html>

Vue 生命周期图示

在这里插入图片描述

生命周期钩子 (可以当成中间件理解)
- beforeCreate
  - 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用
- created
  - 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见
- beforeMount
  - 在挂载开始之前被调用：相关的 render 函数首次被调用
- mounted
  - el 被新创建的 vm. $e l 替换，并挂载到实例上去之后调用该钩子。如果 r o o t 实例挂载了一个文档内元素，当 m o u n t e d 被调用时 v m .$ el 也在文档内
- beforeUpdate
  - 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前
- updated
  - 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
- activated
  - keep-alive 组件激活时调用
- deactivated
  - keep-alive 组件停用时调用
- beforeDestroy
  - 实例销毁之前调用。在这一步，实例仍然完全可用
- destroyed
  - Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

 var vm = new Vue({  
	  			el:"#myApp",  
	  			data:data,  
	  			created:function(){  
	  				console.log("---created---", this);  
	  			}  
	  		});

Vue实例

构造器

通过构造函数 Vue 创建一个 Vue 的根实例

var vm = new Vue({  
  });

属性

$el
- Vue 实例使用的根 DOM 元素
$data
- 每个 Vue 实例都会代理其 data 对象里所有的属性

	<body>  
	  	<div id="myApp">  
			<p>{{ a }}</p>
			<p>{{ b }}</p>
	  	</div>  
	  	<script type="text/javascript">  
	  		var data = {  
	  			a:1,  
	  			b:2  
	  		};  
	  		var vm = new Vue({  
	  			el:"#myApp",  
	  			data:data  
	  		});  
	  		console.log(vm.$data === data);  
	  		data.b = 3;  
	  		console.log(vm.b);
				console.log(data.b);
				// vm.b 即是 data.b
	  	</script>  
	  </body>

$watch v-on

> vm.$watch(expOrFn, callBack[, options])

			<body>  
			<div id="myApp">  
				<button type="button" v-on:click="a += 1">add-a</button>
				<button type="button" v-on:click="b += 1">add-b</button>
				<!-- 使用 “Mustache” 语法（双大括号）的文本插值 进行数据绑定 -->
				<p>a:{{ a }}--&--b:{{ b }}</p>
		  	</div>  
		  	<script type="text/javascript">  
		  		var data = {  
		  			a:1,  
		  			b:2
		  		};  
		  		var vm = new Vue({  
		  			el:"#myApp",  
		  			data:data  
		  		});  
					// 监督a,a值发生变化时执行?
		  		vm.$watch("a", function(newVal, oldVal){  
		  			console.log("newVal = " + newVal + " ----- " + "oldVal = " + oldVal);  
		  		});  
		  	</script>  
		  </body>

v-html

双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，需要使用 v-html 指令

	<body>  
			<div id="myApptwo">  
				<p>解释成文本{{ htmlshow }}</p>  
				<!-- <b>解释成html<b> 并不会被打印 -->
				<p v-html="htmlshow"><b>解释成html<b>{{ htmlshow }}</p>  
		</div>  
			<script type="text/javascript">  
				var vm = new Vue({  
					el:"#myApptwo",  
					data:{  
						htmlshow:"<span><b>请解释我<b></span>",  
					}  
				});  
			</script>
	</body>

v-bind

可以绑定属性值变化

	<body>  
	  	<div id="myApp">  
	  		<button v-bind:disabled="flag">按钮</button>  
	  	</div>  
	  	<script type="text/javascript">  
	  		var vm = new Vue({  
	  			el:"#myApp",  
	  			data:{  
	  				flag:false  
	  			}  
	  		});  
	  	</script>  
	  </body>

v-text

更新元素的 textContent

 <body>  
  	<div id="myAppthree">  
  		<p v-html="textinline"></p>  
  		<p v-text="textinline"></p>  
  	</div>  
  	<script type="text/javascript">  
  		var vm = new Vue({  
  			el:"#myAppthree",  
  			data:{  
  				textinline:"<b>sunck is a good man!<b>"  
  			}  
  		});  
  	</script>  
  </body>

v-show

** 根据表达式之真假值，切换元素的 display CSS 属性
当条件变化时该指令触发过渡效果**

<body>  
	<div id="myAppfour">  
  		<h1 v-show="flag">{{v_show_flag}}</h1>  
  	</div>  
  	<script type="text/javascript">  
  		var vm = new Vue({  
  			el:"#myAppfour",  
  			data:{  
  				v_show_flag: "flag的真假决定你们能否看到我",  
  				flag:false 
  			}  
  		});  
  	</script>   
  </body>

v-if,v-else,v-else-if

根据表达式的值的真假条件渲染元素。

<body>  
	  	<div id="myApp_five">  
  		<h1 v-if="flag <= 1">{{ ifflag }}</h1>  
  		<h1 v-else-if="flag <= 5">{{ elifflag }}</h1>  
  		<h1 v-else>{{ elseflag }}</h1>  
		<button type="button" v-on:click="flag += 1">flag({{ flag }}) add</button>
  	</div>  
  	<script type="text/javascript">  
  		var vm = new Vue({  
  			el:"#myApp_five",  
  			data:{  
				ifflag: 'now flag <= 1',
				elifflag: 'now 1 < flag <= 5',
				elseflag: 'now flag > 5',
  				flag:0 
  			}  
  		});  
  	</script>
  </body>

v-for

	 <body>  
 		<div id="myApp_six"> 
		<table border="1px solid red" cellspacing="2px" cellpadding="2px">
			<tr>
				<td v-for="(x, index) in arr">{{ index + ':' + x }}</td>
			</tr>
			<tr>
				<td v-for="x in person1">{{ x }}</td>
			</tr>
			<tr>
				<td v-for="x in person2">{{ x }}</td>
			</tr>
			<tr>
				<td v-for="x in end">{{ x }}</td>
			</tr>
		</table>
	  		<hr>  
	  	</div>  
	  	<script type="text/javascript">  
	  		var vm = new Vue({  
	  			el:"#myApp_six",  
	  			data:{  
	  				arr:[  
	  					"姓名",  
	  					"年龄",  
	  					"得分",  
	  				],
					person1:[
						"张三",
						"17",
						99
					],
					person2:[
						"李四",
						"18",
						96
					],
					//  用于for:还可以是字符串,或数字(例如:5 -类似于-> range(1, 6)),或字典......
					end: 'bye'
	  			}  
	  		}); 
	  		// 数组操作,能让视图自动刷新	,定时5秒后执行?
			setTimeout(function(){
				Vue.set(vm.arr, 3, "评价");
				vm.arr.splice(2, 1, "score");
			},5000) 
	  	</script> 
	  </body>

v-model

在表单控件或者组件上创建双向绑定

		- <body>  
		  	<div id="myApp">  
		  		<input type="text" v-model="message">  
		  		<p>message:  {{message}}</p>  
		  	</div>  
		  	<script type="text/javascript">  
		  		var vm = new Vue({  
		  			el:"#myApp",  
		  			data:{  
		  				message:""  
		  			}  
		  		});  
		  	</script>  
		  </body>

methods与computed

computed

<body>  
  	<div id="myApp">  
  		<p>{{message}}</p>	  
        </div>  
  	<script type="text/javascript">  
  		var vm = new Vue({  
  			el:"#myApp",  
  			data:{  
  				firstName:"张",  
  				lastName:"三"  
  			},  
  			computed:{  
  				message:function(){  
  					return this.firstName + this.lastName;  
  				}  
  			}  
  		});  
  		setTimeout(function(){  
  			vm.firstName = "李";  
  		}, 3000);  
  	</script>  
  </body>

methods computed

<body>  
<div id="comapp">
			<p>Original message: {{ message }}</p>
			<p>Computed reversed message: {{ reversedMessage }}</p>
			<p>Reversed message: "{{ reMessage() }}"</p>
			<!-- <p>data:{{ nowda }}</p> -->
		</div>
		<script type="text/javascript">
			var vm666 = new Vue({
				el: '#comapp',
				data: {
					message: 'Hello'
				},
				computed: {
					reversedMessage: function () {
			      // `this` 指向 vm 实例
						return this.message.split('').reverse().join('')
					},
				},
				// 在组件中
				// 可以将同一函数定义为一个方法而不是一个计算属性
				methods: {
					reMessage: function () {
						return this.message.split('').reverse().join('')
					},
				}
			})
			setTimeout(function(){
				vm666.message = 'Goodbyl'
			},4000)
		</script>
  </body>

我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用 methods 替代。

内置过滤器

	 <body>  
	  	<div id="myApp">  
	  		<h1>{{good | upperCase}}</h1>  
	  		<h1>{{good | lowerCase}}</h1>
	  		<h1>{{good | limitBy(3)}}</h1>   
	  	</div>  
	  	<script type="text/javascript">  
	  		var vm = new Vue({  
	  			el:"#myApp",  
	  			data:{  
	  				good:"Nei Zhi Guo Lv Qi"  
	  			},  
	  			filters:{  
	  				upperCase:function(value){  
	  					return value.toUpperCase();  
	  				},
	  				lowerCase:function(value){  
	  					return value.toLowerCase();  
	  				},
	  				limitBy:function(value, num){  
	  					return value.slice(0, num);  
	  				},   
	  			}  
	  		});  
	  	</script>  
	  </body>

组件

组件可以扩展 HTML 元素，封装可重用的代码 ,(类似于宏)

		<body>  
		<div id="myApp_m">  
		  		<my-component></my-component>  
		</div>  
		<div id="myApp_n">  
		  		<my-component></my-component>  
		</div>  
		<script type="text/javascript">  
		  		Vue.component("my-component", {  
		  			template:"<p>这里是一个组件</p>"  
		  		});  
		    
		  		var vm_m = new Vue({  
		  			el:"#myApp_m"  
		  		});  
		  		var vm_n = new Vue({  
		  			el:"#myApp_n"  
		  		});  
		</script>  
		  </body>

父组件向子组件传递数据

要让子组件使用父组件的数据，我们需要通过子组件的props选项

<body>  
	<div id="myApp_parent_son">  
  		<my-component my-msg="我在父元素中"></my-component>  
  	</div>  
  	<script type="text/javascript">  
  		var vm = new Vue({  
  			el:"#myApp_parent_son",  
  			components:{  
  				"my-component":{  
  					props:["myMsg"],  
  					template:"<h1>看,父组件信息:{{ myMsg }}</h1>"  
  				}  
  			}  
  		});  
  	</script>  
</body>

HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式)

子组件向父组件传递数据

 <body>  
  	<div id="myApp">  
    		<p>{{ total }}</p>  
    		<button-counter v-on:increment="incrementTotal"></button-counter>  
    		<button-counter v-on:increment="incrementTotal"></button-counter>  
  	</div>  
    
  	<script type="text/javascript">  
  		var vm = new Vue({  
  			el:"#myApp",  
  			data:{  
  				total:0  
  			},  
  			methods:{  
  				incrementTotal:function(){  
  					this.total += 1;  
  				}  
  			},  
  			components:{  
  				"button-counter":{  
  					template:"<button v-on:click='increment'>{{ counter }}</button>",  
  					data:function(){  
  						return {  
  							counter: 0  
  						};  
  					},  
  					methods:{  
  						increment:function(){  
  							this.counter += 1;  
  							this.$emit("increment");  
  						}  
  					}  
  				}  
  			}  
  		});  
  	</script>  
  </body>

非父子组件通信

在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线

<body>  
  	<div id="myApp">  
    		<button-counter></button-counter>  
    		<my-component></my-component>  
  	</div>  
  	<script type="text/javascript">  
  		var bus = new Vue();  
  		var vm = new Vue({  
  			el:"#myApp",  
  			components:{  
  				"button-counter":{  
  					template:"<button v-on:click='increment'>按钮</button>",  
  					methods:{  
  						increment:function(){  
  							bus.$emit("hello", 18);  
  						}  
  					}  
  				},  
  				"my-component":{  
  					template:"<h1>Hello World</h1>",  
  					created:function(){  
  						console.log("component");  
  						bus.$on("hello", function(age){  
  							console.log(age);  
  						});  
  					}  
  				}  
  			}  
  		});  
  	</script>  
  </body>

路由

http://router.vuejs.org/zh-cn/

如果只需要非常简单的路由而不需要引入整个路由库，可以动态渲染一个页面级的组件像这样：

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
 '/': Home,
 '/about': About
}

new Vue({
 el: '#app',
 data: {
   currentRoute: window.location.pathname
 },
 computed: {
   ViewComponent () {
     return routes[this.currentRoute] || NotFound
   }
 },
 render (h) { return h(this.ViewComponent) }
})