当前位置 博文首页 > 努力是为了站在万人中央成为别人的光:??万字详解Vue知识体系??
话说现如今都2021年了,Vue3都已经发布好长一段时间了,如今再来写这篇网络上随处可见的文章意义在哪里呢?其实在写之前我也一直在思考这个问题,最后我得出的原因主要有以下几点:
在开始正文之前,需要说明一下,文章中每一个字都是我逐一编写的,难免会有疏漏或者错误,也恳请大家的理解,并期望留言区予以批评指证。本文主要介绍关于模版语法相关,因此不会过多涉及到js逻辑方面。下面是我整理的思维导图简要的来说明一下文章的内容脉络,这样不仅利于文章的编写,也很利于记忆。
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化 的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。具体可参阅 vue官方文档
初学vue,可能会觉得跟刚开始使用原生HTML.CSS JavaScript有所差异,所以对于初学者而言,其实还是建议使用创建.html文件的方式来学习vue框架,因为我以前也是这么走过来的,可以在html文件中引入下载好的vue.js或者使用cdn的方式(建议使用开发环境下的cdn)引入即可。下面为cdn的链接,有想使用其他框架的cdn可以查阅 BootCDN,后续的话一般不会用这样引入。
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
关于vue,它内置了我很多指令,其实也是自定义指令,只不过底层做了很多的处理而已。Vue中指令都是以 v- 开头,接下来我们就先来看看都有哪些指令吧
v-clock
该指令主要是为了防止页面加载时出现闪烁问题,这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}一起用时,编译结束前标签一直有v-cloak属性。
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app">
<div v-cloak>
{{content}}
</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
content:"我是幕筱佳"
}
})
</script>
Mustache
标签。跳过大量没有指令的节点会加快编译。 <div id="app">
<!-- 显示的是{{ hello }}跳过编译过程 -->
<span v-pre>{{ content}}</span>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
content:"我是幕筱佳"
}
})
</script>
v-text
更新元素的 textContent(标签内文字)。如果要更新部分的 textContent ,需要使用Mustache语法进行插值。
<div id="app">
<div v-text="content">
</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
content:"我是幕筱佳"
}
})
</script>
innerHTML
(html标签会被编译)。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。
<div id="app">
<div v-html="content">
</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
content:"<h1>我是幕筱佳</h1>"
}
})
</script>
<div id="app">
<div v-show="flag">显示</div>
<div v-show="flag">未显示</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
flag:true,
}
})
</script>
<div id="app">
<span v-once>{{ content}}</span>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
hello:"我是幕筱佳"
}
})
</script>
<div id="app">
<input v-model="content">
<div>{{content}}</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
content:""
}
})
</script>
<div id="app">
<button v-on:click="onClick">点我</button>
<!-- 简写形式 -->
<button @click="onClick">点我</button>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{},
methods:{
onClick() {
console.log("点我干嘛?");
}
}
})
</script>
:属性名
<div id="app">
<a v-bind:href="url">{{target}}</a>
<!-- 简写形式 -->
<a :href="url">{{target}}</a>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
target:"百度",
url:"https://www.baidu.com"
}
})
</script>
<div id="app">
<input v-model="score">
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80&&score<90">良好</div>
<div v-else-if="score>=70&&score<80">一般</div>
<div v-else>较差</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
score:100,
}
})
</script>
加上key,给每个节点做一个唯一标识,主要是为了更高效的更新虚拟DOM元素
,在真正的开发项目时,如果不加key,可能会造成一系列的结构紊乱问题,详细请参考官方文档v-for的优先级比较高
,如果同时使用的话,则只会遍历数组,而不会执行v-if中的条件判断。<div id="app">
<ul>
<li v-for="item in list" :key:"index">{{item}}</li>
</ul>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
list;["海贼王","海尔兄弟","犬夜叉","画江湖之不良人"]
}
})
</script>
<div id="app">
<!-- 变量形式 -->
<h1 :class="obj">我是幕筱佳</h1>
<!-- 对象形式:常用 --