【Vue3+Vite】Vue3视图渲染技术 快速学习 第二期

---

一、模版语法

• Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。
• 所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
• 在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。
• 结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

1.1 插值表达式和文本渲染

插值表达式:最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 ,即双大括号{ {}}

• 插值表达式是将数据渲染到元素的指定位置的手段之一
• 插值表达式不绝对依赖标签,其位置相对自由
• 插值表达式中支持javascript的运算表达式
• 插值表达式中也支持函数的调用

1.1.1 插值表达式 语法

{ {数据名字/函数/对象调用API}}

<script setup>
let msg = "hello";

let getMsg = () => {
     
     
  return "hello vue3 message";
};

let age = 25;
let nickname = "道格";

// 对象调用API
// 模拟购物车：
const carts = [
  {
     
      name: "可乐", price: 3, number: 10 },
  {
     
      name: "百事", price: 2, number: 20 }
];
//购物车计算： 总价 = 单价*个数
function compute() {
     
     
  let count = 0;
  for (const index in carts) {
     
     
    count += carts[index].price * carts[index].number;
  }
  return count;
}
</script>

<template>
  <div>
    msg: {
  
  {msg}}
    <br />
    getMsg : {
  
  {getMsg()}}
    <br />
    age : {
  
  {age}}
    <br />
    nickname : {
  
  {nickname}}
    <br />
    购物总价：{
  
  {compute()}}
    <br />
    表达式写计算购物总价： {
  
  {carts[0].price*carts[0].number + carts[1].price * carts[1].number}}
  </div>
</template>

<style scoped>
</style>

1.1.2 文本渲染 语法

为了渲染双标中的文本,我们也可以选择使用v-text和v-html命令

• v-*** 这种写法的方式使用的是vue的命令
• v-***的命令必须依赖元素,并且要写在元素的开始标签中
• v-***指令支持ES6中的字符串模板
• 插值表达式中支持javascript的运算表达式
• 插值表达式中也支持函数的调用
• v-text可以将数据渲染成双标签中间的文本,但是不识别html元素结构的文本
• v-html可以将数据渲染成双标签中间的文本,识别html元素结构的文本

<script setup>
let msg = "hello";

let getMsg = () => {
     
     
  return msg + " getMsg";
};

let refMsg = "<font color='red'>msg</font>";
let greenMsg = `<font color=\'green\'>${ 
       msg}</font>`;
</script>

<template>
  <div>
    <span v-text="msg"></span>
    <br />
    <span v-text="getMsg()"></span>
    <br />
    <span v-text="refMsg"></span>
    <br />
    <span v-html="refMsg"></span>
    <br />
    <span v-html="greenMsg"></span>
  </div>
</template>

<style scoped>
</style>

1.2 Attribute属性渲染

想要渲染一个元素的 attribute，应该使用 v-bind指令

• 由于插值表达式不能直接放在标签的属性中,所有要渲染元素的属性就应该使用v-bind
• v-bind可以用于渲染任何元素的属性,语法为 v-bind:属性名='数据名', 可以简写为 :属性名='数据名'

<script setup>
const data = {
     
     
  name: "道格维克",
  url: "https://blog.youkuaiyun.com/GavinGroves",
  image: "https://www.runoob.com/wp-content/uploads/2017/01/vue.png"
};
</script>

<template>
  <div>
  						<!--target="_blan" 跳转页面 _self当前页面变化 -->
    <a v-bind:href="data.url" target="_self">
      <img :src="data.image" :title="data.name" />
      <br />
      <input type="button" :value="`点击访问${data.name}`" />
    </a>
  </div>
</template>

<style scoped>
</style>

1.3 事件的绑定

v-on 来监听 DOM 事件，并在事件触发时执行对应 Vue的JavaScript代码

• 用法：v-on:click="handler" 或简写为 @click="handler"
• vue中的事件名=原生事件名去掉on 前缀 如:onClick --> click
• handler的值可以是方法事件处理器,也可以是内联事件处理器
• 绑定事件时,可以通过一些绑定的修饰符,常见的事件修饰符如下
  • .once：只触发一次事件。
  • .prevent：阻止默认事件。
  • .stop：阻止事件冒泡。
  • .capture：使用事件捕获模式而不是冒泡模式。
  • .self：只在事件发送者自身触发时才触发事件。

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

function fun1() {
     
     
  alert("你好");
}
// 计数器:
let count = ref(0);
function counter() {
     
     
  count.value++;