vue3 基础语法
创建应用
- Vue.createApp( )
创建一个应用 ,任何的 Vue 相关的内容,都应该在此部分编写。
- const vm = app.mount()
vm 就是获取应用的根组件,通过 vm 可以获得 vue 里的任何数据、属性和方法
-
vm.$data
获取数据对应内容 -
data(){}
data 方法,用于在 Vue 中声明数据 -
methods:{}
methods 属性,用于编写 Vue 中的方法 -
computed:{}
计算属性,根据数据,自动进行计算,经常用于数值计算。方法和计算属性的区别:- 当计算属性依赖的内容发生变更时,才会重新执行,得到新的结果。-方法是只要页面重新渲染,就会重新计算,得到新的内容
-
watch:{}
-
属性说明:
(1) 监听属性,属性变化时,制动执行里边的函数。
(2) 可以根据变量的改变,作异步操作和页面样式的改变。 -
参数说明
current:现在参数的值
prev:以前参数的值
-
computed 和 method 都能实现的功能,建议使用 computed , 因为有缓存。computed 和 watcher 都能实现的功能,建议使用 computed , 因为更加简洁。
VUE 生命周期函数
声明周期函数指,在某一时刻会自动执行的函数。(声明周期函数也叫钩子函数)
- 1.beforeCreate()
在初始化 / 实例创建 之前执行的函数 - 2.created()
在初始化 / 实例创建 之后执行的函数 - 3.beforeMount()
在组件内容被渲染到页面之前自动执行的函数
注意:此时无法找到任何模板 DOM 节点 - 4.mounted()
在组件内容被渲染到页面之后自动执行的函数 - 5.beforeUpdate()
在数据将要变化之前自动执行的函数 - 6.updated()
在数据发生变化之后自动执行的函数 - 7.beforeUnmount()
在 VUE 实例销毁之前自动执行的函数 - 8.unmounted()
在 VUE 实例销毁之后自动执行的函数
样式绑定语法
用字符串绑定动态样式
方法:在 data()方法里,定义一个变量,然后用 v-bind 在模板中绑定属性
案例;
<div :class="classString">Hello World</div>
用对象绑定动态样式
方法:在 data( )里声明一个对象,例如叫 classObject。
案例:classObject:{red:true,green:true}
用数组绑定动态样式
方法:在 data( )方法里,定义一个数组,数组中有的值,为模板中绑定的样式
案例:classArray:[‘red’,‘green’]
行内样式动态绑定
- 字符串形式
方法:直接在 data( )方法里,声明一个 CSS 样式的字符串,然后在模板中进行绑定。
data()中编写案例:styleString :'color:yellow'
模板中绑定案例:<div :style="styleString">
- 对象形式
方法:在 data()方法里,声明一个变量,变量是一个对象。然后在模板中进行绑定。
data()中编写案例:styleObject:{color:'orange'}
模板中绑定案例:<div :style="styleObject">
注意事项:建议在工作中使用对象的形式,来编写模板中的行内样式动态绑定。因为这样更加直观,字符串拼接也不容易出错。
常用模板语法
-
插值表达式
{{xxx}}
在模板中输出变量,在插值表达式中是可以写 JavaScript 表达式的。例如:{{1+2}},但不能写语句。 -
基础指令
- v-html:转义输出变量的 HTML 标签
- v-bind:绑定 HTML 标签中的属性值
- v-once:读取一次变量值,不随变量 改变而改变
- v-if:模板中进行判断,根据变量负责 DOM 的展示与否。如果 v-if 的值为 false 时,将直接移除 DOM 元素
- v-show:模板中进行判断,根据变量负责 DOM 的展示与否。动过样式进行展示,为 false 时, display:none
- v-on:阻止默认行为 - @click.prevent,在模板中绑定事件,例如 v-on:click=“handleClick”,
$event
传递原生事件:handleClick(num,$event)
- ref ref 是获取 Dom 节点组件引用的一个语法,模板语法:
<div ref="count">
,程序写法:this.$refs.count
-
指令简写方法
-
v-bind 简写 :原写法:
<div v-bind:title="message">
,简写法:<div :title="message">
,动态属性绑定:<div :[xxx]="message">
,xxx 是在 data 里定义的变量 -
v-on 简写:原写法
:<div v-on:click=“handleClick”>
,简写法:<div v-@click=“handleClick”>
,动态事件绑定:<div @[xxx]="handleClick">
,xxx 是在 data 里定义的变量
-
列表循环渲染
- v-for:可以直接在模板中使用 v-for 来循环打印数组和对象,Vue 要求循环时在模板中增加 key 值,避免重复渲染.
- 变更数组的方法
- push(): 从数组尾部添加内容
- unshift(): 从数组头部添加内容
- pop(): 从数组末尾删除内容
- shift(): 从数组头部删除内容
- sort(): 对数组进行排序
- reverse(): 对数组进行取反
- splice(): 从数组中山取具体的内容
- 特殊用法 v-for=“item in 10” 从 1 循环到 10
注意事项: 循环和判断不能写在一个标签上,否则是没办法进行判断的。
事件绑定
- 事件绑定修饰符
- @click.stop:停止事件冒泡
- @click.self:停止向下传递
- @click.prevent:阻止默认行为
- @click.capture:捕获模式修饰符
- @click.once:事件只绑定一次
- @scroll.passive:提升滚动性能
- 按键绑定修饰符
- @keydown:按键就可以触发事件
- @keydown.enter:按下回车键时触发
- @keydown.tab:按下 tab 键时触发
- @keydown.delete:按下删除键时触发
- @keydown.esc:按下 ESC 键时触发
- @keydown.up:按下上键时触发
- @keydown.down:按下下键时触发
- 鼠标修饰符
- @click.left:点击鼠标左键触发
- @click.right:点击鼠标右键触发
- @click.middle:点击鼠标中键触发
- 精确修饰符
- @click.ctrl.exact:按 ctrl 和鼠标键时才会触发
双向绑定
v-model
双向绑定的最基本用法
<input v-model="message" />
<textarea v-model="message" />
<input type="checkbox" v-model="message" />
修饰符
- v-model.lazy
当失去焦点时才会触发双向绑定 - v-model.number
自动转变为 number 类型 - v-model.trim
去掉字符串前后的空格