vue概念及基础学习

前面啰嗦了一堆儿,补了点知识。

再来学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

看完上面内容,对于初学者来说已经很辛苦了。

休息一会儿,然后找个简单的例子开搞吧。


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值