vue3 基础语法

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
  去掉字符串前后的空格