用于快速构建用户界面的javascript框架

vue3 创建的方法

< script>
// 创建应用的方法
const {createApp} = window.Vue
// 创建应用
const app = createApp({ data(){
// 定义初始化数据
// 在vue3中data写法是函数，返回一个对象，对象中写初始化数据
return { msg:"hello vue" } } })
// 挂载应用
app.mount('#app')
< /script>

vue2 创建的方法

第一种方式 el:' '
< script>
new Vue({
el:'#app',
data:{
} });

第二种方式 .$mount(' ');

new Vue({
data:{
msg:'HELLO VUE'
} })
.$mount('#app');
< /script>

选项式api

date选项写数据，methods,... 等选项写函数

组合式api

setup(){} 代码组织在一起（包括数据，函数、、、）

模板语法

用{{里面写 data 里面定义的变量（可以是文本插值也可以是js表达式）}}

文本指令

v-html 解析输出: 设置div里面的html内容
v-text 解析输出: 设置div里面的文本内容
v-pre 含有该指令的标签内部的语法不会被vue解析

绑定属性

v-bind :属性名='js表达式' 可以简写成 :属性名='js表达式'

methods

所有自定义的vue的事件处理函数都写在methods中，methods是专门用来定义函数、方法的。如果使用事件时，没有添加(),那么事件就有默认参数event。（和 data{ }，同级）

阻事件默认行为

在事件后面 + .preven
阻止事件冒泡 : 在事件后面 + .stop
按键修饰符：事件后面+ .按键名

条件渲染

v-show
作用 控制元素是否在页面显示，v-show是隐藏，为该元素添加dsiplay:none;，dom元素依旧在。
需要频繁切换用v-show比较好

v-if
作用 控制元素是否在页面显示，v-if是将dom元素整个删除或添加。
运行条件很少改变时用 v-if 比较好

template
vue 里面的空标签，审查元素时不会显示，用于v-if,v-show不行

列表渲染

v-for
v-for="(item,index) of list" :key="index"
list:要循环的数组的变量名 item:循环到的数组元素的变量名 index:循环到的数组元素的索引列表渲染中的key需要使用列表数据的唯一值

是一种优化策略，可以根据key，更准确、更快的找到对应的节点

vue3 中 v-if 的优先级高于 v-for

vue2 中 v-for 的优先级高于 v-if

它俩别用于同一个标签

表单输入绑定

v-model
修饰符 :
.lazy:懒加载
.number:转数字
trim:自动去除前后空格，中间的不会去除

vue3生命周期

beforeCreate 组件实例被创建之初
created 组件实例创建好了 --不建议在此处请求数据，修改数据
beforeMount 组件挂载之前
mounted 组件挂载到实例后 --在此处请求数据，DOM操作
beforeUpdate 组件数据更新之前
updated 组件数据更新之后 -- DOM操作不要在此请求数据会死循环
beforeUnmount 清除定时器，延时器，订阅等
unmounted

对vue的理解