前端工程化：Vue3（一）

本文为个人学习笔记整理，仅供交流参考，非专业教学资料，内容请自行甄别

一、插值

  插值分为对象插值和属性插值，是对于页面上元素进行动态填充的手段，使用{{}}占位符。

<script setup lang="ts">
  let name = "test"
  let car = {
    brand:"brand",
    price: 999999
  }
</script>

<template>
    <h3>属性插值:{{name}}</h3>
    <h3>对象插值:{{car.brand}},{{car.price}}</h3>
</template>

<style scoped>

</style>

二、指令

  常见的v-if，v-bind，v-model等都是vue的指令。

2.1、v-html

  v-html的作用是向指定节点中渲染包含html结构的内容，如果想要在页面上展示msg中定义的样式，仅仅使用{{}}，会将msg整体解析成一个文本，需要使用v-html对于样式进行解析：

<script setup lang="ts">
let msg = "<p style='color: olivedrab'> 测试指令 </p>"
</script>

<template>
  <h2>
    <div>{{ msg }}</div>
  </h2>
  <h2>
    <div v-html="msg"></div>
  </h2>
</template>

<style scoped>

</style>

两者的对比

2.2、v-on

  v-on指令放置在元素上以附加事件监听器，最常见的是监听鼠标点击事件：

<script setup lang="ts">
function buy(){
  alert("购买成功")
}
</script>

<template>

<!--  once:条件，本条件代表不刷新页面只能点击一次-->
  <button v-on:click.once="buy">绑定事件</button>
  <br/>

</template>

<style scoped>

</style>

  v-on: 的简写形式是 @。例如@Click='""

2.3、v-if

  v-if通常用于进行条件判断，例如控制在某个条件下，按钮展示或者隐藏：

<script setup lang="ts">
let price = 1000
</script>

<template>
<!--  v-if-->
  <span style="color: #2fffa5" v-if="price >= 1000">条件1</span>
  <span style="color: cadetblue" v-if="price<1000">条件2</span>
</template>

<style scoped>

</style>

2.4、v-for

  v-for用于对数组中的元素进行循环，并且支持获取索引号：

<script setup lang="ts">
let cats = ["布偶猫","蓝猫","奶牛猫"]
</script>

<template>
<!--v-for  -->
  <li v-for="(f,i) in cats ">{{f}} + 索引 + {{i}}</li>
</template>

<style scoped>

</style>

2.5、v-bind

  v-bind用于单向绑定，将js表达式的结果，绑定到HTML元素的属性上。数据流向是js表达式 -> HTML元素。例如我定义了一个url，想要跳转百度，如果直接使用href：

<script setup lang="ts">
let url = "https://www.baidu.com"
</script>

<template>
  <a href="url">跳转百度</a>
<!--  <br/>-->
</template>

<style scoped>

</style>

未能成功解析url地址

  需要使用v-bind指令进行动态渲染:

  <a v-bind:href="url">跳转百度</a>

  Vue 在编译模板时，会自动把：<a v-bind:href="url">跳转百度</a>渲染成<a href="https://www.baidu.com">跳转百度</a>，而不是将url当做字符串进行处理。v-bind同样可以进行简化为:的形式：

  <a :href="url">跳转百度</a>

  区别于v-model的双向绑定，如果表单使用单向绑定，那么HTML元素-> js表达式的数据流向，是不会生效的。

2.6、v-model

  v-model是进行双向绑定的指令。 双向绑定指的是数据变化引起页面变化，页面变化也会引起数据变化。

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

const data = reactive({
  username: "zhangsan",
  agree: true
})
</script>

<template>
  <!--  单向绑定：数据变化引起页面变化-->
  <!--  双向绑定：数据变化引起页面变化，页面变化也会引起数据变化-->
  <!--  所以表单要使用双向绑定-->
  <div>
    <label>请输入姓名</label>
    <input v-model="data.username"/>
  </div>

  <div>
    <label>结果展示</label>
    <div>{{ data.username }}</div>
  </div>

  <div>
    <label>同意协议</label>
    <input type="checkbox" v-model="data.agree">
  </div>

  <div>
    <label>结果展示</label>
    <div>{{ data.agree }}</div>
  </div>
