提醒:vue.js 现在正在飞速发展中,很多资源随时都有可能过时,记得查看最新文档,使用最新资源。☺☺☺
vue.js是一个构建数据的驱动的web界面的库。vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合是视图组件。vue.js不是一个全能框架,它只聚焦与视图层,容易与项目整合。另一方面,在于相关工具库一个使用时,vue也能完美的驱动复杂的单页应用。
Vue 的组件化实践
组件是vue.js中最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码。组件是自定义元素 ,vue.js的编译器为它添加特殊功能。
组件之间的通信
父组件可以通过Prop来给子组件传递数据
prop是父组件用来传递数据的一个自定义属性。子组件需要显示的用props选项声明prop:
我们可以通过v-bind动态的绑定props的值到父组件的数据中,每次当绑定的数据在父组件中发生改变的时候,该组件也会相应的传递给子组件。
如果要给prop传递一个字面的时候必须要使用v-bind这样传递下去的才是正真的字面量,否则都会当做字符串。
prop是单向绑定的:当父组件的属性变化时,将传递给子组件,但是在子组件中改变数据的时候并不会传递给父组件,为了防止子组件无意间修改父组件的状态,所以不应该在子组件 中改变prop的数据。
子组件与父组件的通信
父组件使用props可以传递数据给子组件,但是如果子组件要把数据传递给父组件那么我们就要通过自定义事件的方法将数据传递给父组件。
vue-router
vue-router- 单页面应用路由
使用 Vue.js 和 vue-router 创建单页应用非常的简单,使用 Vue.js 开发,整个应用已经被拆分成了独立的组件。在使用 vue-router 时,我们需要做的就是把路由映射到各个组件,vue-router 会把各个组件渲染到正确的地方。
v-if VS v-show
v-if 是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下, v-show
简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
v-if 有更高的切换消耗
v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show较好,如果在运行时条件不大可能改变则使用 v-if 较好。
(完)