一、Vue初体验及基础结构

说明

基础2.x作为笔记记录。因为记录的笔记比较慢，如果笔记还未完全记录完整且又碰到Vue3稳定版，那么笔记会转向Vue3进行记录。

什么是Vue.js

Vue是一套用于构建用户界面的渐进式框架。

Vue.js一个典型的MVVM（Model-View-ViewModel）模型框架，它由MVC演变而来。

关于什么是Vue就不过多记录了，官方文档说的很清楚了。详情请到官方文档了解。

Vue初体验

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">html</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">lang</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"en"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">meta</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">charset</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"UTF-8"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">meta</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">name</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"viewport"</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">content</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"width=device-width, initial-scale=1.0"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>Vue初体验<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">title</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">src</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">head</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        {{ msg }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">var</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">vm</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">new</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Vue</span>({   <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 初始化一个Vue实例</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">el</span>:<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"#app"</span>,    <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 挂载Vue区域</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">data</span>:{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">msg</span> : <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'自如初'</span>    <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// 定义数据</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        });</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">body</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">html</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span>

代码分析

首先是引入Vue.js。为了快速便捷的体验，这里引入了CDN资源。引入Vue.js之后就可以大张旗鼓的使用它了，一切好的玩的都将从引入Vue.js这一刻开始。

<span style="color: rgb(255, 192, 0);"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></span><br></br>

其次就是对Vue进行实例化了。想要玩好Vue，还需要为它指定一个地方，哪个地方是Vue的专属区域，这里为Vue指定了一个id为div的元素，这个div里面将是Vue的天下了。Vue从这里正式开始。

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important"><!-- vue的专属区域 --></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important"><!-- 数据展示，对应着View --></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">id</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    {{ msg }}</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span>

实例Vue对象

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">var</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">vm</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">new</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">Vue</span>({  <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// new Vue() 对应着ViewModel</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">el</span>:<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"#app"</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">data</span>:{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">msg</span> : <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'自如初'</span>   <span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// data对应着Model</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    });</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span>

Vue初体验到这里就结束咯。结束之后的疑问？还什么都没有做，数据怎么就出来了，如果有此疑惑就对了，这就是Vue的魅力所在。魅力无限，笔记不断，一步一步学习，一步一步解惑。

我是小白，期待和优秀的你一起同行!

小白

2020年08月25日