Vue基础数据渲染

1.1 什么是Vue?

Vue.js 是一套响应式的 JavaScript 开发库。Vue.js 自问世以来所受关注度不断提高，在现在的市场上，Vue.js 是非常流行的 JavaScript 技术开发框架之一。

Vue是一款国产前端框架，它的作者尤雨溪（Evan You）是一位美籍华人，2014年2月，尤雨溪开源了一个前端开发库 Vue.js，2015年发布1.0.0版本，2016年4月发布2.0版本，目前，尤雨溪全职投入 Vue.js 的开发与维护，立志将 Vue.js 打造成与 Angular/React 平起平坐的世界顶级框架。

vuejs中文官网

Vue.js - 渐进式 JavaScript 框架 | Vue.js

1.1.1 读音

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

1.1.2 特点

• Vue是一个遵循M V VM模式的渐进式框架

 

• Vue比较易学，体积更小，灵活，高效

• Vue的本身只关注UI视图，可以更简单的导入Vue插件和第三方库

• Vue通过Vue对象把数据和视图完全分离开来，对视图的改变无需在操作DOM元素，只需要操作对应的数据，即可改变对应的视图结构，也就是通过双向数据绑定把View层和Model层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。

1.2 数据渲染

1.2.1 Vue.js的引入

前面我们说了Vue的一些特点，那下面我们来看一下我们如何具体使用Vue呢？我们一般学一门语言，都会先从打印hello world学起，那么我们来看一下，Vue如何打印Hello World呢？

使用Vue我们有两种方法，一种方法类似于使用JQuery，我们可以引入Vue.js文件，还有一种方式是借助于npm来安装Vue的脚手架，做到真正的前后端分离，我们先来看一下第一种方式。

我们可以通过下面的方式引入Vue的文件

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

1.2.2 数据绑定

上面我们说了如何导入Vue的js文件，下面我们来看一下我们如何在Vue中绑定数据，并把数据显示到页面上呢？

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

 <div id="app">
     <h3>{{message}}</h3>
 </div>

在script的标签中实例化一个Vue的对象，并定义绑定的数据

  <script src="js/vue.js"></script>
    <script>
        new Vue({
            // 模板选择器
            el:'#app',
            // 数据中心
            data:{
                message:'hello vuejs'
            }
        })
    </script>

 预览：

这样的话我们已经创建了一个Vue的应用，看起来像是渲染模版字符串一样，但是Vue在背后做了大量的工作，这样的话DOM和数据就建立绑定关系。

1.2.3  语法

在上面的案例中我们把Hello World渲染到了页面上，那我们来看一下，这个语法结构是什么意思呢？

前端渲染

 <div id="app">
     <h3>{{message}}</h3>
 </div>

 

数据渲染到页面上，首先我们需要提供一个标签用于填充数据，这个标签我们定义了一个id属性为app,在标签中我们用小胡子插值表达式进行数据的填充。

Vue对象定义

• 定义完页面结构，我们需要在js中通过 new Vue()创建一个Vue的实例化对象

• 在构造函数中以对象的形式做一些配置，这些配置中比较重要的有el、data两个属性

• el 定义可以渲染数据的DOM结构

• data定义可以渲染到页面上的数据，跟DOM结构建立关联关系

通过上述语法结构，我们就简单完成用Vue打印Hello World的应用