1.Mustanche语法
如果我们希望把数据显示到template中使用最多的就是Mustanche语法。
<body>
<div id="app"></div>
<template id="myApp">
<!-- 1.基本使用 -->
<p>{{message}}</p>
<!-- 2.表达式 -->
<p>{{ count * 10}}</p>
<!-- 3.函数调用 -->
<p>{{doubleCount()}}</p>
<!-- 4.三元运算符 -->
<p>{{isShow ? '显示' : '隐藏'}}</p>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return {
message: "Hello Vue3!",
count: 20,
isShow: true,
};
},
methods: {
doubleCount() {
return this.count * 2;
},
},
}).mount("#app");
</script>
</body>
2.v-once
指定元素或者组件只渲染一次，当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；该指令用于性能优化，但是使用非常少。
<body>
<div id="app"></div>
<template id="myApp">
<!-- 只会渲染一次，以后不会被改变 -->
<p v-once>{{message}}</p>
<!-- 会被改变 -->
<p>{{message}}</p>
<!-- 修改。。 -->
<button @click="handleMessage">修改</button>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return {
message: "Hello Vue3!",
};
},
methods: {
handleMessage() {
this.message = "coderY";
},
},
}).mount("#app");
</script>
</body>
3.v-text/v-html
类似于原生JS的innerText/innerHTML。v-text，渲染的时候不会解析html标签。v-html渲染的时候会解析html标签。
<body>
<div id="app"></div>
<template id="myApp">
<!-- 不会解析html标签 -->
<div v-text="tag1"></div>
<!-- 会解析html标签 -->
<div v-html="tag2"></div>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return {
tag1: "<span>tag1</span>",
tag2: "<span>tag2</span>",
};
},
}).mount("#app");
</script>
</body>
运行截图：
4.v-pre
和HTML标签pre标签差不多，v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签。
<body>
<div id="app"></div>
<template id="myApp">
<!-- 不会解析html标签 -->
<div v-pre>{{tag1}}</div>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return {
tag1: "<span>tag1</span>",
};
},
}).mount("#app");
</script>
</body>
运行截图：
5.v-cloak
这个指令保持在元素上直到关联组件实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="myApp">
<!-- 不会显示{{msg}} ，会隐藏未编译的 Mustache 标签，直到组件实例准备完毕 -->
<div v-cloak>{{msg}}</div>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return {
msg: "hello world",
};
},
}).mount("#app");
</script>
</body>
6.v-bind
(1). 基本用法
v-bind用于绑定一个或多个属性值，或者向另外一个组件传递props
(2). 动态绑定属性
如果属性名不是固定的，我们可以使用:[属性名]=“值”的格式来绑定。
(3). 直接绑定一个对象
将一个对象的所有属性，绑定到元素上的所有属性。
<body>
<div id="app"></div>
<template id="myApp">
<!-- 1.基本用法(可绑定多个) -->
<div :props="props1" :class="props1" :props2="props2">绑定多个</div>
<!-- 2.动态绑定属性 -->
<div :[props1]="props2">动态绑定属性</div>
<!-- 3.绑定对象 -->
<div :="propsObj">绑定对象</div>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return {
props1: "props1111",
props2: "props2222",
propsObj: {
name: "coder",
age: "23",
},
};
},
}).mount("#app");
</script>
</body>
运行截图：
(4)绑定class - 对象语法
<body>
<div id="app"></div>
<template id="myApp">
<!-- 1.普通绑定 -->
<div :class="colorRed">普通绑定</div>
<!-- 2.对象语法 是否生效 关键要看后面的 true 和 false-->
<div :class="{'color':true,'font12':false}">对象语法</div>
<!-- 3.默认class 和动态class （会合并） -->
<div class="default" :class="{'color':true,'font12':true}">
默认/动态class
</div>
<!-- 4. 封装在计算属性或者是方法中 -->
<div :class="getStyleC">封装在computed中</div>
<!-- 方法要加() -->
<div :class="getStyleM()">封装在methods中</div>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return {
colorRed: "red",
};
},
methods: {
getStyleM() {
return {
color: true,
font10: true,
};
},
},
computed: {
getStyleC() {
return {
color: true,
font10: false,
};
},
},
}).mount("#app");
</script>
</body>
运行截图：
(5)绑定class - 数组
<body>
<div id="app"></div>
<template id="myApp">
<!-- 数组绑定 -->
<div :class="[getStyleM(),getStyleC,isFlagC]">数组绑定动态class</div>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return {
isFlag: true,
};
},
methods: {
getStyleM() {
return {
color: true,
};
},
},
computed: {
getStyleC() {
return {
font10: true,
};
},
isFlagC() {
return this.isFlag ? "isFlag" : "";
},
},
}).mount("#app");
</script>
</body>
运行截图：
(6)绑定style - 对象写法
<body>
<div id="app"></div>
<template id="myApp">
<!-- 1.普通写法 如果是用短横线 必须要加单引号 -->
<div :style="{'background-color':'#f40'}">基本用法1</div>
<div :style="{backgroundColor: myColor,fontSize: mySize}">基本用法2</div>
<!-- 2.直接绑定一个对象 -->
<div :style="myStyle">直接绑定一个对象</div>
<!-- 3.绑定方法 -->
<div :style="myStyleM()">绑定一个方法</div>
<!-- 4.绑定计算属性 -->
<div :style="myStyleC">绑定计算属性</div>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return {
myColor: "#f40",
mySize: "12px",
myStyle: {
backgroundColor: "#f40",
fontSize: "12px",
},
};
},
methods: {
myStyleM() {
return {
backgroundColor: "#f40",
fontSize: "12px",
};
},
},
computed: {
myStyleC() {
return {
backgroundColor: "#f40",
fontSize: "12px",
};
},
},
}).mount("#app");
</script>
</body>
运行截图：
(7)绑定style - 数组写法
<body>
<div id="app"></div>
<template id="myApp">
<!-- 1.数组写法 -->
<div :style="[myStyleM(),myStyleC]">数组写法</div>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
methods: {
myStyleM() {
return {
backgroundColor: "#f40",
};
},
},
computed: {
myStyleC() {
return {
fontSize: "12px",
};
},
},
}).mount("#app");
</script>
</body>
运行截图：
7.v-on
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。 简写： @ (1).基本使用
<body>
<div id="app"></div>
<template id="myApp">
<!-- 1.基本用法 -->
<button @click="btn1">基本用法</button>
<!-- 2.绑定表达式 -->
<button @click="count++">{{count}}</button>
<!-- 3.绑定多个事件 -->
<button @click="btn2" @mouseenter="mouse">绑定多个事件</button>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return { count: 1 };
},
methods: {
btn1() {
console.log("btn1");
},
btn2() {
console.log("btn2");
},
mouse() {
console.log("mouse");
},
},
}).mount("#app");
</script>
</body>
(2)参数传递
没有参数的时候，会默认传入event对象，当有参数的时候，我们需要通过$event进行传递，它可以放在任意位置，但是我们习惯于放在最后一个。
<body>
<div id="app"></div>
<template id="myApp">
<!-- 1.基本用法 -->
<button @click="btn1('coderY',$event)">基本用法</button>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return { count: 1 };
},
methods: {
btn1(str, event) {
console.log(str, event.target);
},
},
}).mount("#app");
</script>
</body>
(3)修饰符
<body>
<div id="app"></div>
<template id="myApp">
<!-- 1.停止冒泡 -->
<button @click.stop="btn1('coderY',$event)">停止冒泡</button>
<!-- 2.阻止默认行为 -->
<a href="https://www.baidu.com/" @click.prevent="btn1('coderY',$event)"
>阻止默认行为</a
>
<!-- 3.串联修饰符-->
<a
href="https://www.baidu.com/"
@click.stop.prevent="btn1('coderY',$event)"
>串联修饰符</a
>
<!-- 4.键修饰符，键别名 -->
<button @keyup.enter="keyEnter">keyup enter</button>
<!-- 5.回调只触发一次 -->
<button @keyup.enter.once="keyEnter">keyup enter</button>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return { count: 1 };
},
methods: {
btn1(str, event) {
console.log(str, event.target);
},
keyEnter() {
console.log("key enter");
},
},
}).mount("#app");
</script>
</body>
8.条件渲染v-if、v-show
(1).与template结合
template元素可以当做不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来，从而防止产生不必要元素。
<body>
<div id="app"></div>
<template id="myApp">
<template v-if="isShow"> <div>显示一个div</div> </template>
<button @click="toggle">切换</button>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return { isShow: true };
},
methods: {
toggle() {
this.isShow = !this.isShow;
},
},
}).mount("#app");
</script>
</body>
(2)v-show
v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件：
<body>
<div id="app"></div>
<template id="myApp">
<!-- v-if如果不成立，直接不会渲染 -->
<div v-if="isShow">显示一个div</div>
<!-- v-show是通过display来控制 -->
<div v-show="isShow">显示一个div</div>
<button @click="toggle">切换</button>
</template>
<script src="vue.js"></script>
<script>
Vue.createApp({
template: "#myApp",
data() {
return { isShow: true };
},
methods: {
toggle() {
this.isShow = !this.isShow;
},
},
}).mount("#app");
</script>
</body>
总结：
v-show不支持template，v-show的本质是控制display，v-if的本质是不成立的话不会渲染DOM，所以在我们频繁切换的时候应该使用v-show减少开销。
