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. 巴塞尔问题(Basel problem)的多种解法——怎么计算$\frac{1}{1^2}+\frac{1}{2^2}+\frac{1}{3^2}+\cdots$ ?

    (PS:本文会不断更新) $\newcommand\R{\operatorname{Res}}$ 如何计算$\zeta(2)=\frac{1}{1^2}+\frac{1}{2^2}+\frac{1}{ ...

  2. js 文档加载完成之后执行 备用

    //文档加载完成之后执行 (function(){ var _globeCallback; window.$$ = function(callback){ _globeCallback = callb ...

  3. C#中的LINQ 基础

    1.LINQ的数据源 必须可枚举的,即必须是数组或者集合 (继承了IEnumerable<T>接口就可以,注意是IEnumerable<T>,不是IEnumerable接口,不 ...

  4. SQL-Oracle存储过程-循环A表，向B表插入数据

    --存储过程,查询A表,向B表插入数据 create or replace procedure prc_sg_sjtj_config(p_flag out varchar2) IS BEGIN FOR ...

  5. opencv3.2+opencv_contrib+cmake

    转自原文 opencv3.2+opencv_contrib+cmake 心得体会 初学OpenCV发现opencv3.2(下载链接在附录)是没有xfeatures2d等模块的.第三方库opencv_c ...

  6. Mysql 下DELETE操作表别名问题

    在用DELETE删除mysql数据库数据时采取一下两种方式: 方式一:DELETE FROM B_PROSON WHERE ID = 1; 不使用别名 方式二:DELETE BP FROM B_PRO ...

  7. HDU 4352

    #include <iostream> #include <cstdio> #include <cmath> #include <string.h> # ...

  8. VMWare虚拟机下为Ubuntu 12.04.1网络设置（NAT方式）

    NAT方式: 虚拟机能够上外网,能够訪问宿主计算机所在网络的其它计算机(反之不行). 第一步:设置虚拟机vmware网络參数 (1)打开虚拟机,选择菜单"编辑">" ...

  9. 假设让我又一次设计一款Android App

    转载请注明出处: 本文来自aspook的博客:http://blog.csdn.net/ahence/article/details/47154419 开发工具的选择 开发工具我将选用Android  ...

  10. LeetCode——Valid Parentheses

    Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...