web学习---Vue---笔记(1)

该笔记是记录尚硅谷的Vue学习视频的笔记,视频地址为:学习视频地址

初始Vue

Vue组件化的特点

  • 组件化
  • 声明式编码
  • 虚拟DOM+Diff算法,尽量复用DOM节点
    web学习---Vue---笔记(1)_第1张图片

H5的组件,是把某一个模块封装,里面写HTML\CSS\JS等,算是一个页面里面的某个模块。在移动端,可能算是一个单独的view
移动端的组件,指的是将某些功能类似或者业务封装为组件

脚手架,即是一种安装Vue的方法

创建Vue实例

var vueName = new Vue()

Vue创建后,需不需要传递参数?传几个参数?

只传一个参数,并且该参数是一个对象类型(对象类型,使用{}),该对象被称为配置对象
配置对象里面,是key: value的形式
key是约定好的,不能修改
value可以改,但是value的类型不能改

<div id="app">
	<h2>学校:{{schoolName}}</h2>
	<p>年龄:{{age}}</p>
</div>

var vueName = new Vue({
	el:"#app"//el用于指定当前Vue实例为哪个容器服务
	data:{//data中用于存储数据,数据供el所指定的容器去使用
		schoolName:"Vue一中",
		age: "18"
	}
})

el: '#root'
elelement的简称
#app,是一个id选择器
作用是:将Vue创建的实例,与div容器建立链接

Vue实例和容器是一一对应

模板语法

Vue模板语法有2大类:

  1. 插值语法(双大括号表示)
    功能:用于解析标签体内容
    语法:{{xxx}},xxx是js表达式,且可以直接读取到data中所有属性。
  2. 指令语法(v-开头)
    功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)
    举例:v-bind:href="xxx" 或者 简写为 :href="xxx",xxx同样要写js表达式,且可以直接读取到data中所有属性,

链接地址
这样,a标签的url地址仅仅就是“url”字符串

链接地址
使用v-bind,会将url字符串,看成表达式执行,替换为data里面的key为url的value值
在控制台可以看到,上面的代码,转换为:
链接地址

v-bind会将原来的字符串,当做表达式去执行

Vue中有2种数据绑定的方式:
v-bind是单向绑定,数据只能从data流向页面
v-model是双向绑定

v-model只能应用在表单元素(输入类元素)上

el与data的两种写法

el

方法一:el:"#app"
方法二:vueName.$mount('#app')

data

方法一:对象式

data:{//data中用于存储数据,数据供el所指定的容器去使用
	schoolName:"Vue一中",
	age: "18",
	url: "https://www.baidu.com"
}

方法二:函数式

data:function(){//data中用于存储数据,数据供el所指定的容器去使用
	return{
		schoolName:"Vue一中",
		age: "18",
		url: "https://www.baidu.com"
	}
}

可简写为:

data(){//data中用于存储数据,数据供el所指定的容器去使用
	return{
		schoolName:"Vue一中",
		age: "18",
		url: "https://www.baidu.com"
	}
}

MVVM模型

M:模型(Model):data中的数据
V:视图(View):模板代码
VM:视图模型(ViewModel):Vue实例

data中所有的属性,最后都出现在了vm身上
vm身上所有的属性,及Vue原型上所有属性,在Vue模板中都可以直接使用

数据代理

defineProperty动态添加一个属性:

			let person = {
				name: '张三',
				sex: '男'
			}
			
			//需要三个值:要加属性的对象,要加属性的名字,要加属性的值(配置项)
			Object.defineProperty(person, 'age', {
				value: 18
			})

			console.log(person);
			//{name: '张三', sex: '男', age: 18}

数据代理:通过一个对象代理,对另一个对象中属性的操作(读/写)

主要是通过 get、set方法实现

事件绑定

  1. 使用v-on:xxx或者@xxx 绑定事件,其中xxx是事件名;
  2. 事件的回调需要配置在methods对象中,最终会在vm上
  3. methods中配置的函数,不要使用箭头函数!否则this就不是vm了
  4. methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象
  5. @click = "demo"@click = 'demo($event)' 效果一致,但后者可以传参

传参,只需要在方法后面加()即可
如果@click后面跟的调用函数没有写(),则函数的实现里面有默认参数event
如果()有自定义参数,则没有event;想要event则 需要写上参数 $event

Vue中的事件修饰符:

  1. prevent:阻止默认事件(常用)
  2. stop:阻止事件冒泡(常用)
  3. once:事件只触发一次(常用)
  4. capture:使用事件的捕获模式
  5. self:只有event.target是当前操作的元素时,才触发事件
  6. passive:事件的默认行为立即执行,无需等待事件回调执行完毕
