vue3.2 基础及常用方法

Posted 2023-04-05 change_fate

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

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

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

vue2的 beforeCreate 和 created 被新增的setup生命周期替代

vue3 使用插件: volar
配置用户代码片段可以快速输入vue3 模板

1. css支持v-bind 指令:

<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;
  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完成的。

<template>
  <div>name</div>
  <button @click="setName">set</button>
</template>

<script setup>
  import ref from 'vue'
  let name = ref('zhangsan')
  const setName = () => 
    name.value = 'lisi'
  

</script>
<style scoped>
</style>

3.3 reactive 定义引用数据类型

reactive支持引用类型, 直接 变量.属性 使用和修改

<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
  )
  const setItem = () => 
    user.money = 1500
    user.gupiao = 100
  

</script>
<style scoped>
</style>

4. methods方法定义

在template中 :

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

在script中:

const money = ref(1000)
const addMoney = () => 
  money.value ++

5. computed计算属性

获得一个新的属性

<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
  )

</script>
<style scoped>
</style>

6 watch使用:

监听响应式数据的变化

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

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

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

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

<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) => 
    console.log('user money 变了: ', newVal, oldVal)
  )
  const setItem = () => 
    user.money = 1500
  
</script>

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

<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) => 
    console.log('user money 变了: ', newVal, oldVal)
  , deep:true)

  const setItem = () => 
    user.hobby.study = '数学'
  
</script>

7. 生命周期

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

7.1 ref获取元素

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

8 组件使用

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

子组件Son.vue

<template>
  <div>Son compoment</div>
</template>

<script setup>
</script>

父组件

<template>
  <Son/>
</template>

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

全局组件：
main.js

 app.component('ComponentB', ComponentB)

<ComponentA/>

9.组件通信

9.1 父传子 defineProps

子组件Son.vue

<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>

父组件

<template>
  <Son name="小灰灰" :like="like"/>
</template>

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

9.2 子传父 defineEmits

子组件

<template>
  <button @click="sendData">传递数据</button>
</template>

<script setup>
// 自定义事件
const emit = defineEmits(['send'])
// 事件执行函数
const sendData = () => 
  emit('send', '子组件的数据')

</script>

父组件

<template>
  <Son @send="getData"/>
</template>

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

const getData = (data) => 
  console.log('父组件获取到: ', data)

</script>

10. 条件渲染

<template>
  <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else>
    Not A/B
  </div>
</template>

<script setup>
let type = 'B'
</script>

11. 列表渲染

<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(() => 
  items.value.push(message: 'm4'),
  2000)
</script>

12. 事件处理

<button @click="say">Say bye</button>
// 传递参数
<button @click="say('bye')">Say bye</button>

事件修饰符:

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

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

13. 表单输入绑定(用于、、)

<input v-model="text">

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

14. 插槽slot
    实现 可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。

使用

<FancyButton>
  Click me! <!-- 插槽内容 -->
</FancyButton>

组件：

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

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

<button class="fancy-btn">Click me!</button>

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

// 父元素传入插槽内容
FancyButton('Click me!')

// FancyButton 在自己的模板中渲染插槽内容
function FancyButton(slotContent) 
  return `<button class="fancy-btn">
      $slotContent
    </button>`

子组件

<template>
  <li v-for="item in items">
    <slot></slot>
  </li>

  <button class="fancy-btn">
    <slot></slot> <!-- 插槽出口 -->
  </button>
</template>

<script setup>
import ref from 'vue'
let items = ref([
  message: 'm1',
  message: 'm2',
  message: 'm3'
])

</script>

父组件

  <Son>
    ABC
  </Son>

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

如下传送到了body元素上

<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;
  z-index: 999;
  top: 20%;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  border: 2px red solid;

</style>

// 传送到id为teleport-target的DOM元素上：

  <Teleport to="#teleport-target"> </Teleport>

16. 模板引用
    通过ref获取DOM元素

<template>
  <div ref="divRef">divRef</div>
</template>

<script>
  import  onMounted, ref  from 'vue'
  const divRef = ref(null)
  onMounted(() =>  // 挂载后才可以获取DOM元素
    console.log('[long] divRef: ', divRef.value)
  )
</script>

17. 条件渲染
    17.1 条件渲染 v-if

<div v-if="type==='A'">A</div>
<div v-else-if="type==='B'">B</div>
<div v-else>C</div>

多元素条件渲染：使用<template>包装器元素

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

17.2 条件渲染 v-show
v-if 不保留DOM元素，切换开销更高
v-show 保留DOM元素，设置display属性，不支持template包装器元素，初始渲染开销高

17.3 不推荐使用v-if 和 v-for同时使用, 同时使用时v-if首先执行

18. 列表渲染v-for

const items = ref([ message: 'F1' , message: 'F2' ])

<li v-for="(item, index ) in items">
  item.message  -  index 
</li>

item 是迭代项别名

使用template渲染多个元素

<ul>
  <template v-for="item in items">
    <li> item.msg </li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

Dart基础: List常用属性及方法;

    常用属性:
    List myList = [‘data1‘,‘data2‘,‘data3‘];
    print(myList.isEmpty); //是否为空
    print(myList.isNotEmpty); //是否不为空
    myList.reversed; //反转数组

    常用方法:
    myList.add(‘data4‘);//增加数据;
    myList.addAll(List);//通常用来合并数组;

    myList.indexOf(‘xxx‘);//用来查找数据,找不到返回-1;找到返回对应的下标;

    myList.remove(‘data1‘);//删除指定的值;
    myList.removeAt(index);//删除对应下标的值

    myList.fillRange(0,1);//修改数据, 输入起始位置;

    myList.insert(0,‘data0‘);//向数组中插入数据
    myList.insertAll(0,List);//插入数组
    
    myList.join(‘,‘);// 把数组转换为字符串,以逗号形式分割
    
    字符串转数组:
    var str = ‘data-data1-data2‘;
    str.split(‘-‘);