Vue(day3)

一.Vue中的ajax:vue-resource和axios vue-resource是Vue实现异步加载的官方库,即Vue中的ajax.在Vue2.js之后vue-resource将不再更新维护,所以推荐尽量使用第三方库axios实现异步加载. 下面将对两种库分别进行使用说明,参考: vue-resource axios 1.vue-resource的使用首先我们需要引入库文件: <script src="https://cdn.jsdelivr.net/npm/vue-resourc…

vue day3 bootstrap 联动下拉

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="…

Vue.js - Day3

定义Vue组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: 模块化: 是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的职能单一: 组件化: 是从UI界面的角度进行划分的:前端的组件化,方便UI组件的重用: 全局组件定义的三种方式使用 Vue.extend 配合 Vue.component 方法: var login = Vue.exte…

day3(Vue组件)

1.组件定义 1.定义组件并引用 2.父组件向子组件传值 3.子组件向父组件传值 # 组件间传值:vuex (https://www.cnblogs.com/xiaonq/p/9697921.html 1.1什么是组件 Html中有组件,是一段可以被复用的结构代码 Css中有组件,是一段可以被复用的样式 Js中有组件,是一段可以被复用的功能 Vue中也有组件,指的就是一个模块,是一个独立的,完整的(包含html,css,js等),可以直接拿来用 1.2组件特性组件的实例化对象,跟vue实例化…

vue学习笔记3

Vue.js - Day3 定义Vue组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: 模块化: 是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的职能单一: 组件化: 是从UI界面的角度进行划分的:前端的组件化,方便UI组件的重用: 全局组件定义的三种方式使用 Vue.extend 配合 Vue.component 方法: var lo…

vue（9）—— 组件化开发 - webpack（3）

前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热前期准备创建如下项目: app.js: footer.js: main.js: webpack.config.js: 同样的生成两个webpack配置文件,webpack.dev.config.js,webpack.prod.config.js,配置跟webpack.config.js一模一样 package.json: 组件化开发终于到了重头戏了 webpack引入vue 有几种方法导入 1.第一…

Vue入门到精通

Vue.js - Day1 课程介绍前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex) Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框架! Vue.js 是一套构建用户界面的…

Vue.js 和 MVVM 小细节

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定. Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel. ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量…

wepack+sass+vue 入门教程（三）

十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助webpack将符合条件的源文件转换为对应的目标格式文件.比如index.scss转换成index.css 安装成功后,package.json文件变化如下: 接着,安装extract-text-webpack-plugin,让webpack可以输出css格式的文件 npm install --save-…

wepack+sass+vue 入门教程（二）

