0
0

vue3.2 基础及常用方法

Vue3.2(21年8月10日)相比于Vue3新增了语法糖,减少了代码冗余

Vue3相比于Vue2,在虚拟DOM,编译, 数据代理,打包构建封面进行了优化

Vue3使用组合式API, 适合大型项目, 去除了this

vue2的 

  1. beforeCreate

和 

  1. created

被新增的setup生命周期替代

vue3 使用插件: volar
配置用户代码片段可以快速输入vue3 模板
在这里插入图片描述

1. css支持v-bind 指令:

  1. <template><div class="box">{{color}}</div></template><script setup>import{ref}from'vue'let color =ref('red')</script><style scoped>.box {width: 100px;height: 50px;
  2.   background-color: v-bind(color);}</style>

2. setup语法糖

vue3.0的变量需要return出来才可以在template中使用, 写法冗余

vue3.2 在script标签中添加setup解决问题
组件只需要引入,不需要注册,属性方法不需要返回,不需要写setup函数,不需要写export default

3. data定义

3.1 直接定义无响应式

let name = ‘zhangsan’

3.2 ref定义基本数据类型

在script标签内,需要用 name.value 修改和获取值

可以接受基本类型、也可以是复杂类型(比如对象，数组)。建议处理基本类型数据。

基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。

  1. <template><div>{{name}}</div><button @click="setName">set</button></template><script setup>import{ref}from'vue'let name =ref('zhangsan')constsetName=()=>{
  2.     name.value ='lisi'}</script><style scoped></style>

3.3 reactive 定义引用数据类型

reactive支持引用类型, 直接 

  1. 变量.属性

使用和修改

  1. <template><div>{{user.name}}</div><div>{{user.money}}</div><button @click="setItem">set</button></template><script setup>import{reactive}from'vue'let user =reactive({name:'zhangsan',money:1000})constsetItem=()=>{
  2.     user.money =1500
  3.     user.gupiao =100}</script><style scoped></style>

4. methods方法定义

在template中 :

  1. <button @click='addMoney'>加钱</button>

在script中:

  1. const money =ref(1000)constaddMoney=()=>{
  2.   money.value ++}

5. computed计算属性

获得一个新的属性

  1. <template><div>{{nameString}}</div><div>{{user.money}}</div><button @click="setItem">set</button></template><script setup>import{reactive, computed}from'vue'let user =reactive({name:'zhangsan',money:1000})const nameString =computed(()=>{return'我的名字是'+ user.name
  2.   })</script><style scoped></style>

6 watch使用:

监听响应式数据的变化

  1. watch(数据源, 执行函数,[配置参数])// 配置的参数:立即执行, 深度监听{immediate:true,deep:true}

6.1 监听基本数据类型 单一数据源

  1. <script setup>import{ref, watch}from'vue'let name =ref('zhnagsan')//直接监听属性watch(name,(newVal,oldVal)=>{
  2.     console.log('变量发生了改变...',newVal, oldVal);})

6.2 监听引用数据类型 单一数据源

  1. <template><div>{{user.name}}</div><div>{{user.money}}</div><button @click="setItem">set</button></template><script setup>import{reactive, watch}from'vue'let user =reactive({name:'zhangsan',money:1000})// 监听方法返回的属性watch(()=> user.money,(newVal, oldVal)=>{
  2.     console.log('user money 变了: ', newVal, oldVal)})constsetItem=()=>{
  3.     user.money =1500}</script>

6.2 监听引用数据类型 多数据源[深度监听]

  1. <template><div>{{user.name}}</div><div>{{user.money}}</div><div>{{user.hobby.study}}</div><button @click="setItem">set</button></template><script setup>import{reactive, watch}from'vue'let user =reactive({name:'zhangsan',money:1000,hobby:{study:'语文'}})// 深度监听 {deep:true}watch(()=> user.hobby.study,(newVal, oldVal)=>{
  2.     console.log('user money 变了: ', newVal, oldVal)},{deep:true})constsetItem=()=>{
  3.     user.hobby.study ='数学'}</script>

7. 生命周期

