基础语法使用
1.Mustache差值语法
我们不仅通过在Vue.createApp()中使用template来渲染数据或者标签，而且可以把template省略不写，而是把数据写在根标签下，通过{{}}的形式
<div id="app">
<!-- 1.基本使用 -->
<h2>{{ message }}</h2>
<h2>当前计数: {{ counter }} </h2>
<!-- 2.表达式 -->
<h2>计数双倍: {{ counter * 2 }}</h2>
<!-- 3.三元运算符 -->
<h2>{{ age >= 18? "成年人": "未成年人" }}</h2>
<!-- 4.调用methods中函数 -->
<h2>{{ formatDate(time) }}</h2>
<!-- 5.注意: 这里不能定义语句 -->
<!-- <h2>{{ const name = "why" }}</h2> -->
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
data: function() {
return {
message: "Hello Vue",
counter: 100,
age: 22,
time: 123
}
},
methods: {
formatDate: function(date) {
return "2022-10-10-" + date
}
}
})
// 2.挂载app
app.mount("#app")
2.v-once
v-once用于指定元素或者组件只渲染一次
当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；
该指令可以用于性能优化;
<!-- 指令: v-once -->
<h2 v-once>
{{ message }}
<span>数字: {{counter}}</span>
</h2>
3.v-text
用于更新元素的 textContent
<div id="app">
<h2> aa {{message}} bbb</h2>
<h2 v-text="message">aaa</h2>
</div>
4.v-html
默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析
如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示；
<div id="app">
<h2>{{ content }}</h2>
<h2 v-html="content"></h2>
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
data: function() {
return {
content: `<span style="color: red; font-size: 30px;">哈哈哈</span>`
}
},
})
// 2.挂载app
app.mount("#app")
5.v-pre
v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签
跳过不需要编译的节点，加快编译的速度
6.v-cloak
这个指令保持在元素上直到关联组件实例结束编译
和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h2 v-cloak>{{message}}</h2>
</div>
<script src="../lib/vue.js"></script>
<script>
setTimeout(() => {
// 1.创建app
const app = Vue.createApp({
data: function() {
return {
message: "Hello Vue"
}
},
})
// 2.挂载app
app.mount("#app")
}, 3000)
7.v-memo
只有赋值的那个值发生改变 才会整体改变
<div id="app">
<div v-memo="[name]">
<h2>年龄：{{age}}</h2>
</div>
<button @click="updateInfo">改变信息</button>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
age: 18,
};
},
methods: {
updateInfo() {
this.age = 20;
},
},
});
app.mount("#app");
8.v-bind
一.v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值
v-bind可以简写为:
<!-- 绑定img的src属性 -->
<img v-bind:src="showImagUrl" alt="" />
<!-- 绑定a 的href属性 -->
<a v-bind:href="href"></a>
二.v-bind绑定class属性
基本绑定
<h2 :class="classes">Hello world</h2>
2动态class可以写对象语法
{key:value}
key :要绑定的class名
value: true/false
<button :class="{active:isActive}" @click="btnClick">我是按钮</button>
...
...
btnClick() {
this.isActive = !this.isActive;
},
3.动态绑定的class和普通的class是可以同时使用的
<button
class="abc cba"
:class="getDynamicClasses()"
@click="btnClick">
</button>
4.动态class可以使用数组语法
<h2 :class="['abc' ,'cba']">Hello world</h2>
<h2 :class="['abc' ,className]">Hello world</h2>
<h2 :class="['abc' ,className,isActive?'active':'']">Hello world</h2>
<h2 :class="['abc' ,className,{active:isActive}]">Hello world</h2>
三.v-bind绑定style
<div id="app">
<!-- 普通的html写法 -->
<h2 style="color: red; font-size: 30px">哈哈哈</h2>
<!-- style中的某些之 来自data中 -->
<h2 v-bind:style="{color: fontColor, fontSize: fontSize + 'px'}">
<!-- 动态绑定属性 属性是一个对象 -->
<h2 :style="objStyle">
哈哈哈
</h2>
<h2 :style="[objStyle,{backgroundColor:'purple'}]">嘿嘿</h2>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
fontColor: "blue",
fontSize: 30,
objStyle:{
fontSize:'50px',
color:'green'
}
};
},
});
app.mount("#app");
</script>
四.v-bind绑定属性名
<div id="app">
<h2 :[name]="'aaa'">Hello world</h2>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
name: "class",
};
},
});
app.mount("#app");
</script>
五.v-bind还可以直接绑定对象
本文含有隐藏内容，请 开通VIP 后查看