vue概念及基础学习
2016-12-15 16:47
288 查看
前面啰嗦了一堆儿,补了点知识。
再来学Vue和webpack。
webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
http://www.w2bc.com/Article/50764
http://webpack.github.io/docs/tutorials/getting-started/
对初学者来说,真的有些乱,读完这些,概念差不多了,实际应用的时候再做进一步学习吧。
接下来可以进行vuejs的学习了。
http://cn.vuejs.org/v2/guide/
Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue
采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js
的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
作者本人的介紹,不得不说,比官网写的易懂多了,
http://www.csdn.net/article/1970-01-01/2825439
总结:
1、简化并且优化性能的MVVM框架(相对于angular,去掉了controller,service。factory,scope,module等概念,都是viewModel)
2、组件化概念
注册之后即可在父组件模板中以自定义元素的形式调用一个子组件:
Vue.js的组件可以理解为预先定义好了行为的ViewModel类。一个组件可以预定义很多选项,但最核心的是以下几个:
模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。
接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定(由上至下),但也可以显式地声明为双向绑定。
方法(methods):对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,比如created,attached,destroyed等等。在这些钩子函数中,我们可以封装一些自定义的逻辑。和传统的MVC相比,可以理解为 Controller的逻辑被分散到了这些钩子函数中。
私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突,一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
Vue.js的核心库只提供基本的API,本身在如何组织应用的文件结构上并不做太多约束。但在构建大型应用时,推荐使用Webpack+vue-loader这个组合以使针对组件的开发更高效。
【参考链接】
Vue.js官方网站:http://vuejs.org
Vue.js GitHub仓库:https://github.com/yyx990803/vue
Webpack官方网站: http://webpack.github.io
vue-loader单页组件示例:https://github.com/vuejs/vue-loader-example
看完上面内容,对于初学者来说已经很辛苦了。
休息一会儿,然后找个简单的例子开搞吧。
再来学Vue和webpack。
webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
http://www.w2bc.com/Article/50764
http://webpack.github.io/docs/tutorials/getting-started/
对初学者来说,真的有些乱,读完这些,概念差不多了,实际应用的时候再做进一步学习吧。
接下来可以进行vuejs的学习了。
http://cn.vuejs.org/v2/guide/
Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue
采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js
的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
作者本人的介紹,不得不说,比官网写的易懂多了,
http://www.csdn.net/article/1970-01-01/2825439
总结:
1、简化并且优化性能的MVVM框架(相对于angular,去掉了controller,service。factory,scope,module等概念,都是viewModel)
<!-- 模板 --> <div id="app"> {{msg}} </div>
// 原生对象即数据 var data = { msg: 'hello!' } // 创建一个 ViewModel 实例 var vm = new Vue({ // 选择目标元素 el: '#app', // 提供初始数据 data: data })
2、组件化概念
Vue.component('my-component', { // 模板 template: '<div>{{msg}} {{privateMsg}}</div>', // 接受参数 props: { msg: String<br> }, // 私有数据,需要在函数中返回以避免多个实例共享一个对象 data: function () { return { privateMsg: 'component!' } } })
注册之后即可在父组件模板中以自定义元素的形式调用一个子组件:
<my-component msg="hello"></my-component>
Vue.js的组件可以理解为预先定义好了行为的ViewModel类。一个组件可以预定义很多选项,但最核心的是以下几个:
模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。
接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定(由上至下),但也可以显式地声明为双向绑定。
方法(methods):对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,比如created,attached,destroyed等等。在这些钩子函数中,我们可以封装一些自定义的逻辑。和传统的MVC相比,可以理解为 Controller的逻辑被分散到了这些钩子函数中。
私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突,一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
基于构建工具的单文件组件格式
Vue.js的核心库只提供基本的API,本身在如何组织应用的文件结构上并不做太多约束。但在构建大型应用时,推荐使用Webpack+vue-loader这个组合以使针对组件的开发更高效。【参考链接】
Vue.js官方网站:http://vuejs.org
Vue.js GitHub仓库:https://github.com/yyx990803/vue
Webpack官方网站: http://webpack.github.io
vue-loader单页组件示例:https://github.com/vuejs/vue-loader-example
看完上面内容,对于初学者来说已经很辛苦了。
休息一会儿,然后找个简单的例子开搞吧。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 只需四个步骤几行代码,即可快速实现直播弹幕功能
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- JavaScript 基础、进阶以及 Ubuntu 系统中的 JavaScript 开发调试工具
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 设计模式---状态模式在web前端中的应用
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法