vue3入门到入土（1）

vuejs英文官网，建议用谷歌浏览器进行翻译：Vue.js - The Progressive JavaScript Framework | Vue.js

学习之前最好有vue2基础和TS基础

1，开发环境的搭建

• 安装node.js

nodejs官网：Node.js

 执行npm -v查看npm版本，执行node -v查看node版本

•  安装vite

npm安装：

npm init vite@latest

yarn安装：

yarn create vite

下面拿npm举例：

•  下载vscode vue3插件

 

 2，模板语法与vue指令

• 插值语法

<template>
 <div>
  {{message}}
 </div>
</template>

<script setup lang="ts">
 const message:string="我是真男人"
</script>

运行代码显示message的内容

•  指令

v-开头都是vue的指令

v-text用来显示文本

v-if 用来控制元素的显示隐藏(为false时隐藏元素)

v-show用来控制元素的显示隐藏（为false时直接删除元素）

v-else-if表示 v-if的"else if 块”。可以链式调用v-else v-if条件收尾语句

v-bind简写:用来绑定元素的属性

v-model 双向绑定

v-for 用来遍历元素

v-on修饰符 冒泡案例

条件修饰符

• .stop：单击事件的传播将停止，防止冒泡
• .prevent：提交事件将不再重新加载页面
• .self：
• .capture
• .once：只能干一次
• .passive：只有事件触发处理程序。Target是元素本身

双向绑定需要引入ref，与vue2不同

<template>
  <div>
    <input type="text" v-model ="text">
    {{text}}
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
 const text =ref('test')
</script>

 3，ref全家桶

• ref

接受一个内部值并返回一个响应式且可变的ref对象。ref对象仅有一个. value property，指向该内部值。案例

我们这样操作是无法改变message 的值应为message不是响应式的无法被vue 跟踪要改成ref

<template>
  <div>
    
    <button @click="change"> 修改 </button>
    {{text}}
  </div>
</template>

<script setup lang="ts">
 let text:string ='原来的'
 const change=()=>{
    text='haha'
    console.log(text);
    
 } 
</script>

当我们单击按钮的时候发现text的值并没有被修改 ，我们需要引入ref指定泛型，或者引入Ref接口指定泛型；

引入ref指定泛型

<template>
  <div>
    <button @click="change"> 修改 </button>
    {{text}}
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
 let text =ref<string>('原来的')
 const change=()=>{
    text.value='haha'
    console.log(text);
 } 
</script>

• Ref

引入Ref接口指定泛型

<template>
  <div>
    <button @click="change"> 修改 </button>
    {{text}}
  </div>
</template>

<script setup lang="ts">
import {ref,Ref} from 'vue'
 let text:Ref<string> =ref('原来的')
 const change=()=>{
    text.value='haha'
    console.log(text);
 } 
</script>

• isRef：判断传进来的对象是否是ref对象

<template>
  <div>
    <button @click="change"> 修改 </button>
    {{text}}
  </div>
</template>

<script setup lang="ts">
import {ref,Ref,isRef} from 'vue'
 let text:Ref<string> =ref('原来的')
 const notRef:number=0;
 const change=()=>{
    text.value='haha'
    console.log(isRef(text));
    console.log(isRef(notRef));
 } 
</script>

单击之后，text是ref对象返回true，text1为number类型不是ref类型返回false

• shallowRef和triggerRef配合使用

<template>
  <div>
    <button @click="change"> 修改 </button>
    {{message.name}}
  </div>
</template>

<script setup lang="ts">
import { triggerRef,shallowRef } from 'vue';
 let message=shallowRef({
  name:"小杨"
 })
 const change =()=>{
  message.value={name:"大杨"}
  // 强制更新dom
  triggerRef(message)
 }
</script>

•  customRef：自定义一个Ref

<template>
  <div>
    <button @click="change"> 修改 </button>
    {{ message }}
  </div>
</template>

<script setup lang="ts">
import { customRef } from 'vue';

function myRef<T>(value: T) {
  return customRef((trank, trigger) => {
    return {
      get() {
        // 获取
        trank()
        return value
      },
      // 更新
      set(newValue: T) {
        value = newValue
        console.log('set 被触发了');
        // 触发更新
        trigger()
      }
    }
  })
}
let message = myRef<string>('小杨')
const change = () => {
  message.value = '大杨'
}
</script>
<style scoped>
div {
  width: 100px;
  height: 100px;
  margin: 100px auto;
}
</style>

4，reactive的使用

reactive通常处理的是复杂数据类型，ref通常处理简单数据类型

<template>
  <div>
    <div>arr {{ message }}</div>
    <div>obj {{ obj }} </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

let message = reactive<number[]>([])
let obj = reactive({
  name: '小杨',
  age: 18
})

setTimeout(() => {
  const arr: Array<number> = [1, 1, 2, 3]
  let obj1 = {
    name: "大杨",
    age: 19
  }
  message.push(...arr)
}, 1000)

</script>
<style scoped>
div {
  width: 200px;
  height: 10px;
  margin: 100px auto;
}
</style>

 readonly：把reactive作用后的变量弄成只读的

<template>
  <div>

  </div>
</template>

<script setup lang="ts">
import { reactive, readonly } from 'vue';

let msg = reactive({
  count: 1
})

let copy = readonly(msg)
//会报错
copy.count++
msg.count++
</script>
<style scoped>
div {
  width: 200px;
  height: 10px;
  margin: 100px auto;
}
</style>

shallowReactive：

只修改浅层次的，并且可以动态更新到页面，但是深层次的对象可以改，但是动态更新到页面上

<template>
  <div>
    {{msg}}
    <button @click="change1">1</button>
    <button @click="change2">2</button>
  </div>
</template>

<script setup lang="ts">
import {  shallowReactive } from 'vue';
 
let msg =shallowReactive({
  name:"小杨",
  nav:{
    bar:{
      name:"我是谁 我在那？"
    }
  }
}) 

const change1 = () => {
  msg.name = '大杨'
  console.log('~~~~name被修改',);
  
}
const change2 = ()=>{
  msg.nav.bar.name = '我在这'
  console.log('~~~~~内层name被改');
}
</script>
<style scoped>
div {
  width: 200px;
  height: 10px;
  margin: 100px auto;
}
</style>