VUE:渐进式JavaScript框架(小白自学)
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框架(小白自学)的更多相关文章
- Vue渐进式JavaScript 框架
1. Vue简介 1.1 初步了解Vue.js框架 Vue.js (读音 /vjuː/,类似于 view) 是一种轻量级前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面 ...
- 渐进式 JavaScript 框架--Vue
前 言 灵活 不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩. 高效 20kB min+gzip 运行大小超快虚拟 DOM 最省心的优化 1 计算属性 计算属性关键词: comp ...
- Web前端-Vue.js必备框架(三)
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择
转自<奇舞周刊>,好文章mark一下 分割线 一个有趣的事实是:IBM发表的2017年最值得学习的编程语言名单中,JavaScript榜上有名.这位IT巨头指出,JS在网站中惊人地达到94 ...
- Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择
2017-08-04 前端大全 (点击上方公众号,可快速关注) 英文:ANTONI ZOLCIAK 译文:众成翻译 www.zcfy.cc/article/vue-react-angularjs-a ...
- Vue vs React: Javascript 框架之战
https://baijiahao.baidu.com/s?id=1608210396818353443&wfr=spider&for=pc 原文档 正如我们之前提到的,Word ...
- vue是一个渐进式的框架,我是这么理解的
vue是一个渐进式的框架,我是这么理解的 原文地址 时间:2017-10-26 10:37来源:未知 作者:admin 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主 ...
- 神奇JavaScript框架---Top5
前言 个人观点,供您参考 观点源自作者的使用经验和日常研究 排名基于框架的受欢迎度, 语法结构, 易用性等特性 希望大家能够基于此视频找到最适合自己的框架 下面介绍的都是严格的前端框架和库 前言 To ...
- 2017最好的JavaScript框架、库和工具 — SitePoint
与开发者数量相比,可能有更多的JavaScript框架.库和工具.截止到2017年5月,在GitHub上快速搜索能搜到超过110万的JavaScript项目. 在npmjs上有50万的可用包,并且这些 ...
随机推荐
- PHP学习总结(2)——PHP入门篇之PHP代码标识
认识PHP代码标识 想在页面中编写PHP代码非常容易,如下面代码: <?php echo "想学习php吗?来慕课网吧";?> 就像你可以编写JavaScript脚本 ...
- C/C++知识要点5——智能指针原理及自己定义实现
智能指针概述: 智能指针用来管理动态对象.其行为类似于常规指针,重要的差别是:它负责自己主动释放所指向的对象. C++ 11标准库提供两种智能指针:shared_ptr.unique_ptr 差别是: ...
- 【分享】GEARS of DRAGOON 1+2【日文硬盘版】[带全CG存档&攻略+SSG改动+打开存档补丁]
冒险者们哟.寻找龙秘玉吧--! ninetail的最新作,是使用丰富多彩的技能·道具探索迷宫的3D迷宫RPG! 存在着骑士和神官的架空世界常见的职业为首的13种职业.超过数百种的道具的登场! 和伙伴一 ...
- Android适屏
总结一下自己的适屏经验,仅仅希望自己不断进步,不断完好,假设有热心肠的"前辈"指导一下,不胜感激! Android5.0已经出来了,说是这个版本号对Android屏幕适配做了非常多 ...
- 2015.05.05,外语,读书笔记-《Word Power Made Easy》 15 “如何谈论事情进展” SESSION 42
HOW TO TALK ABOUT WHAT GOES ON TEASER PREVIEW 一些以-ate结束的动词,通常表示: to exhaust([ig'zɔ:st] n. 排气,排气装置 v. ...
- php面向对象之get和set方法
php面向对象之get和set方法 简介 1.自己写get或者set 2.用系统的魔术方法__get和__set 代码 <?php class Person{ private $userName ...
- ES TransportClient demo
import java.net.InetAddress; import java.net.UnknownHostException; import org.elasticsearch.action.b ...
- POJ 3260 DP
只需要对John的付款数做一次多重背包,对shopkeeper的找零钱数做一次完全背包即可. 最重要的是上界的处理.可以注意到,John的付款数最多为maxv*maxv+m,也就是24400元.同理, ...
- 【转】如何使用windows的计划任务?计划任务?
我们经常有一些程序想要过了几小时来运行:比如定时关机 或者说希望能够每天的几点执行一个什么程序: 这些所有的操作都需要用到windows的任务计划:或者叫计划任务:反正都一样 下面小编将指导大家创建一 ...
- css实战笔记(一):写网页前的reset工作
reset.css是每个html必备的样式,其中有各种元素属性清零的代码. 为什么要有reset.css 让各个浏览器的CSS样式有一个统一的基准,比如清除各个浏览器为元素自带的margin.padd ...