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