<a href="https://www.baidu.com" @click.prevent="showInfo">这是链接地址</a>
<a href="https://www.baidu.com" @click.once="showInfo">这是链接地址</a>

键盘事件

@keydown 键盘按键按下
@keyup 键盘按键松手

Vue中常用的按键别名:
回车 enter
删除 delete
退出 esc
空格 space
换行 tab
上 up
下 down
左 left
右 right

计算属性

在引入计算属性之前,先看几个不用计算属性的例子,慢慢引出 计算属性

需求:
分别输入姓和名字,最后组合成姓名

插值法

即,使用{{}}

		<div id="app">
			<!-- v-model双向绑定 -->
			姓:<input type="text" v-model:value="firstName"><br>
			<!-- v-model:value 可简写为 v-model -->
			姓:<input type="text" v-model="firstName"><br>
			名:<input type="text" v-model="lastName"><br>
			全名:<span>{{firstName +"-"+ lastName}}</span><br>
			<!-- 或者 -->
			全名:<span>{{firstName}}-{{lastName}}</span><br>

			<!-- 不管输入几位,姓只要前三位 -->
			全名:<span>{{firstName.slice(0, 3)}}-{{lastName}}</span><br>
		</div>
		<script type="text/javascript">
			var vueName = new Vue({
				el:"#app",
				data:{
					firstName: "张",
					lastName: "三"
				}
			})
		</script>

在firstName.slice(0, 3)里面,仅仅是截取前三位的需求,如果里面还有各种sao操作,那{{}}里面要写的代码太多了,因此,可以写到一个methods里面

使用methods方法

		<div id="app">
			全名:<span>4{{fullName()}}</span><br>
		</div>

		var vueName = new Vue({
				el:"#app",
				data:{
					firstName: "张",
					lastName: "三"
				},
				methods:{
					fullName(){
						return this.firstName +"-"+ this.lastName;
					}
				}
			})

计算属性

什么是属性?
对于Vue来说,data里面的数据,都是属性

计算属性:
要用的属性不存在,要通过已有属性计算得来

拿现有的属性,去加工、计算,生成一个全新的属性

  • 计算属性不放在data里面,要放在computed里面
    里面的属性,是一个对象
    对象里面有一个get方法

get方法里面的this是vm
计算属性最终会出现在vm上,直接读取使用即可

<body>
		<div id="app">
			<!-- v-model双向绑定 -->
			姓:<input type="text" v-model:value="firstName"><br>
			<!-- v-model:value 可简写为 v-model -->
			姓:<input type="text" v-model="firstName"><br>
			名:<input type="text" v-model="lastName"><br>

			<!--4个调用,只被调用一次,get有缓存 -->
			全名:<span>计算属性: {{fullName}}</span><br>
			全名:<span>计算属性: {{fullName}}</span><br>
			全名:<span>计算属性: {{fullName}}</span><br>
			全名:<span>计算属性: {{fullName}}</span><br>
			全名:<span>计算属性: {{fullName}}</span><br>
		</div>
		<script type="text/javascript">
			var vueName = new Vue({
				el:"#app",
				data:{
					firstName: "张",
					lastName: "三"
				},
				computed:{
					fullName:{
						// get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
						// get什么时候调用?1. 初次读取fullName的时候 2.所依赖的数据发生变化时
						get(){
							console.log('get被调用');
							return this.firstName + '-' + this.lastName;
						},
						// set什么时候被调用?当fullName被修改时
						set(value){
							console.log("set被调用", value);
							const array = value.split('-')
							this.firstName = array[0];
							this.lastName = array[1];
						}
					}
				}
			})
		</script>
	</body>

当只读不改(只使用get不使用set),可以简写

			computed:{
					// 是一个函数
					fullName2:function(){
						console.log("当get使用");
					},
					fullName3(){
						console.log("当get使用");
					}

				}


2023年


监听属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <script src="../js/v2.6.10/vue.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style type="text/css">
			.active{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
		<script type="text/javascript">
			var vueName = new Vue({
				el:"#app",
				data:{
					isHot: true
				},
				computed:{
					info(){
						return this.isHot ? "炎热" : '凉爽'
					}
				},
				methods:{
					changeWeather(){
						this.isHot = !this.isHot;
					}
				},
				watch:{//监听
					isHot:{
						immediate: true,//初始化的时候,让handler调用一次
						//handler什么时候调用?当isHot发生改变的时候
						handler(newValue, oldValue){//可以有两个参数
							console.log("天气被修改了");
						}
					}
				}
			})
		</script>
	</body>
</html>
//监视多级结构中某个属性的变化
					"numbers.a":{
						//监视多级结构中,所有属性的变化
						deep:true,
						handler(){
							console.log("a被改变了")
						}
					}

你可能感兴趣的:(vue.js,前端,学习)