vue.js是一套构建用户界面的渐进式框架

vue关注视图层,采用自底向上增量开发的设计

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

vue.js安装

下载 vue.min.js 并用

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

目录结构:

build 项目构建(webpack)相关代码

config 配置目录

node_modules npm 加载的项目依赖模块

static 静态资源目录

test 初始测试目录

package.json 项目配置文件

通过实例化Vue实现:

var vm = new Vue({
// 选项
})
{{ }} 用于输出对象属性和函数返回值

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

(3)打鸡儿教你Vue.js的更多相关文章

  1. (29)打鸡儿教你Vue.js

    web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...

  2. (26)打鸡儿教你Vue.js

    weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...

  3. (22)打鸡儿教你Vue.js

    vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...

  4. (21)打鸡儿教你Vue.js

    组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...

  5. (19)打鸡儿教你Vue.js

    了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...

  6. (18)打鸡儿教你Vue.js

    介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...

  7. (17)打鸡儿教你Vue.js

    vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...

  8. (15)打鸡儿教你Vue.js

    组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...

  9. (13)打鸡儿教你Vue.js

    一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...

  10. (12)打鸡儿教你Vue.js

    组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...

随机推荐

  1. Delphi XE10.1 引用计数(Delphi XE10.1 Berlin终于增加了对接口的Weak, UnSafe的支持)

    以往的Delphi版本,不支持接口的Weak,和UnSafe的引用,支持对象的Weak, UnSafe,而且仅在Android和Ios平台上支持. 现在Delphi XE10.1 Berlin终于增加 ...

  2. 怎样在python中写注释

    python中的注释是以井号: # 开头, 一般会在#后加一个空格. # This is a comment print("Hello, World!") 多行注释的语法是三引号: ...

  3. Spring Cloud Alibaba学习笔记(1) - 整合Spring Cloud Alibaba

    Spring Cloud Alibaba从孵化器版本毕业:https://github.com/alibaba/spring-cloud-alibaba,记录一下自己学习Spring Cloud Al ...

  4. DropDownList下拉控件

    <asp:DropDownList    ID="DropDownList1" runat="server" Width="177px" ...

  5. 写在NOIP2018前

    不知不觉距离NOIP2018还有两天,两个月的停课生活即将结束 此时心里总感觉装着许多话,想要将其倾诉却发现连哪怕一句也凝结不出 只觉得这两月像是场荒诞的冒险,好像我想做的什么都做了,又感觉我其实一事 ...

  6. 后端参数校验器v1.0(调用一个方法校验所有参数并得到校验结果,且包括错误原因)

    一:介绍 在写后端时,面对多个参数,比如手机号码.密码等我们常常需要写验证逻辑,当需要验证的参数较多的时候我们会需要写很多的判断语句,这就造成了大量的代码冗余.因此我开发了一套参数验证器,只需要调用参 ...

  7. PLSQL Developer新建表空间

    转自:https://www.cnblogs.com/juddhu/archive/2012/03/20/2408499.html 通过pl/sql登录到Oracle数据库上,然后执行菜单:文件/新建 ...

  8. Jerry带您了解Restful ABAP Programming模型系列之三:云端ABAP应用调试

    Jerry的Restful ABAP Programming模型介绍系列的前两篇文章: 30分钟用Restful ABAP Programming模型开发一个支持增删改查的Fiori应用 Jerry带 ...

  9. 我是怎么和SAP结缘的 - Jerry的SAP校园招聘之路

    2006年9月,结束了一年的北京中科院实习后,我回到了电子科技大学,此时已经是研三上学期了.有着"金九银十"之称的秋季校园招聘正式开始了. 准备好了简历后,Jerry也加入了浩浩荡 ...

  10. shell 大型脚本工具开发实战

    拆分脚本功能,抽象函数 1.function get_all_group 返回进程组列表字符串 2.function get_all_process 返回进程名列表字符串"nginx htt ...