【vue2】基础概念 01 (vue框架介绍、el、data、插值表达式)

🥳博       主：初映CY的前说(前端领域)

🌞个人信条：想要变成得到，中间还有做到！

🤘本文核心：vue框架介绍、结构元素详解（el、data、插值表达式）

目录（文末有博主给大家准备好的XMIND思维导图，可快速预览本文核心知识要点呦）

一、vue概念

1.对比组件库

2.vue框架特性

一句话来总结就是说：

二、传统开发vue初体验

1.永远不变的三大步（先体验结构，下文会解释代码细节）

2.上述知识详解

一、vue概念

        vue官方描述为是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

1.对比组件库

        对比我们之间学的组件库来说（拿moment、axios举例），库，本质上是一些函数的集合。每次调用函数,实现一个特定的功能工具箱。需要自己控制代码的执行逻辑

        而我们框架相当于是直接用别人写好的骨架来进行开发的，这样限制多但是框架的功能也很强大，可以极大地提高开发的效率（常见框架：vue、react、angular、bootstrap）

2.vue框架特性

vue是 MVVM 的框架，各代表着：

• M：model数据模型(ajax获取到的数据)

• V：view视图（页面）

• VM：ViewModel 视图模型

 实现的机制如下：

一句话来总结就是说：

vue使用的这个框架是同通过数据来驱动视图的，我们修改了数据会通过MVVM的特殊机制来达到实时修改，实时渲染到页面上的效果 

---

3.开发vue的方式

• 传统开发模式：基于html/css/js文件开发vue

• 工程化开发方式：在webpack环境中开发vue，这是最推荐的方式。

• 现代化的项目也都是在webpack环境下进行开发的。

     （本文是初体验vue框架的开发模式，因此还是先遵守传统开发模式的方式进行演示讲解，等基础扎实了我们就开始转换现代化的方式进行开发喽）

二、传统开发vue初体验

1.永远不变的三大步（先体验结构，下文会解释代码细节）

①在html中导入我们准备好的vue.js文件

<!-- 1.导入vue -->
<script src="./vue.js"></script>

 ②写入HTML模板

 <!-- 2.写HTML模板 -->
  <div id="app">
    {{message}}
  </div>
    <div id="app">
      {{message}}
  </div>

③创建实例对象

  <script>
    // 3.创建实例对象
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello vue'
      }
    })
  </script>

上述是不变的结构，下面的话我们来学习为什么需要这样写

2.上述知识详解

1.挂载点el

挂载点通俗的来说就是确定vue它渲染的范围是哪一块区域。

我们通过挂载点el:"标签"来确定它渲染的范围。比如下面这个例子，我们就是通过 el="#app"从而找到了渲染的地方是在那个div盒子里面。

注意点：当有多个平级的el挂载点的时候仅仅只是会渲染第一个遇见的挂载点找到的标签。

例如：下面这个虽然有两个"#app"但是仅仅只是找到了第一个挂载点渲染，第二个未渲染。

---

2.插值表达式

写法：{{写data中的数据 }}

作用: 使用 data 中的数据渲染视图（模板）

注意事项：①可解析对象、数组、变量, 同时支持三元运算符

                  ②不能使用if或者for,也不能在标签属性中使用

比如可支持：

{{ msg }}
{{ obj.name }}
{{ msg.toUpperCase() }}
{{ obj.age > 18 ? '成年' : '未成年' }}

3.存数据data

作用：里面存放我们vue框架所需要用到的数据。（切记：vue框架是以数据作为驱动的）

语法：data:{},data是对象。

注意点：vue框架处理数据会进行平铺的，即我们处理data中数据的时候可以省略用data.xxx的形式来读入data中我们存在的数据。

举个栗子

看到这里了，我再来解释下上述vue框架传值并渲染的一个流程：

我们先通过我们引入的vue.js文件new实例化一个vue的对象出来，之后我们通过挂载点找到我们需要渲染的位置在哪里，之后找到里面的插值{{}}解析里面存放在data中的数据，解析完毕后vue框架会实时的将我们的内容自动的渲染出来，不再需要dom的操作。

---

本文的总览：

---

各位，兄弟姐妹们，感谢你看到了这里！

下篇文章将讲解【vue】指令的用法，本专栏将持续更新~~~~~~