（3）打鸡儿教你Vue.js
vue.js是一套构建用户界面的渐进式框架 vue关注视图层，采用自底向上增量开发的设计
<div id="app">
<p>{{ message }}</p>
</div>vue.js安装 下载 vue.min.js 并用 <script> 标签引入
image.png
npm install vuecd my-project
npm install
npm run dev# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080目录结构：
image
build 项目构建(webpack)相关代码 config 配置目录 node_modules npm 加载的项目依赖模块 static 静态资源目录 test 初始测试目录 package.json 项目配置文件
image.png
通过实例化Vue实现：
var vm = new Vue({
// 选项
}){{ }} 用于输出对象属性和函数返回值image.png
var vm = new Vue({
el: '#vue_det',
data: data
})
document.write(vm.$data === data) // true
document.write("<br>")
document.write(vm.$el === document.getElementById('vue_det')) // true举报
腾讯云开发者