</template>

<style scoped>

</style>

在JS中定义对象初始化的数据，页面上可以正常展示

  修改页面上的数据，js中对象的属性值也会更改：

三、响应式编程

  在v-bind解析url的案例中，如果想要再通过一个按钮绑定单击事件，让url的值发生过改变，常规的写法：

<script setup lang="ts">
    let url = "https://www.baidu.com"

    //修改时，需要用value
    function changeUrl(){
      url = "https://www.taobao.com"
      alert(url)
    }

</script>

<template>
    <a :href="url">点击跳转，地址:{{url}}</a>
    <button @click="changeUrl()">
        改变地址
    </button>
</template>

<style scoped>

</style>

  页面上点击按钮，弹出的url虽然变更了，但是实际上的url属性并没有变更，点击跳转依旧能跳转到www.baidu.com


   这是 Vue 3 的设计核心：只有响应式数据，模板中的绑定才会随着数据变化自动更新Vue 无法追踪普通变量（用 let 或 const 声明的变量）什么时候改变了，因此模板不会重新渲染。
  要完成数据的同步变更，需要引入响应式的API

3.1、Ref

   Ref是响应式的API其一，可以支持包装对象，也可以包装具体的属性：

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

    //使用ref进行包装
    let url = ref("https://www.baidu.com");

    //修改时，需要用value
    function changeUrl(){
      url.value = "https://www.taobao.com"
      alert(url.value)
    }

</script>

<template>
    <a :href="url">点击跳转，地址:{{url}}</a>
    <button @click="changeUrl()">
        改变地址
    </button>
</template>

<style scoped>

</style>

   使用Ref进行包装，实际上Vue 创建了一个响应式对象，需要在js中使用.value取出原始对象进行处理。在模板中用到 url，Vue 会追踪它的依赖。当你 url.value = ... 时，Vue 触发模板重新渲染。

点击改变地址后，页面上的url同步变更，点击后跳转到新链接

   使用Ref包装对象;

<script setup lang="ts">
    import {ref} from "vue";
    let cat = ref({
      name:"布偶猫",
      price:2000
    })

    function changePrice(){
        cat.value.price = cat.value.price + 1000
    }

</script>

<template>
    <h3>{{cat.name}}</h3>
    <h3>{{cat.price}}</h3>
    <button @click="changePrice">变更价格</button>
</template>

<style scoped>

</style>

3.2、Reactive

   Reactive是另一个响应式编程的API，它只支持对于对象进行包装，并且在处理时无需使用.value：

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

    //reactive只能包装对象，并且可以不用使用.value进行处理
    let cat = reactive( {
      name:"布偶猫",
      price:3000
    })

    function addPrice(){
        cat.price  = cat.price + 100
    }
</script>

<template>
    <h2>价格:{{cat.price}}</h2>
    <button @click="addPrice()">加价</button>
</template>

<style scoped>

</style>

四、Watch

  Watch的作用是添加一个监听器，当被监听的属性或者对象发生改变时，执行其中的逻辑：

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

let cat = reactive({
  name: "布偶猫",
  price: 2000,
  number: 1
})

//计算总价
let totalPrice = computed(() => cat.price * cat.number)

watch(cat, (value, oldValue, onCleanup) => {
  console.log("目前的数量" + value.number)
  console.log("旧的数量" + oldValue.number)
  if (value.number > 3) {
    alert("不能同时拥有三只以上的布偶猫")
    cat.number = 3
  }
})

</script>

<template>
  <h2>{{ cat.name }}</h2>
  <h2>{{ cat.price }}</h2>
  <h2>{{ cat.number }}</h2>

  <button @click="cat.price = cat.price + 1000">加价</button>
  <button @click="cat.number = cat.number + 1">加量</button>
  <h2>{{ totalPrice }}</h2>
</template>

<style scoped>

</style>