vue初级知识

数据渲染

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>

数据绑定

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

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

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

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

  new Vue({
            el: "#app",
            data:{
                message: "Hello World"
                }
                })

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

1.2.3 语法★★★★★

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

前端渲染

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