Vue.js 快速入门，请看这里！

深藏阁楼爱情的钟 2022-11-03 10:35 132阅读 0赞

### 一、 Vue.js是什么? ###

*  Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
 *  Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一 方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
 *  自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。
    
    官方网站: [https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 作者 尤雨溪是中国人.

### 二、 为甚么使用Vue? ###

1.  声明式渲染: 前后端分离是未来趋势
2.  渐进式框架: 适用于各种业务需求
3.  简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习

### 三、 Vue.js的引入 ###

1.  在html页面使用script引入vue.js的库即可使用。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
       
    
    <script src="./vue包的存放目录/vue.min.js"></script>

1.  Vue-CLI脚手架: 使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形  
    ps：关于Vue-CLI脚手架的使用介绍，请看这篇文章：[vue-cli脚手架教程][vue-cli]

### 三、 入门程序 ###

##### 1. 环境安装 #####

开发软件：Visual Studio Code  
为了方便，我已上传到我的CSDN资源，可点击下载：[VSCodeSetup-x64-1.29.1.exe][]  
![在这里插入图片描述][20210227144035390.png]  
下载好开发软件后，需要安装一下相应的插件。  
打开VS code软件，点击左侧最后一个图标（扩展），在商城中搜索以下插件并点击安装。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70]  
示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 1]

##### 2. 代码编写 #####

接下来开始编写入门小程序.  
创建一个vue\_text目录, 并且在目录下创建 01\_vue入门程序.html 文件.  
![在这里插入图片描述][2021022715222243.png]

> tips: 在01\_vue入门程序.html 文件中，第一行输入英文状态下的感叹号 ！，  
> 再点击回车即可自动生成一段初始html代码如下：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 2]

**代码编写步骤：**

1.  定义html，引入vue.js
2.  定义"app" div，此区域作为vue的接管区域
3.  定义Vue实例，接管app区域
4.  定义model（数据对象）
5.  在"app"中展示数据

基于以上几个步骤，请对照下面代码实例：

<!DOCTYPE html> 
    <html lang="en"> 
    <head>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Vue入门</title> 
    
        
    
         
         
            
         
        <script src="./js/vue.min.js"></script> 
    
    </head> 
    
    <body> 
        <div id="app"> 
             
            <h2> {
       {name}} </h2>
        </div> 
    </body> 
    
    <script> //3. 创建vue实例 var VM = new Vue({ //定义 Vue实例挂载的元素节点,表示vue接管该div el:'#app', //4.定义model模型数据对象 data:{ name:"格子衫" } }); </script>
    
    </html>

##### 3. 运行结果 #####

在html文件中，右键点击“Open with Live Sever”即可运行：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 3]  
浏览器中显示为：  
![在这里插入图片描述][20210227164052475.png]

##### 4. 说明 #####

Vue的程序基本上是按照上面的模板写的，div中插值获取数据、js中定义el挂载点、定义data数据对象  
**1) \{ \{\}\}: 插值表达式**

1.  插值表达式的作用？
    
        通常用来获取Vue实例中定义的数据(data)
         属性节点中 不能够使用插值表达式

**2) el: 挂载点**

1.  el的作用 ?
    
        定义 Vue实例挂载的元素节点,表示vue接管该区域
2.  Vue的作用范围是什么 ?
    
        Vue会管理el选项命中的元素,及其内部元素
3.  el选择挂载点时,是否可以使用其他选择器 ?
    
        可以,但是建议使用 ID选择器
4.  是否可以设置其他的DOM元素进行关联 ?
    
        可以,但是建议选择DIV, 不能使用HTML和Body标签

**3) data: 数据对象**

1.  Vue中用到的数据定义在data中
2.  data中可以写复杂类型
3.  渲染复杂类型数据的时候,遵守js语法  
    下面是data数据中写复杂类型数据示例：

<!DOCTYPE html> 
    <html lang="en"> 
    <head>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Vue中data写复杂类型</title> 
    
        
    
         
         
            
         
        <script src="./js/vue.min.js"></script> 
    
    </head> 
    
    <body> 
         
        <div id="app"> 
                {
       {name}} <br> 
                {
       {school.name}} {
       {school.mobile}}<br> 
                <ul>
                    <li>{
       {names[0]}}</li> 
                    <li>{
       {names[1]}}</li> 
                    <li>{
       {names[2]}}</li> 
                </ul> 
        </div> 
    </body> 
    
    <script> //3. 创建vue实例 var VM = new Vue({ //定义 Vue实例挂载的元素节点,表示vue接管该div el:'#app', //4.定义model模型数据对象 data:{ name:"格子衫", //对象类型数据 school:{ name:"xx教育", mobile:"1001001" }, //数组类型 names:["小斌","张百万","刘能"] } }); </script>
    
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 4]

### 四、 声明式渲染的好处 ###

不知有没注意到，在本文目录第二点 “为甚么使用Vue?” 中提到了声明式渲染。  
那什么是声明式渲染呢？

Vue中的声明式渲染，简单理解就是我们声明数据，Vue帮我们将数据渲染到HTML.

下面请看一个例子，使用 jQuery 和 使用Vue两种方式渲染 html 数据的区别：

<!DOCTYPE html> 
    <html lang="en"> 
        <head> 
            <meta charset="UTF-8" /> 
            <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
            <title>Document</title> 
        </head> 
        <body> 
            <div id="app"> 
                <h2>{
       {name}}</h2> 
            </div>
        </body>
    
        
    
        
        <script src="js/vue.min.js"></script> 
        <script> var VM = new Vue({ el: "#app", //挂载点 data: { name: "Hello Word! !", }, }); </script>
        
    </html>

*  可以看到，原生 jQuery，如果要渲染 html 数据，需要在JS代码中获取到 dom对象，再进行数据的追加，有时候还需要内嵌html标签。这样是不是很麻烦，而且不方便阅读代码，另外，对dom操作还会使性能变低，影响用户体验。
 *  而 Vue方式，先将数据在JS中通过Vue定义好，然后写html时，想在哪个标签上赋值直接写变量名即可，两边通过属性名动态绑定，一目了然！

O啦，以上就是Vue.js的入门介绍，是不是so easy~

> tips:想学习更多，可以去看官方网站，链接已在文章开头给出  
> 同时，我也上传了Vue每个知识点的 Demo到资源中，注释很详细，需要的朋友可点击下载：[前端Vue示例代码][Vue]

[https_cn.vuejs.org_v2_guide]: https://cn.vuejs.org/v2/guide/
[vue-cli]: https://blog.csdn.net/u012660464/article/details/114834812
[VSCodeSetup-x64-1.29.1.exe]: https://download.csdn.net/download/u012660464/15491548
[20210227144035390.png]: /images/20221024/dec4b79a73b04e35ae801609ee10888a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70]: /images/20221024/cfb1a04f16744e6caa1a7b4524182ed1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/0d32f6f41fb94982b81096d65afac8fd.png
[2021022715222243.png]: /images/20221024/2144db09560b485e8fad4f283122c140.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/89a7ba86dc0244f5ace62ff45c145eed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/54bf218c1149419b8ae33f7a7aa7e3cf.png
[20210227164052475.png]: /images/20221024/86b2fa2552064e3e83aa149e20907dd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/f973430abc5f4df7937b0b76af65a032.png
[Vue]: https://download.csdn.net/download/u012660464/15499532