在这里插入图片描述

  1. import{ onMounted }from'vue'onMounted(()=>{
  2.   console.log(document.querySelector('.box'))// 可以获取DOM})

7.1 ref获取元素

  1. <template><div ref="box"><button>Hehe</button></div></template><script setup>import{ ref, onMounted }from"vue";const box =ref(null);onMounted(()=>{
  2.     console.log(box.value);});

8 组件使用

  • 创建 components/Son.vue
  • 在App.vue 中导入子组件
  • Vue3.2 在导入子组件时,自动注册该组件
  • 组件名格式： 大驼峰写法

子组件Son.vue

  1. <template><div>Son compoment</div></template><script setup></script>

父组件

  1. <template><Son/></template><script setup>import Son from'./components/Son.vue'</script>

全局组件：
main.js

  1.  app.component('ComponentB', ComponentB)
  1. <ComponentA/>

9.组件通信

9.1 父传子 defineProps

子组件Son.vue

  1. <template><div>Son compoment</div><div>{{name}}</div><div>{{like}}</div></template><script setup>const props =defineProps({name:{type: String,default:""},like:{type: Array,default:()=>[]}})</script>

父组件

  1. <template><Son name="小灰灰":like="like"/></template><script setup>import Son from'./components/Son.vue'let like =["红太狼","灰太狼"]</script>

9.2 子传父 defineEmits

子组件

  1. <template><button @click="sendData">传递数据</button></template><script setup>// 自定义事件const emit =defineEmits(['send'])// 事件执行函数constsendData=()=>{emit('send','子组件的数据')}</script>

父组件

  1. <template><Son @send="getData"/></template><script setup>import Son from'./components/Son.vue'constgetData=(data)=>{
  2.   console.log('父组件获取到: ', data)}</script>
  1. 条件渲染
  1. <template><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else>
  2.     Not A/B</div></template><script setup>let type ='B'</script>
  1. 列表渲染
  1. <template><li v-for="item in items">{{ item.message }}</li></template><script setup>import{ref}from'vue'let items =ref([{message:'m1'},{message:'m2'},{message:'m3'}])setTimeout(()=>{
  2.   items.value.push({message:'m4'})},2000)</script>
  1. 事件处理
  1. <button @click="say">Say bye</button>// 传递参数<button @click="say('bye')">Say bye</button>

事件修饰符:

.stop .prevent .self .capture .once .passive

  1. <!-- 单击事件将停止传递 --><a @click.stop="doThis"></a>
  1. 表单输入绑定(用于、、)
  1. <input v-model="text"><input type="radio" v-model="pick":value="first"/><input type="radio" v-model="pick":value="second"/>
  1. 插槽slot 实现 可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。

使用

  1. <FancyButton>
  2.   Click me! <!-- 插槽内容 -->
  3. </FancyButton>

组件：

  1. <button class="fancy-btn">
  2.   <slot></slot> <!-- 插槽出口 -->
  3. </button>

元素是插槽， 父元素插槽内容将在slot处渲染
渲染之后的DOM：

  1. <buttonclass="fancy-btn">Click me!</button>

另一中js的方式理解：将内容传递给子元素， 子元素包裹时候生成DOM，返回给父元素

  1. // 父元素传入插槽内容FancyButton('Click me!')// FancyButton 在自己的模板中渲染插槽内容functionFancyButton(slotContent){return`<button class="fancy-btn">
  2.       ${slotContent}
  3.     </button>`}

子组件

  1. <template>
  2.   <li v-for="item in items">
  3.     <slot></slot>
  4.   </li>
  6.   <button class="fancy-btn">
  7.     <slot></slot> <!-- 插槽出口 -->
  8.   </button>
  9. </template>
  11. <script setup>
  12. import {ref} from 'vue'
  13. let items = ref([
  14.   {message: 'm1'},
  15.   {message: 'm2'},
  16.   {message: 'm3'}
  17. ])
  19. </script>

父组件

  1. <Son>ABC</Son>
  1. Teleport： 组件传送到DOM节点<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到父组件的外的其他 DOM 结构外层的位置去。

如下传送到了body元素上

  1. <template><div><button @click="open = true">Open Modal</button><Teleport to="body"><div v-if="open"class="modal"><p>Hello from the modal!</p><button @click="open = false">Close</button></div></Teleport></div></template><script setup>import{ ref }from'vue'const open =ref(false)</script><style scoped>.modal {position: fixed;
  2.   z-index:999;top:20%;left:50%;width: 300px;
  3.   margin-left:-150px;border: 2px red solid;}</style>

// 传送到id为

  1. teleport-target

的DOM元素上：

  1. <Teleport to="#teleport-target"></Teleport>
  1. 模板引用 通过ref获取DOM元素
  1. <template><div ref="divRef">divRef</div></template><script>import{ onMounted, ref }from'vue'const divRef =ref(null)onMounted(()=>{// 挂载后才可以获取DOM元素
  2.     console.log('[long] divRef: ', divRef.value)})</script>
  1. 条件渲染 17.1 条件渲染 v-if
  1. <div v-if="type==='A'">A</div><div v-else-if="type==='B'">B</div><div v-else>C</div>

多元素条件渲染：使用

  1. <template>

包装器元素

  1. <template v-if="ok"><p>P1</p><p>P2</p></template>

17.2 条件渲染 v-show

  1. v-if

不保留DOM元素，切换开销更高

  1. v-show

保留DOM元素，设置display属性，不支持template包装器元素，初始渲染开销高

17.3 不推荐使用

  1. v-if

和 

  1. v-for

同时使用, 同时使用时

  1. v-if

首先执行

  1. 列表渲染v-for
  1. const items =ref([{message:'F1'},{message:'F2'}])<li v-for="(item, index ) in items">{{ item.message }}-{{ index }}</li>

item 是迭代项别名

使用template渲染多个元素

  1. <ul><template v-for="item in items"><li>{{ item.msg }}</li><li class="divider" role="presentation"></li></template></ul>
标签： javascript vue.js 前端
本文转载自: https://blog.csdn.net/change_fate/article/details/127357398
版权归原作者 change_fate 所有， 如有侵权，请联系我们删除。
登录后发布评论

“vue3.2 基础及常用方法”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？