Vue3 简单学学



Vue官网

Vue3 (vue3js.cn)

Vue指令

数据填充指令

差值表达式、v-html指令、v-text指令

v-html、v-text会覆盖标签内原有的内容,插值表达式不会

v-bind指令

v-bind用来为标签的属性节点绑定数据,可以简写为 :

image-20220630163701202

class样式绑定

v-bind用来绑定class属性时有两种方式:

  1. 对象方式:<div v-bind:class="{ active: isActive }"></div>

active :类名,定义在 style 标签中的类

isActive:布尔值,true 类起效、 false 类失效,定义在data中

  1. 数组方式:<div v-bind:class="[fs, bgc]"></div>

fs、bgc:变量,要定义在data中

fs、bgc的值是类名,定义在style标签中的类名

style样式绑定

image-20220630171134655
image-20220630171149373

v-on指令

v-on用来为标签绑定事件,可以简写为@

image-20220630173129216
image-20220630174855395

v-if指令

根据表达式的真假来有条件的渲染元素

 <h1 v-if="age > 18">成年人</h1>
 <h1 v-else>未成年人</h1>
 <p v-if="score > 90">优秀</p>
 <p v-else-if="score > 80 && score < 90">中等</p>

v-for指令

image-20220701140644252

v-model指令

  • v-model 用于数据双向绑定
  • 双向绑定:
    • data中定义的数据发生变化时,页面中的数据也跟着变化
    • 修改页面中的数据时,data中的数据也会跟着变化

MVVM开发模式

MVVM是一种分离开发思想,将页面分为三个部分

MVVM 是 Model - View - ViewModel的缩写

  1. Model:模型,简单理解就是要操作的数据
  2. View:试图,页面的结构
  3. ViewModel:视图模型,连接Model和View的桥梁
image-20220701143006363

compositionAPI

image-20220701144933118

ref

通常用来定义简单数据类型(数值型、字符串…)

 // 1. 从 Vue 对象中将 ref方法解构出来
 const { ref } = Vue;
 ​
 // 使用ref来声明响应式数据
 let name = ref('王小明');
 let age = ref(8);
 ​
 const add = () => {
 console.log(age);
 age.value++;
 }
 ​
 const app = {
 setup () {
 return { name, age, add };
 }
 }
 ​
 Vue.createApp(app).mount('#app');

reactive

通常用来定义复杂数据类型(数组、对象)

生命周期

optionsAPI生命周期函数

生命周期:Vue实例挂载、更新、销毁的过程

Vue实例的生命周期会伴随各种事件,这些事件对应的函数叫做生命周期函数/生命周期钩子/生命周期钩子函数

生命周期函数会在某一时刻自动运行

挂载

image-20220702214648350

更新

  • 更新:页面发生变化
    • beforeUpdate :更新之前
    • updated :更新完成

compositionAPI生命周期函数

CompositionAPI 取消了 beforeCreate 和 created,直接使用 setup 即可

所有的钩子函数必须从Vue对象中解构出来,所有的钩子函数钱都要加 on

Vue3 简单学学-HuaのJava之旅
Vue3 简单学学
此内容为免费资源,请登录后查看
0
免费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片