纯拿Vue.js

这里指的是，我们不使用npm打包vue。

我们把Vue.js当成一个JQ来使用

请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

当前我们先使用，vue.js

 第一步：引入你的vuejs文件。

引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 声明式渲染

 1.0 传统 渲染

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

<div id="app">

  {{ message }}

</div>

var app = new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue!'

  }

})

 2.0 v-bind动态渲染

指令: v-bind attribute ,指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。

意思: 将这个元素节点的 title attribute 和 Vue 实例的 message 属性保持一致

尝试动态改变数据: 如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

绑定元素 attribute：

<div id="app-2">

  <span v-bind:title="message">

    鼠标悬停几秒钟查看此处动态绑定的提示信息！

  </span>

</div>

var app2 = new Vue({

  el: '#app-2',

  data: {

    message: '页面加载于 ' + new Date().toLocaleString()

  }

})