前言
最近在学习vue，涉及到一些基础的知识点，在此处记录一下，有什么不对的地方欢迎批评指正。
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
正如vue官网所说，vue是一个渐进式框架，那么什么是一个渐进式框架呢？
渐进式框架就是既可以当成小的插件，也可当成库使用，也可以当成一个框架使用。
插件：一个非常小的功能或者模块
库：一系列插件的集合
框架：可以完成大型完整项目
文章目录
Vue 的魅力
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
</script>
Vue 的魅力之处就是不用操作DOM也可以进行修改页面的内容。
我们直接通过控制台修改 Vue 中的 data 值，页面也会随之改变。
Vue 的指令
在MV*（MVC，MVVM）框架中，vue的指令以v-开头，angular的指令以ng-开头，在react中可以自定义，指令卸载标签的属性中，不同的指令完成不同的功能。
v-pre 跳过Vue渲染
Vue 的页面是经过两次渲染的，第一次有浏览器进行渲染，Vue进行接管后进行第二此渲染，v-pre 指令就是让Vue对其不进行二次渲染。
<div id="app">
<h1 v-pre>{{ message }}</h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
</script>
v-cloak 跳过页面渲染
我们知道在vue中，页面的渲染是有两次的，使用 v-cloak 指令可以跳过页面的渲染。
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<h1 v-cloak>{{ message }}</h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
</script>
v-once 仅渲染一次
使用v-once指令后，无论页面vue值如何改变，页面也不会再次渲染。
<div id="app">
<h1 v-once>{{ message }}</h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
</script>
v-html 渲染HTML文档
和innerHTML效果类似，v-html指令需要赋值。
<div id="app">
<h1 v-html="message"></h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: '<h1>Hello World</h1>'
}
})
</script>
v-text 渲染HTML文档
和innerText效果类似，v-text指令需要赋值。
<div id="app">
<h1 v-text="message"></h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: '<h1>Hello World</h1>'
}
})
</script>
v-if 控制元素（如果）
当v-if的值为true是，则当前元素将要渲染。
<div id="app">
<h1 v-if="isShow">{{ message }}</h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello World',
isShow: true
}
})
</script>
v-else 控制元素（反之）
v-else与v-if必须为一组，且中间不允许出现其他元素。
<div id="app">
<h1 v-if="isShow">{{ message }}</h1>
<h1 v-else>{{ messages }}</h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello World',
messages: 'Hello Vue',
isShow: false
}
})
</script>
v-else-if 控制元素（分支）
和v-else一样，v-else-if会创建更多的分支，与v-if必须为一组，且是连续的。
<div id="app">
<h1 v-if="isShow">{{ message }}</h1>
<h1 v-else-if>{{ messages }}</h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello World',
messages: 'Hello Vue',
isShow: false
}
})
</script>
v-show 显示元素
v-show 指令控制元素显示隐藏，和v-if不同的是v-if控制元素是否存在，v-show控制元素的display:none，同时v-show不支持template标签。
<div id="app">
<h1 v-show="isShow">{{ message }}</h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello World',
messages: 'Hello Vue',
isShow: false
}
})
</script>
v-for 循环
将数据与元素循环绑定，数据可以为数组，也可以是对象；
v-for="(item,index) in arr"
v-for="(value,key) in obj"
<div id="app">
<div v-for="item in listarr" :class="item" :key="item" style="width: 100px;height: 100px;"></div>
<div v-for="(value,key) in listarr" :key="key">{{key}}:{{value}}</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
listarr: ['red', 'blue', 'yellow'],
listobj: {
name: 'rabbit',
age: 20
}
}
})
</script>
属性的绑定
需要通过vue渲染的属性得添加标识符v-bind:，可简写为 : 。
可以单个写入也可以用数组的形式写入，还可以是对象的形式。
<style>
.blue {
color: blue;
}
.fontSize {
font-size: 26px;
}
</style>
<div id="app">
<h1 v-bind:class="color" class="fontSize">{{ message }}</h1>
<h1 v-bind:class="[color, fontSize]">{{ message }}</h1>
<h1 v-bind:class="{IsColor:color, IsSize: fontSize}">{{ message }}</h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello World',
color: 'blue',
fontSize: 'fontSize'
}
})
</script>
事件的绑定
和属性的绑定一样，我们通常使用v-on:事件名来绑定事件，也可以使用@符号来代替。
<div id="app">
<button v-on:click="ChangeColor('red')">red</button>
<button @click="ChangeColor('blue')">blue</button>
<button @click="ChangeColor('yellow')">yellow</button>
<div style="width: 100px;height: 100px;" :class="color"></div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
color: 'red',
},
methods: {
ChangeColor(color) {
this.color = color
}
}
})
</script>