六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.exports = { // 配置入口 entry: { }, // 编译后的文件路径 output: { path: '', // 文件路径 filename: '' // 文件名称 }, module: { // 编译规则 loaders: [] }, // 辅助的插件 plugins:[] }…

wepack+sass+vue 入门教程（一）

一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install -g webpack 如果公司网络是设置代理的,要设置下代理地址 npm config set proxy http://***/ 三.建立项目文件夹我在本机的E盘上,建了一个名称为demo的文件夹四.初始化package.json 1.cmd控制台进入E盘下的demo文件夹 2.输入 npm…

Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码.它会根据 lang 属性自动用适当的加载器去处理. CSS 例如,我们编译用 SASS 编译 <style> 标签: npm install sass-loader node-sass --save-dev <…

Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块. vue-loader 提供了一些非常酷炫的特性: ES2015默认可用: 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade. 把 <style> 和 &…

关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库

应用结构实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步的事务. 异步逻辑应该封装在action 中. 只要你遵循这些规则,怎么构建你的项目的结构就取决于你了.如果你的 store 文件非常大,仅仅拆分成 action.mutation 和 getter 多个文件即可. 对于稍微复杂点的应用,我们可能都需要用到模块.下面是一个简单的项目架构: ├── i…

Vue.js 2.0 和 React、Augular等其他框架的全方位对比

引言这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会更偏爱Vue,对于某些问题用Vue来解决会更好,如果没有这点信念,我们也就不会整天为此忙活了.但是,我们想尽可能地公平和准确地来讲述.其他的框架也有显著的优点,比如 Rect 的生态系统,或者 Knockout 对浏览器支持到 IE6 .我们把这些也都会全列出来. 我们希望得到你们的帮助,来使文档保…

窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

引言你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么在之前,React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了. 若想了解它是如何工作的,就要先认清这几个概念: 1.更新DOM是非常昂贵的操作当我们使用Javascript来修改我们的页面,浏览器已经做了一些工作,以找到DOM节点进行更改,例如: document.getElementById('myId').ap…

初探Vue

Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开发完一个关于管理下载文件的进度器后,其中大量数据变动,带来的原生DOM操作,让我想到了最近热门的Vue. 嘿,丫的既然是数据驱动,正好,我何不用你Vue来实现同样的功能,切身感受下你丫的过人之处呢. 于是乎,小生就在私底下用Vue又实现了遍同样的功能,感受就是,丫的还不错哦,数据驱动不赖嘛. 好了,…

做一个gulp+webpack+vue的单页应用开发架子

1.目标最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命令打包开发chunk,并支持热替换可以通过命令打包可发布的chunk 支持路由路由中的代码实现按需加载用CommonJs的风格组织代码代码结构尽量清晰易懂尽我所能先做出一个满足以上特点的架子吧,最近看完ES6,准备再去看看flux和reduce,看过之后再来思考下前端数据如何管理比较科学规…

vue.js学习笔记

有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从HelloWorld说起任何语言的都是从Hello World开始的,VueJs也不例外,直接上代码: <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="demo&q…

vue双向数据绑定原理探究(附demo)

昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门双向绑定的思想双向数据绑定的思想就是数据层与UI层的同步,数据再两者之间的任一者发生变化时都会同步更新到另一者. 双向绑定的一些方法目前,前端实现数据双向数据绑定的方法大致有以下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元…

vue入门学习（基础篇）

vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标签:v-cloak . 控制模块隐藏:v-if(值为false时不会渲染到dom上).v-show(相当于display属性的show和hide). 事件绑定:v-on.@语法,一般方法写在methods里面,需要操作dom的方法写在mounted里面,此时dom渲染完毕. 属性绑定:v-bind.…

从Vue.js窥探前端行业

近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大部分浏览器是基于webkit内核,所以ES5在移动端也是全面支持的,因此vue可以在移动端以及现代浏览器中大显身手. 2.前端交互越来越多,功能越来越复杂: 现在的前端可谓是包罗万象,比如高大上的技术库和框架.酷炫的运营活动页面.H5小游戏,当然前端技术的应用在更多具有商业价值的应用上,比如下图.…

vue.js初探

前言入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组合.以至于我都有些感觉out.各种vue+webpack.vue+react.vue+es6+npm等等.琳琅满目.真是三天不学习赶不上刘少奇. 开篇主要是初次了解下vue.js,包括v-model.v-if.v-else.v-show.v-for(2.0对$index和$key舍弃,2.0要用in…

vue.js几行实现的简单的todo list

序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了2天vuejs的官方文档实现了一个简单的todo list.感觉确实方便~!~ 预览戳这里 vuejs官方:http://cn.vuejs.org/ <!DOCTYPE html> <html lang="en"> <head> <meta cha…

Vue.js——60分钟组件快速入门（上篇）

组件简介组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!(所有示例都放在GitHub Pages上了,请访问https://github.com/keepfool/vue-tut…

【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场. backbone,angularjs 已成昨日黄花,reactjs 如日中天,同时另一更轻量的 vue 发展势头更猛,尤其是即将 release 的2.0版本,号称兼具了 angularjs 和 reactjs 的两者优点.不过现在的官方…

Vue.js——60分钟快速入门

Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM…

Vue.js——vue-router 60分钟快速入门

概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版.乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue…

Vue.js——60分钟webpack项目模板快速入门

概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify类似的功能,在前端资源管理这方面,它提供了更加出色的功能.官方基于webpack提供了两种项目模板,分别是vue-webpack-simple模板和vue-webpack模板,今天我们将介绍官方提供的这两种项目模板,并用vue-webpack-simple模板创建一个简单的示例. 本文的Demo和源…

Vue.js——60分钟browserify项目模板快速入门

概述在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直接写在页面中,这对于一些复杂的页面来说,不是好事情,代码的可读性会较差,也不便于管理. 其次,定义在HTML页面中的组件,无法被其他页面重用,我们只能通过复制粘贴的方式将组件代码拷贝到其他页面,这也违反了DRY原则.既然组件是Vue.js的重要概念,我们就应该利用好它. 为了解决这些问题,Vue.j…

【Vue(day3)】的更多相关文章