web学习---Vue---笔记（1）
该笔记是记录尚硅谷的Vue学习视频的笔记，视频地址为：学习视频地址
初始Vue
Vue组件化的特点
- 组件化
- 声明式编码
- 虚拟DOM+Diff算法，尽量复用DOM节点
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'
el是element的简称
#app，是一个id选择器
作用是：将Vue创建的实例，与div容器建立链接
Vue实例和容器是一一对应
模板语法
Vue模板语法有2大类：
- 插值语法（双大括号表示）
功能：用于解析标签体内容
语法：{{xxx}}，xxx是js表达式，且可以直接读取到data中所有属性。 - 指令语法（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方法实现
事件绑定
- 使用
v-on:xxx或者@xxx绑定事件，其中xxx是事件名； - 事件的回调需要配置在methods对象中，最终会在vm上
- methods中配置的函数，不要使用箭头函数！否则this就不是vm了
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
@click = "demo"和@click = 'demo($event)'效果一致，但后者可以传参
传参，只需要在方法后面加()即可
如果@click后面跟的调用函数没有写()，则函数的实现里面有默认参数event
如果()有自定义参数，则没有event；想要event则 需要写上参数 $event
Vue中的事件修饰符：
- prevent：阻止默认事件（常用）
- stop：阻止事件冒泡（常用）
- once：事件只触发一次（常用）
- capture：使用事件的捕获模式
- self：只有event.target是当前操作的元素时，才触发事件
- 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被改变了")
}
}