前言
最近在学习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>