Vue-视图渲染技术
Vue-视图渲染技术
Vue是一种基于HTML的模板语法,使我们能够声明式的将其组件实例的数据绑定到呈现的DOM上
Vue会将模板编译成高度优化的JavaScript,将.vue文件编译出html+css+js的过程就是渲染
结合响应式系统,当应用状态变更时,Vue能够智能地推断出需要重新渲染的组件的最少数量,并应用最少的Dom操作
个人理解就是将变量给到元素的文本,变量给到元素的属性
插值表达式
个人感觉,${}的作用,在模板字符串中可获得变量内容进行拼接,在JSP中作为EL表达式获取值,插值表达式也能与他俩作类比
语法格式:{{数据名字/函数/对象调用API}}
- 插值表达式不依赖标签,可以单独使用
- 插值表达式可以调用函数,渲染该函数的返回值
- 插值表达式支持一些常见的运算符
- 插值表达式支持对象调用其API,渲染其返回值
<script setup>
//定义一些常见数据
let msg = "hello vue3";
let getMsg = () => {
return "hello vue3 message";
};
let age = 18;
let bee = "蜜 蜂";
let carts = [
{ name: "可乐", price: "3", number: "10" },
{ name: "薯片", price: "6", number: "8" },
];
function computer() {
let count = 0;
for (let index in carts) {
count += carts[index].price * carts[index].number;
}
return count;
}
</script>
<template>
<div>
<!-- 将数据绑定到下列元素上 -->
<h1>{{ msg }}</h1>
{{ getMsg() }}
{{ age > 18 ? "是" : "否" }}
{{ bee.split(" ").reverse().join(" ") }}
{{ carts[0].price * carts[0].number + carts[1].price * carts[1].number }}
{{ computer() }}
</div>
</template>
<style scoped>
</style>
v-text&v-html 文本渲染命令
与插值表达式不同,v-xxx 为vue的指令
- 命令必须依赖标签,作为标签的属性存在
- 命令支持模板字符串吗,作为v-text的值直接使用
- 命令支持常见的运算符,作为v-text的值直接使用
- 命令支持常见的API的调用,作为v-text的值直接使用
- 命令支持函数的调用
v-text和v-html的区别就是:v-text不能识别html文本,但v-html可以识别
就如同Dom编程中的innerText和innerHTML
<script setup>
let msg = "hello vue";
let age = 19;
let bee = "蜜 蜂"
let getMsg = ()=>{
return msg;
}
let fontMsg = "<font color='red'>hello</font>"
</script>
<template>
<div>
<h1 v-text="msg"></h1>
<h1 v-text="`哈哈 ${msg}`"></h1>
<h1 v-text="age > 18 ? '成年' : '未成年'"></h1>
<h1 v-text="bee.split(' ').reverse().join(' ')"></h1>
<h1 v-text="getMsg()"></h1>
<h1 v-text="fontMsg"></h1>
<h1 v-html="fontMsg"></h1>
</div>
</template>
<style scoped>
</style>
v-bind 属性渲染命令
v-bind:属性名 来绑定属性
可以简写成 :属性名 的方式绑定属性
<script setup>
const data = {
logo: "http://8.210.71.55:8090/upload/QQ%E5%9B%BE%E7%89%8720220921142622.jpg",
name: "xiaobailogo",
url: "http://8.210.71.55:8090",
};
</script>
<template>
<div>
<a :href="data.url">
<img :src="data.logo" :title="data.name" />
</a>
</div>
</template>
<style scoped>
</style>
v-on 事件渲染命令
v-on:事件名称 = "函数名()"
可以简写成 @事件名称="函数名"
原生js的事件名称是:onclick、ondbclick、onblur、onfocus
在vue中绑定事件时,去掉on前缀:click、dbclick、blur、focus
内联事件处理器
在vue进行事件渲染时,事件执行函数可直接写到@事件名称的属性中去,这称之为内联事件处理器
注:经过ref修饰的变量在script中需要通过.value获取操作其值,而在template中不需要.value
<script setup>
import { ref } from "vue";
let fun = () => {
alert("hello");
};
let count = ref(1);
let fun2 = () => {
count.value++;
};
</script>
<template>
<div>
<button @click="fun()">say hello</button>
<button @click="fun2()">+</button>
<!-- 内联事件处理器,将fun2的内容直接作@click的属性值 -->
<button @click="count++">+</button>
{{ count }}
</div>
</template>
<style scoped>
</style>
事件的修饰符
通过 @事件名称.修饰符:函数名()的方式 ,给事件加修饰符
- once:事件只执行第一次,执行后失效
- prevent:阻止组件的默认行为
<script setup>
//利用js原生的方式阻止页面访问
let fun3 = (event)=>{
let flag = confirm("确定要访问目标链接吗")
if(!flag){
event.preventDefault()
}
}
let fun4 = ()=>{}
</script>
<template>
<div>
<a href="http://8.210.71.55:8090" @click="fun3( $event)">XIAOBAI的个人博客</a> </br>
<!-- 不进行任何提示,直接阻止原本标签的访问行为 -->
<a href="http://8.210.71.55:8090" @click.prevent="fun4()">XIAOBAI的个人博客</a>
</div>
</template>
<style scoped>
</style>