(3)打鸡儿教你Vue.js

原创
2019/06/27 21:59
阅读数 0

vue.js是一套构建用户界面的渐进式框架
vue关注视图层,采用自底向上增量开发的设计

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

vue.js安装
下载 vue.min.js 并用

image.png

npm install vue
cd 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

请点赞!因为你的鼓励是我写作的最大动力!

官方微信公众号

吹逼交流群:711613774

吹逼交流群

本文同步分享在 博客“程序员哆啦A梦”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部