Vue.js------认识Vue(一)

浅浅的花香味﹌ 2021-09-23 15:26 324阅读 0赞

# 一、什么是Vue.js？ #

用官网的解释来说Vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

**简单的来说Vue.js具有以下特性：**  
1、JavaScript框架；  
2、简化Dom操作；  
3、响应式数据驱动。

# 二、导入开发环境 #

1、开发环境版本，包含了有帮助的命令行警告

2、生产环境版本，优化了尺寸和速度

# 三、创建第一个Vue.js实例 #

<div id="app">
      { {  message }}
    </div>
    
    var app = new Vue({ 
      el: '#app',
      data: { 
        message: 'Hello Vue!'
      }
    })

此时我们会看到在网页上输出 Hello Vue!

# 四、el:挂载点 #

el的意思是设置挂载点，通过css选择器设置Vue实例管理的元素，设置完毕之后，el命中的元素的内部使用\{ \{\}\}修饰的部分就会被data中同名的数据替换。 如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70]  
选择器与el挂载点对应的元素如下

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>对应的el挂载点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id=“app” (id选择器)</td> 
   <td>el:"#app"</td> 
  </tr> 
  <tr> 
   <td>class=“app” (class选择器)</td> 
   <td>el:".app"</td> 
  </tr> 
  <tr> 
   <td>div (标签选择器)</td> 
   <td>el:“div”</td> 
  </tr> 
 </tbody> 
</table>

## **注意：** ##

1、Vue会管理el选项命中的元素及其内部的后代元素；

2、不要挂在到body、html上；建议使用div作为挂载的元素；

3、是否可以设置其他的dom元素？

可以使用其他的双标签，不能使用HTML和BODY

# 五、data:数据对象 #

Vue实例需要使用的数据都会定义在data中，数据类型不仅仅是字符串，还有数组、对象等复杂类型。同时渲染时要遵守js的语法规则–对象的点语法，数组的索引语法等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70]: /images/20210923/443cb0ee8e2443e7abfb1f391a8b1f82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 1]: /images/20210923/e39167875e344f4fa3a2d7774390b70a.png