前端开发的现状随着互联网设备的带宽和硬件的发展,web的应用的交互越来越重。 想开发的复杂交互的网站怎么办? 这个是我找到的一张图,是一些最近几年出现的前端框架。左上角的有Angular、Ember、BackBone、Knockout,还有今天即将安利的Vue;这里其他位置我认识的还有Meteor,感觉它是非常未来的框架,实时的特性非常excited,还有右上的Polymer、React。 怎么选择前端框架
作为一个选择恐惧症,面临这么多选择的时候是很苦恼的 其实作为一个安静的前端,只是需要一个不需要太多时间成本来学习,快速的上手开发业务,并使得项目的开发和用户体验有可见的提升(用户给好评,老板很满意,升值加薪,走上人生巅峰!)。 那么我们就进入正题安利 Vue.js Vue.jsReactive Components for Modern Web Interfaces 尤小右 Evan You Vue.js 主要是干啥的?它是一个 MVVM 前端框架 数据驱动?演示这个例子: http:///awee/pen/grjGbB Vue.js 怎么实现的?
Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时,我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲,它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定,DOM 将与数据保持同步。每当修改了数据,DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了,不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。 为什么要用Vue.js
那些公司在用Vue.jsGoogle,Facebook,Airbnb, 前端组件化?
使用Vue单文件组件
使用 Props 传递数据template> div> child :msg='parentMsg'>child> div>template>script>import child from './child'export default { data () { return { parentMsg: 'some words' } }, components: { child }}script> template> div> {{msg}} div>template>script> export default { props: { msg: String } }script> 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 props: ['msg', 'otherMsg']props: { msg: String, otherMsg: { type: String, default () { return 'it's default str' } }} 使用 $emit 传递事件template> div> child @child-ready='handler'>child> div>template>script>import child from './child'export default { components: { child }, methods: { handler (msg) { console.log(msg) } }}script> template> div> it's child.vue div>template>script> export default { ready () { this.sayReady() }, methods: { sayReady () { this.$emit('child-ready', 'Hello!') } } }script> 我们先来看看这两段代码,这个两个是一个简单的父子组件的事件通信例子… Vue 在它的组件系统中实现了一个用于组件树中通信的自定义事件的接口,任何一Vue实例都是一个事件节点,我们可以使用$emit在它上面触发事件,和DOM事件类似,Vue的事件是冒泡向上传递,不过不同的是,会在第一次触发回调之后就停止冒泡,当然你也可以在回调中 使用 Slot 分发内容template> div> child> p>This is some original contentp> child> div>template>script>import child from './child'export default { components: { child }}script> template> div> h1>This is my component!h1> slot> 如果没有分发内容则显示我。 slot> div>template> div> div> h1>This is my component!h1> p>This is some original contentp> div>div> slot 是Vue.js 的内容分发 API,参照了当前 Web 组件规范草稿,使用特殊的 编译作用域 child> p>{{ msg }}p>child> 这里的 具名 Slot div> slot name='one'>slot> slot>slot> slot name='two'>slot>div> 父组件模板: multi-insertion> p slot='one'>Onep> p slot='two'>Twop> p>Default Ap>multi-insertion> 渲染结果 div> p slot='one'>Onep> p>Default Ap> p slot='two'>Twop>div> 单个 Slot应该很好理解,那我们来看看vue是如何处理多个slot插入的。我们可以看到在子组件的 slot 中多了 一个name的属性,与它相对应的就是 父子间中DOM 的 slot属性,Vue 通过匹配他们就能准确的把内容分发到指定位置,对于父组件中没有指定name DOM,它就会被放置在子组件中匿名 slot 的位置。 注意事项避免片段实例(Fragment Instance)不这么写模板: div>root node 1div>div>root node 2div> 推荐这么写: div> I have a single root node! div>node 1div> div>node 2div>div> 因为在使用 template 选项时,模板的内容将替换实例的挂载元素。因而推荐模板的顶级元素始终是单个元素。 下面几种情况会让实例变成一个片断实例:
example v-show='ok' transition='fade'>example>example :prop='someData'>example>example v-if='ok'>example> 那么为什么说要避免片段实例呢?
避免使用prop 的.sync 父子组件间双向绑定goodbye.oncegoodbye.sync 在即将发布的 Vuejs 2.0中 .once, .sync 修饰符已经确认被废弃 总结以上讲了一些基础的Vue组件的功能,使用Vue开发SPA还的有重要的路由Vue-router和Flux的Vue实现Vuex,在实际开发中还需要了解Vue的指令、过滤器、生命周期等,结合Vue的文档也能很好理解,也推荐在github 通过 vue-awesome看一写优秀的第三方组件和插件的代码,相信能增长不少Vue开发的经验。 |
|