# vue3

## 1.vue基本示例

vue基本示例:

注意点:

“`html
1. 页面需要提供根标签

vue只对根标签内的内容负责 可以使用vue的语法 绑定 和监控 出了根标签没反应
因为vue根据根标签中的内容 把dom操作藏到框架生成的代码中
并且 根据div生成虚拟dom 每次通过框架 先在虚拟dom上做dom操作 之后统一渲染
“`

“`html
2. 导入vue的创建函数 createApp
“`

“`html
3.调用createApp 并在其中通过json设置vue参数
“`

“`html
4.在设置参数中的setup(){} 函数中 设置vue框架要使用的变量
变量如果需要在div中使用 必须加return
setup(){
/* 变量 model*/
let myVal = “你好 vue”;
return{
myVal
}
}
“`

“`html
5. 创建完成后需要调用.mount(“#app”) 做页面初次渲染 vue中这个过程叫挂载
“`

“`html

“`

## 2.vue原理

#### 响应式数据原理(改变量 页面自动变化渲染)

// vue2原理 数据劫持(把dom操作 藏在getset方法中) vue2加载过程慢

“`js
Object.defineProperty(myJson,”newAddr”,{
get(){
console.log(“get方法触发了”);

},
set(val){
console.log(“set方法触发了”);
document.getElementById(“myTitle”).innerHTML = val;
}
})
“`

// vue3原理 数据劫持(简单数据 数字 bol值 字符串) 大对象(代理对象 重写get/set)

“`js
let newJson = new Proxy(myJson,{
get(target,prop){
console.log(`在读取${prop}属性`);

return target[prop];
},
set(target,prop,val){
console.log(`在设置${prop}属性值为${val}`);
if(prop==”name”){
document.getElementById(“myTitle”).innerHTML = val;
}
if(prop==”age”){
document.getElementById(“myText”).value = val;
}
target[prop] = val;
}
})
“`

#### 虚拟dom

vue中合理利用了js中的虚拟dom思想

优化原生js多次渲染页面造成的卡顿情况

//指令式js 渲染 浏览器 html解析器 css解析器 js解析器

// document.getElementById(“myTitle”).innerHTML = 1;

// document.getElementById(“myTitle”).innerHTML = 2;

// document.getElementById(“myTitle”).innerHTML = 3;

// 虚拟的dom结构 统一赋值 做一次显示

原理示例:

“`html

“`

## 3.常用新语法

#### 3.1es模块化语法(通过模块化做导入导出 替换通过script标签导入js文件)

“`html
其他js文件 需要有导出
export 导出

“`

##### 1默认导出 和导入

js文件中

“`js
let myData = “xxxx”
export default myData

注意:只能导出一个对象
“`

导入

“`html

“`

##### 2指定导出 和导入

js文件中

“`js
let myData1 = “xxxx1”
let myData2 = “xxxx2”
export {myData1,myData2}

注意:可以导出多个对象 函数
“`

导入

“`html

“`

#### 3.2 函数定义

通过箭头函数 替代匿名函数

“`js
function(){}
替换为
()=>{}
如果形参只有一个 ()可以不写
d=>{}
“`

示例:

“`js
定义函数
let newFun = (a,b)=>{
return a+b;
}
“`

“`js
遍历时使用
let myArr = [1,2,3,4];
myArr.forEach(d=>{
console.log(d);
})
“`

“`js
定时函数使用
setInterval(()=>{
console.log(111);
},100)
“`

#### 3.3json中函数的简化定义

注意对比

“`js
let myJson = {name:”jack”,readBook:function(){
console.log(“读书”);
}
}
可以简化为:
let myJson = {name:”jack”,readBook(){
console.log(“读书”);
}
}
“`

#### 3.4修饰符

const 用来修饰常量 (实际上 不能通过=赋值) 语法特点

在js中 json对象 经常用const修饰符

示例:

“`js
定义json
const myObj = {name:”jack”,age:15};
myObj.name=”rose”;
console.log(myObj);
定义函数
const myFun3 = ()=>{
console.log(1111);
}
“`

## 4.vue中变量定义

vue中存在三种变量

##### 普通变量(跟页面显示无关)

用来记录程序执行过程中的变化数据 类似之前的公共变量

let imgIdx= 1;

##### 响应式变量(改变量 页面自动渲染)

“`js
1 引用对象 ref object.definedProperty 简单数据类型(数字 bol 字符串) 全都能用 但是复杂对象慢
//定义
const messageRef = ref(123)
//赋值
messageRef.value = “你好 Vue!”
“`

“`js
2 代理对象 reactive 不建议用在简单类型数据 代理对象 proxy json对象
//定义
const myJson = reactive({name:”jack”,age:15});
//赋值
myJson.name = “rose”;
myJson.age = 77;
“`

##### 函数定义:

使用箭头函数 简化函数定义

“`js
const changeName = ()=>{
console.log(myJson);
messageRef.value = “‘你好 Vue!'”
//message = ‘你好 Vue!’
myJson.name = “rose”;
myJson.age = 77;
}
“`

“`html

“`

## vue指令 用于绑定变量与DOM的对应关系

## 5.显示文本

##### 常用指令 {{}} 插值表达式

##### v-hmtl 解析html标签

​ 插值表达式: 显示纯文本 不能解析html标签相当于 innerText属性


v-html指令 可以解析html标签 相当于innerHTML属性

vue中页面元素通常直接在页面中编辑 不需要解析html标签 v-html使用较少


“`html

“`

## 6.属性绑定

v-bind 作用时让变量与页面元素的属性建立关联


“`html
元素属性
v-bind:type=”textType”
变量
const textType = ref(‘button’);

v-bind:type 可以简写 :type
“`

注意:

属性绑定值的部分 可以使用js代码段


“`html

“`

## 7.分支指令

页面生成多分支 根据不同情况 显示页面的不同元素


“`html
根据分支生成页面元素
单分支
v-if

双分支
v-if
v-else

多分支
v-if
v-else-if
v-else
“`

注意与v-show的区别

“`html
//v-if 分支指令 为false时 代码不存在
//v-show 显示指令 为false时 控制样式 display:none
“`



“`html

“`

## 8.事件指令

onclick 原生事件

v-on:click vue中的事件

@click 简写

原生事件 on 换成@ 就可以了

注意:vue中配置的函数 如果没有传参 不用写()


“`html

“`

## 9.双向绑定v-model

“`html
普通属性绑定 单向的
model — > view
变量 页面元素
当model发生改变事 view会自动变化

v-model表单元素
双向绑定
model < --- > view
变量 页面元素
双方一起变化
“`

###### 输入类(输入框 密码框):

“`html
输入类(输入框 密码框)
v-model 替代value属性
单向
双向
“`


###### 选择类(单选按钮 多选按钮):

“`html
v-model 分组 表示被选中的值 checked用不到
男
女
radio 使用单值变量 const gender = ref(‘1’)

java
js
python
checkbox 使用数组变量 const hobby = ref([])
“`


###### 下拉列表

“`html
———请选择————北京1北京2北京3
“`


“`html

“`

## 10.遍历指令

v-for 遍历生成元素

“`html
v-for=”每次遍历到的元素 in 遍历的集合”
v-for=”(每次遍历到的元素,索引) in 遍历的集合”
v-for=”obj in list” obj作为遍历到元素的临时变量
“`


“`html
遍历时 生成元素要搭配的语法
生成文本 {{}}
生成属性 :属性
“`


“`html

“`