【vue3】02-vue的模板语法
文章目录
- 模板语法
-
- Mustache插值语法
- 不常用基本指令（了解）
- 常用指令：v-bind
-
- v-bind绑定基本属性
- v-bind绑定class
- v-bind绑定style属性
- v-bind绑定对象
模板语法
React的开发模式:
- React使用的jsx，所以对应的代码都是编写的类似于js的一种语法;
- 之后通过Babel将jsx编译成 React.createElement 函数调用;
Vue也支持jsx的开发模式(后续有时间也会讲到):
- 但是大多数情况下，使用基于HTML的模板语法;
- 在模板中，允许开发者以声明式的方式将DOM和底层组件实例的数据绑定在一起;
- 在底层的实现中，Vue将模板编译成虚拟DOM渲染函数，这个我会在后续给大家讲到;
所以,对于学习Vue来说，学习模板语法是非常重要的。
Mustache插值语法
如果我们希望把数据显示到模板(template)中，使用最多的语法是“Mustache”语法(双大括号)的文本插值。
- 并且我们前端提到过，
data返回的对象是有添加到Vue的响应式系统中; - 当
data中的数据发生改变时，对应的内容也会发生更新。 - 当然，Mustache中不仅仅可以是data中的属性，也可以是一个
JavaScript的表达式。
基本使用代码示例：
<body>
<div id="app">
{{ message }}div>
<script src=" https://unpkg.com/vue@next">script>
<script>
//使用vue
const app = Vue.createApp({
data:function(){
return{
message:"hello vue！"
}
},
methods:{
}
})
//挂载
app.mount("#app")
script>
body>
js表达式使用代码示例：
<div id="app">
<h2>计数双倍:{{ counter * 2 }}h2>
<h2>展示的信息:{{ info.split(" ") }}h2>
div>
<script src="../src/vue3.js">script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello Vue",
counter: 1,
info: "Hello Vue3"
};
},
});
app.mount("#app");
script>
调用函数代码示例：
<div id="app">
<h2>{{formDate()}}h2>
div>
<script src=" https://unpkg.com/vue@next">script>
<script>
//使用vue
const app = Vue.createApp({
data:function(){
return{
}
},
methods:{
formDate(){
return"2023-4-01"
}
}
})
//挂载
app.mount("#app")
script>
运行效果：
注意：值得一提的是尽管mustache插值语法很灵活，但不能在其中定义语句，例如
<h2>{{ const name = "Hello Vue3" }}h2>
<h2>{{ if (true) {return message} }}h2>
不常用基本指令（了解）
1.v-once指令(了解)
v-once用于指定元素或者组件只渲染一次：
当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；
该指令可以用于性能优化；其实message的值是改变了的, 只是不会渲染
2.v-text指令(了解)
用于更新元素的 textContent :
因为有了Mustache插值语法且更灵活, 所以我们一般使用插值语法,
v-text基本不使用
3.v-html指令(了解)
默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析。
v-html偶尔会用到, 某些特殊场景
如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示；
4.v-pre指令(了解)
v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签：
跳过不需要编译的节点，加快编译的速度；
不常用指令代码示例：
<div id="app">
<h2 v-once>{{ message }}h2>
<button @click="change">改变messgebutton>
<hr>
<h3>{{ message2 }}h2>
<h3 v-text="message2">h2>
<hr>
<h3>{{ content }}h3>
div>
<script src="../Vue3.js">script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello Vue",
message2:"xxx",
content: `Hello Vue`,
content2: `Hello Vue`,
};
},
methods: {
// 疯狂点击仍不会改变，因为v-once只渲染一次
change() {
this.message = "我被改变了";
},
}
});
app.mount("#app");
script>
运行效果：
常用指令：v-bind
v-bind绑定基本属性
- 绑定如图片的链接src、网站的链接href等，基本用法如下：
< img v-bind:src=“链接” alt=“” />
- v-bind有一个对应的语法糖:
:代替v-bind，也就是简写方式。 - 如果想要动态绑定，只需要在data中定义变量，再将链接写在变量值，绑定变量即可，操作如下：
<div id="app">
<img v-bind:src="链接" alt="" />
<img v-bind:src="imgUrl" alt="" />
<img :src="imgUrl" alt="" />
div>
<script src="../js/vue.js">script>
<script>
const app = Vue.createApp({
data() {
return {
imgUrl:"https://hiimg.cqqnb.net/csimage/202303/14/1678777144575.jpg",
};
},
});
app.mount("#app");
script>
v-bind绑定class
1.基本绑定class，和绑定基本属性一样
2.动态绑定class：开发中，很多元素class都是动态绑定的
动态绑定的两种方法：
- 对象语法
- 数字语法
对象语法：
1.对象语法基本用法示例：
:class="{ active:true/false }；为true时就绑定了active类
再将true/false替换成data中的一个变量即变成了动态绑定（提示：动态绑定的class和普通绑定的class是可以同时并列使用的）
<div id="app">
<button :class="{ active:isActive }" @click="changeColor">我是按钮button>
div>
<script>
const app = Vue.createApp({
data() {
return {
isActive:false,
}
},
})
app.mount('#app')
script>
做个小案例：
- 需求：点击按钮变成红色，再点击取消红色，如此反复
- 分析：active里设置字体为红色；为按钮绑定点击事件；点击动态绑定active
案例代码：
<script src="../Vue3.js">script>
<div id="app">
<button :class="{ active:isActive }" @click="changeColor">我是按钮button>
div>
<script>
const app = Vue.createApp({
data() {
return {
isActive:false,
}
},
methods:{
changeColor(){
this.isActive = !this.isActive
}
}
})
app.mount('#app')
script>
2.对象语法多个键值对绑定
如果想同时绑定多个键值对，使用逗号分隔符分开即可，代码示例如下
<button :class="{ active:isActive,okk:true,nono:false }" @click="changeColor">我是按钮button>
当然了，如果这样写的话从格式上来说并不美观，可以选择将对象抽取成方法
<<button :class="getDynamicClasses() " @click="changeColor">我是按钮button>
<script>
const app = Vue.createApp({
methods:{
// 下方为将对象语法抽取成键值对的操作
getDynamicClasses:function(){
return{active:this.isActive,okk:true,nono:false }
}
}
})
app.mount('#app')
script>
数组语法（了解）：
使用的较少，了解即可，用法如下就不过多解释了：
<div id="app">
<h2 :class="['abc', 'cba']">HELLO arrayh2>
<h2 :class="['abc',className]">h2>
div>
<script>
const app = Vue.createApp({
data() {
return {
classes: "abc nba cba",
className:"sevgilid"
}
}
app.mount('#app')
script>
v-bind绑定style属性
- 使用
v-bind:style来绑定一些CSS内联样式 - 在style后面跟上一个
对象类型配合在data中定义的变量数据动态绑定style属性 - data中配合动态绑定的变量数据名可以用
驼峰式命名或短横线分隔命名(如果是短线分割，需要用引号括起来)
用法示例：
<div id="app">
<h2 style="color: red;;font-size: 25px;">哈哈哈h2>
<h2 :style="{ color:fontColor, 'font-size':'30px'}">嘎嘎嘎嘎嘎h2>
<h2 :style="{ color:fontColor, fontSize:'30px'}">嘎嘎嘎嘎嘎h2>
div>
<script>
const app = Vue.createApp({
data() {
return {
fontColor:"blue"
}
}
})
app.mount('#app')
script>
v-bind绑定对象
如果想将一个对象中的所有属性都绑定到一个元素上，怎么办呢？（如下）
<h2 :name="name" :age="age" height="height">嘎嘎嘎嘎嘎h2>
除了挨个绑定，更好的就是直接绑定一个对象(后面组件传参的时候非常适用)
代码示例：
<div id="app">
<h2 :name="name" :age="age" height="height">嘎嘎嘎嘎嘎h2>
<h2 v-bind="infos">时光如梭h2>
div>
<script>
const app = Vue.createApp({
data() {
return {
infos:{name:'sevgilid', age:18,height:1.88},
name:'sevgilid',
age:18,
height:1.88
}
}
})
app.mount('#app')
script>