VUE:渐进式JavaScript框架

一、官网

英文  https://vuejs.org/

中文  https://cn.vuejs.org/

二:渐进式

即有一个核心库,在需要的时候再逐渐添加插件的一种概念

作用:动态构建界面(将后台的数据在前台动态显示出来)

三:与其他框架的关联

1)借鉴 angular 的 模板数据绑定 技术

2)借鉴 react 的 组件化虚拟DOM 技术

四:Vue扩展插件

1)vue-cli: vue脚手架(帮我们下载基于vue的、编写好配置的、设定好依赖的项目)

2)vue-resource(axios):ajax请求

3)vue-router:路由

4)vuex:状态管理

5)vue-lazyload:图片懒加载

6)vue-scroller:页面滑动相关

7)mint-ui:基于vue的UI组件库(移动端)

8)element-ui:基于vue的UI组件库(PC端)

五:简单实现双向数据绑定

新建项目,之后的学习都在此项目上延展,引入vue.js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.引入Vue.js
2.创建Vue对象
el:指定根element(选择器)
data:初始化数据(页面可以访问)
3.双向数据绑定:v-model
4.显示数据:{{xxx}}
5.理解vue的mvvm实现
--> <!-- view -->
<div id="app">
<input type="text" v-model="message"/>
<p>正在输入:{{message}}</p>
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
//创建vue实例,引入配置对象
const vm=new Vue({
el: '#app', //element:选择器
//数据(model)
data:{
messgae:'Hello Vue!'
}
})
</script>
</body>
</html>

六:引入开发者插件

前提:先参考 前端的标配:npm 先安装好npm和cnpm

https://github.com/vuejs/vue-devtools

解压,然后来到安装目录下

cnpm install

下载依赖

过程挺慢~不过似乎npm命令更慢~

然后执行

npm run build

编译源程序

修改shells \ chrome目录下的mainifest.json 中的persistant为true:

选择刚刚编译后的工程中的shells目录下,chrome的整个文件夹,确定

成功!

以后便可以使用这个扩展程序来调试Vue

七:model view viewModel模型

VUE:渐进式JavaScript框架(小白自学)的更多相关文章

  1. Vue渐进式JavaScript 框架

    1. Vue简介 1.1  初步了解Vue.js框架 Vue.js (读音 /vjuː/,类似于 view) 是一种轻量级前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面 ...

  2. 渐进式 JavaScript 框架--Vue

      前  言   灵活 不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩. 高效 20kB min+gzip 运行大小超快虚拟 DOM 最省心的优化 1 计算属性 计算属性关键词: comp ...

  3. Web前端-Vue.js必备框架(三)

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  4. Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择

    转自<奇舞周刊>,好文章mark一下 分割线 一个有趣的事实是:IBM发表的2017年最值得学习的编程语言名单中,JavaScript榜上有名.这位IT巨头指出,JS在网站中惊人地达到94 ...

  5. Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择

    2017-08-04 前端大全 (点击上方公众号,可快速关注) 英文:ANTONI ZOLCIAK  译文:众成翻译 www.zcfy.cc/article/vue-react-angularjs-a ...

  6. Vue vs React: Javascript 框架之战

    https://baijiahao.baidu.com/s?id=1608210396818353443&wfr=spider&for=pc    原文档 正如我们之前提到的,Word ...

  7. vue是一个渐进式的框架,我是这么理解的

    vue是一个渐进式的框架,我是这么理解的 原文地址 时间:2017-10-26 10:37来源:未知 作者:admin 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主 ...

  8. 神奇JavaScript框架---Top5

    前言 个人观点,供您参考 观点源自作者的使用经验和日常研究 排名基于框架的受欢迎度, 语法结构, 易用性等特性 希望大家能够基于此视频找到最适合自己的框架 下面介绍的都是严格的前端框架和库 前言 To ...

  9. 2017最好的JavaScript框架、库和工具 — SitePoint

    与开发者数量相比,可能有更多的JavaScript框架.库和工具.截止到2017年5月,在GitHub上快速搜索能搜到超过110万的JavaScript项目. 在npmjs上有50万的可用包,并且这些 ...

随机推荐

  1. CF894A QAQ

    CF894A QAQ 题意翻译 题目大意: 给定一个字符串,字符串长度<=100,现在要求出字符串中'QAQ'的个数,注意,'QAQ'可以不连续,只要有顺序就可以了,例如QABQ也有一个QAQ ...

  2. [MongoDB实战]Part1 起步

    本书的这部分对MongoDB进行了一个大致的简介.包括了Javascript Shell和Ruby驱动,这俩都有例子 在第一章,我们将了解到MongoDB的历史,设计目的和实际使用的场景.我们还将了解 ...

  3. ftk学习记(首篇)

    [ 声明:版权全部,欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 非常早之前就知道ftk了,当时主要是由于买了李先静的书,所以知道了这么一个项目.由于对这样的g ...

  4. 运行shell命令

    首先将shell命令命名为.sh文件 将上面的代码保存为test.sh.并 cd 到对应文件夹: chmod +x ./test.sh #使脚本具有运行权限 ./test.sh #运行脚本 假设报错/ ...

  5. oracle如何创建数据库

    第一步: 从Windows桌面执行“开始”→“Database Configuration Assistant”命令,打开Database Configuration Assistant对话框的欢迎界 ...

  6. 0x21 剪枝

    这一章真是心态崩,剪枝太玄学啦,特别是那个搜索顺序我靠真的... poj1011 枚举答案,搜索记录当前到第几根木棒. 剪枝:1.从大到小排序 2.排除等效,这个感觉还行,就是木棒按大小顺序进去,去除 ...

  7. Java并发包

    刚看到一篇总结的比较全的JUC包总结,转载如下: 1. java.util.concurrent - Java 并发工具包 Java 5 添加了一个新的包到 Java 平台,java.util.con ...

  8. DB-MySQL:MySQL 序列使用

    ylbtech-DB-MySQL:MySQL 序列使用 1.返回顶部 1. MySQL 序列使用 MySQL 序列是一组整数:1, 2, 3, ...,由于一张数据表只能有一个字段自增主键, 如果你想 ...

  9. C# Keywords - as

    记录一下在日常开发过程中遇到的一些C# 基础编程的知识! 希望以后能用的着.知识是在平常的开发过程中去学到的.只有用到了,你才能深入的理解它,并用好它. 本资料来源于:MSND 下面是一些相关的cod ...

  10. BZOJ 3323 splay维护序列

    就第三个操作比较新颖 转化成 在l前插一个点 把r和r+1合并 //By SiriusRen #include <cstdio> #include <cstring> #inc ...