5、Vue的基础法语
Vue2与Vue3的基础语法基本相同
5.1、模版语法
模版：在HTML中使用vue相关的语法和指令。
5.1.1、插值表达式(胡须表达式)
在html中可以使用 双大括号完成数据渲染{{ 变量、调用语句、表达式、简单的运算 }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 在页面上需要渲染数据，可以使用vue中提供的插值表达式完成 -->
<h3>插值表达式：</h3>
<!-- 使用vue实例中定义的变量，data中的 -->
<p>姓名：{{ username }}</p>
<p>年龄：{{ age }}</p>
<p>性别：{{ sex }}</p>
<!-- 运算 -->
<!-- 表达式：有运算结果的式子，都算 -->
<p>加法运算：{{ 1+2 }}</p>
<p>比较运算：{{ 1 < 4 }}</p>
<p>三目运算：{{ age < 18 ? "未成年" : "成年" }}</p>
<button @click="age--">修改年龄</button>
<!-- 调用语句：后期开发中使用的比较少,函数一般都会存在返回值 -->
<p>{{ addSum }}</p>
<!-- 插值表达式中，如果渲染的数据为underline数据不会显示 -->
<p>{{ addSum(2,4) }}</p>
</div>
<script src="./js/vue3.js"></script>
<script>
let { createApp } = Vue;
// 创建app对象
const app = createApp({
// 使用data定义数据
data(){
return{
username:"张无忌",
age:23,
sex:"男"
}
},
methods:{
addSum(a,b){
console.log("a,b", a, b);
// return a + b;
}
}
});
// 让app与页面view进行绑定
app.mount("#app");
</script>
</body>
</html>
5.1.2、v-cloak
v-cloak ： 用来屏蔽插值表达式在网络等原因导致数据无法渲染的时候，页面会出现{{ name }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!--
插值表达式的闪动问题：
仅限于使用script标签引入vue的js文件，
如果后期使用vue的脚手架创建项目，问题已经解决
-->
<div id="app">
<p v-cloak>{{name}}</p>
</div>
<script src="./js/vue3.js"></script>
<script>
let { createApp } = Vue;
// 创建app对象
const app = createApp({
data(){
return {
name:"杭州"
}
}
});
// 让app与页面view进行绑定
app.mount("#app");
</script>
</body>
</html>
5.2、文本类指令
在vue中提供了大量的指令（一共13个），快速帮助我们完成数据与页面的绑定、渲染等操作。
vue中提供的指令，都是以v-开始，如果某个指令使用频率特别高，会有简化写法。
回顾，在dom中，如果需要获取或者设置标签中的文本数据，可以通过innerHTML、innerText、textContent。
document.querySelector(".box").innerHTML += ""
5.2.1、v-html和v-text
v-text ： 渲染的数据中包含html标签，标签不会被解析渲染，标签会原样显示在页面上
v-html：渲染的数据中包含html标签，标签被解析渲染
v-text和v-html，他们会将标签中默认的数据全部覆盖（替换）
{{ }} 将数据插入插值表达式所在的位置上
<body>
<div id="app">
<!-- 在标签中间通过插值表达式插入数据 -->
<p>姓名：{{ name }}</p>
<!-- 在标签上书写属性，对应的vue的指令，使用到vue选项中的数据，直接书写即可 -->
<!--
v-text ： 渲染的数据中包含html标签，标签不会被解析渲染，标签会原样显示在页面上
-->
<p v-text="name2">这个数据您看不到</p>
<!--
v-html：渲染的数据中包含html标签，标签被解析渲染
-->
<p v-html="name2"></p>
</div>
<script src="./js/vue3.js"></script>
<script>
let { createApp } = Vue;
// 创建app对象
const app = createApp({
data(){
return{
name:"灭绝小甜甜",
name2:"灭绝<b>小甜甜</b>"
}
}
});
// 让app与页面view进行绑定
app.mount("#app");
</script>
</body>
5.2.2、v-pre
元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。
<body>
<pre>
好好学习
天天向上
</pre>
<div id="app">
<p v-pre>vue中的插值表达式格式：{{ name }}</p>
</div>
<script src="./js/vue3.js"></script>
<script>
let { createApp } = Vue;
// 创建app对象
const app = createApp({
});
// 让app与页面view进行绑定
app.mount("#app");
</script>
</body>
5.3、属性绑定
5.3.1、v-bind基本使用
v-bind：用于将标签上的属性名或属性值转成vue中的动态的数据
v-bind:属性名="变量名 | 表达式 | 调用语句"
v-bind:[属性名]="变量名 | 表达式 | 调用语句"
v-bind可以简化成：
<body>
<div id="app">
<!--
vue是基于数据驱动的方式进行编程（让程序员专注于数据的处理，而不需要进行dom操作）
不管是在页面上，还是在vue的配置项中，尽可能的去操作数据，控制渲染
在html中一个完整的标签：
<标签名 属性名="属性值" 属性名="属性值">文本数据或者子标签</标签名>
v-bind指令：让标签的属性名或属性值变成动态的数据（来自于vue配置项中）
-->
<div v-bind:name="value">123213</div>
<div v-bind:name="1+1">123213</div>
<div v-bind:name="msg()">123213</div>
<!-- 如果标签的 属性名也是动态的，需要使用[] 然后引用vue中对应的变量 -->
<div v-bind:[attrname]="attrValue">123213</div>
<hr>
<img v-bind:src="img1" alt="" width="100">
<img v-bind:src="img2" alt="" width="100">
<!-- v-bind可以简化为： -->
<img :src="img3" alt="" width="100">
</div>
<script src="./js/vue3.js"></script>
<script>
let { createApp } = Vue;
// 创建app对象
const app = createApp({
data(){
return {
value:"李四",
attrname:"age",
attrValue:23,
img1:"https://img13.360buyimg.com/babel/s1180x940_jfs/t20260529/111640/23/37858/94517/6475c864F5396934a/0bd76f0443ad5fca.png.avif",
img2:"https://img1.baidu.com/it/u=1960110688,1786190632&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
img3:'https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'
}
},
methods:{
msg(){
return "hello";
}
}
});
// 让app与页面view进行绑定
app.mount("#app");
</script>
</body>
5.3.2、特殊使用
如果一个对象中的所有数据都需要绑定的某个标签的属性中，这是可以进行v-bind的简化属性
v-bind='对象变量名名'
<body>
<div id="app">
<!-- 一个标签上的动态属性数据都来自于某个指定的对象 -->
<img :src="imgObj.src" v-bind:alt="imgObj.alt" :width="imgObj.width">
<!-- 使用v-bind=对象，相当于底层将对象中的所有数据解构出来，放到当前这个标签上 -->
<img v-bind="imgObj">
</div>
<script src="./js/vue3.js"></script>
<script>
let { createApp } = Vue;
// 创建app对象
const app = createApp({
data(){
return {
imgObj:{
width:"100",
src: 'https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
alt:"图片"
}
}
}
});
// 让app与页面view进行绑定
app.mount("#app");
</script>
</body>
