Vue基础学习（一）

最新推荐文章于 2022-10-10 13:21:51 发布

方格田

最新推荐文章于 2022-10-10 13:21:51 发布

阅读量164

点赞数

分类专栏： # Vue

本文链接：https://blog.csdn.net/qq_43393963/article/details/99682193

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

介绍

参考：Vue官方文档

什么是Vue?

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，即采用MVVM设计模式，可以参考我的另一篇博文：MVVM与MVP设计模式

兼容性

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

引入

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
=>或者下载vue.js后引入

当然也可以使用脚手架工具：

#全局安装vue-cli，参考官网：https://cli.vuejs.org/zh/guide/installation.html
$cnpm install webpack -g （建议安装时使用cnpm，成功率高）
$npm install -g @vue/cli-init（如果不加init就无法建立node_moduels文件夹）
#创建一个基于webpack模板的新项目
$ vue init webpack my-project
#安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm=new Vue({
	el:'#app',
	=>el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
	=>可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
	
	data:{
		message:'I am Vue';
	}
	=>data是Vue实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，
	=>从而让 data 的属性能够响应数据变化
})

生命周期函数

生命周期函数就是Vue实例在某一个时间点会自动执行的函数
（可以查看官方文档的生命周期函数图示）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue生命周期函数</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			var vm=new Vue({
				el:'#app',
				template:"<div>{{test}}</div>",
				data:{
					test:'hello'
				},
				
				=>生命周期函数并不放在methods里
				beforeCreate:function(){
					console.log('beforeCreate');
				},
				created:function(){
					console.log('created');
				},
				=>此时实例的初始化完成
				=>当Vue实例没有模板template时,会把el,即app的div整体当作模板来渲染
				=>没有模板等价于:template:'<div>hello</div>'
				
				beforeMount:function(){
					console.log(this.$el);
					console.log('beforeMount');
				},
				=>beforeMount执行时页面还没有被渲染
				
				mounted:function(){
					console.log(this.$el);
					console.log('mounted');
				},
				=>mounted执行时页面被渲染
				
				beforeDestroy:function(){
					console.log('beforeDestroy');
				},
				=>组件即将被销毁时执行
				
				destroyed:function(){
					console.log('destroyed');
				},
				=>组件被完全销毁时执行
				
				beforeUpdate:function(){
					console.log(this.$el);
					console.log('beforeUpdated');
				},
				=>数据发生改变,没有被渲染之前执行
				
				updated:function(){
					console.log(this.$el);
					console.log('updated');
				}
			})
		</script>
	</body>
</html>

在创建此Vue实例后，在控制台会自动执行这些函数
在这里插入图片描述

模板语法

1. 插值

文本：使用 {{...}}（双大括号）的文本插值

<div>Message: {{ msg }}</div>

html：使用 v-html 指令。下面的例子渲染为<div> <div> <h1>hello</h1> </div> </div>

<div id="app">
    <div v-html="message"></div>
</div>    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>hello</h1>'
  }
})
</script>

HTML 属性中的值应使用 v-bind 指令

<div v-bind:id="dynamicId"></div>

表达式：Vue.js支持JavaScript表达式

<div id="app">{{ ok ? 'YES' : 'NO' }}</div>    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
  }
})
</script>

2. 指令

本人太懒，直接学习了官方文档：Vue模板语法-指令

计算属性和侦听器

1. 计算属性

Eg：

<div id="app">{{fullName}}&nbsp;{{age}}</div>

var vm=new Vue({
		el:'#app',
		data:{
			firstName:"Dell",
			lastName:"Lee",
			age:20
		},
		computed:{
			fullName:function(){
				console.log('执行计算功能');
				=>可以像绑定普通属性一样在模板中绑定计算属性
				return this.firstName+' '+this.lastName;
			}
		}
})

绑定属性：fullName始终依赖于firstName，this.lastName
缓存机制：仅仅修改age不会调用计算属性的function。而如果在methods中定义一个方法执行同样的功能后，即使仅修改age，也会重新执行该方法。
在这里插入图片描述

2. 侦听属性

观察和响应 Vue 实例上的数据变动。与计算属性一样，也存在缓存机制

			var vm=new Vue({
				el:'#app',
				data:{
					firstName:"Dell",
					lastName:"Lee",
					fullName:'Dell Lee',
					age:20
				},
				=>当firstName和lastName有一个变化时，都要对fullName做出响应
				watch:{
					firstName: function () {
						console.log('执行该方法');
						return this.firstName+' '+this.lastName;
					},
					lastName: function () {
						console.log('执行该方法');
						return this.firstName+' '+this.lastName;
					}

				}
			})

相对来说，侦听器方法实现起来较计算属性复杂，而且自定义方法不存在缓存机制，因此，当某个功能可以用自定义方法、计算属性、侦听器实现时，推荐使用计算属性，既简洁性能又好。

关于侦听器，也可以使用命令式的 vm.$watch API，我的另外一篇博客：Vue之vm.$watch理解

3. getter与setter

计算属性默认只有 getter ，在需要时也可以提供一个 setter

			computed:{
					fullName: {
						get:function () {
							return this.firstName+' '+this.lastName;
						},
						set:function (value) {
							var ary=value.split(' ');
							this.firstName=ary[0];
							this.lastName=ary[1];
						}
					}
				}