v-text：渲染dom元素中的文本内容
原生JS中的innerText
v-html：渲染文本内容外还可以渲染标签样式
原生JS中的innerHTML
v-show：控制元素的显示和隐藏
语法：v-show = “表达式”，值为true显示，值为false隐藏
原理：通过控制display的值来显示和隐藏，元素节点一直存在
// 显示
<div id="myElement" v-show="true">Hello, World!</div>
// 隐藏
<div id="myElement" v-show="false">Hello, World!</div>
原生JS中的有两种方式来实现：
display属性来实现<div id="myElement" style="display: none;">Hello, World!</div>
<script>
// 通过获取元素并设置其样式来显示或隐藏
var myElement = document.getElementById("myElement");
// 显示元素
myElement.style.display = "block";
// 隐藏元素
myElement.style.display = "none";
</script>
clssList添加或移除类<style>
.hidden {
display: none;
}
</style>
<div id="myElement">Hello, World!</div>
<script>
// 获取元素
var myElement = document.getElementById("myElement");
// 隐藏元素
myElement.classList.add("hidden");
// 显示元素
myElement.classList.remove("hidden");
</script>
v-if：控制元素的显示和隐藏（条件渲染）
语法：v-if = “表达式”，值为true显示，值为false隐藏
原理：基于条件判断，是否创建或者移除元素节点
// 显示
<div id="myElement" v-if="true">Hello, World!</div>
// 隐藏
<div id="myElement" v-if="false">Hello, World!</div>
v-if 和 v-show 的区别：
? v-if：要么显示，要么不显示，显示就一直存在于页面中，不显示同理
? v-show：需要频繁切换显示隐藏的场景
v-else 和 v-else-if：辅助 v-if 进行判断渲染，需要紧接着 v-if 使用
<div id="app">
<p v-if="gender === 1">性别：♂男</p>
<p v-else>性别：♀女</p>
<hr>
<p v-if="score >= 90">成绩A：奖励电脑一台</p>
<p v-else-if="score >= 70">成绩B：奖励周末郊游</p>
<p v-else-if="score >= 60">成绩C：奖励零食礼包</p>
<p v-else>成绩D：惩罚一周不能玩手机</p>
</div>
v-on：可以为dom注册事件，例如点击事件，有三种写法
<button v-on:事件名="内联语句">按钮</button>
<button v-on:事件名="处理函数">按钮</button>
<button v-on:事件名="处理函数(实参)">按钮</button>
v-on 可以简写成@，例如注册一个点击事件
<button @click="count--">-</button>
原生JS绑定点击事件
<button id="myButton">点击我</button>
<script>
// 获取按钮元素
var myButton = document.getElementById("myButton");
// 添加点击事件处理程序
myButton.addEventListener("click", function() {
alert("按钮被点击了！");
// 在这里可以添加更多的逻辑
});
</script>
上面 v-on 的示例用的是内联语句的写法，这是只有简单需求时，如果需求比较复杂就要通过函数来处理，这时就需要事件处理函数，它应该写到一个跟data同级的配置项（methods）中，注意methods中的函数内部的this都指向Vue实例
<button id="myButton" @click="fn">点击我</button>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#myButton',
data: {},
methods: {
fn(){
alert("按钮被点击了！")
}
}
})
</script>
上面是直接使用事件处理函数，同样的也可以给事件处理函数传递参数
<button id="myButton" @click="fn(10)">点击我</button>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#myButton',
data: {
a: 100,
},
methods: {
fn(b){
alert(this.a - b)
}
}
})
</script>
下面通过一个小例子，来看一下Vuejs和原生JS的区别
Vuejs实现一个简单的贩卖机
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="box">
<h3>自动贩卖机</h3>
<button @click="buy(19)">黄鹤楼19元</button>
<button @click="buy(16)">蓝利群16元</button>
<button @click="buy(16)">好猫16元</button>
</div>
<p>余额：{{ money }}元</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
money: 100
},
methods: {
buy(price) {
this.money -= price
alert(this.money -= price)
}
}
})
</script>
</body>
</html>
原生JS实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button data-id="19">黄鹤楼19</button>
<button data-id="16">利群16</button>
<button data-id="16">好猫16</button>
<p>余额：100元</p>
<script>
let money = 100;
document.querySelectorAll('button').forEach(function(button) {
button.addEventListener('click', function(e) {
const price = parseInt(e.target.dataset.id, 10);
money -= price;
document.querySelector('p').innerHTML = `余额：${money}元`
});
});
</script>
</body>
</html>
这样一对比，Vuejs和原生JS的差别就出来了
v-bind：动态设置html的标签属性，比如：src，url，title
语法：v-bind:属性名 = “表达式”
完整写法
<img v-bind:src="url" />
简写
<img :src="url" />
v-for：用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：
此语法也可以遍历对象和数字
//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始
//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始