[Java教程]vue开发体验
0
2016-03-21 18:00:11
vue开发体验
记录下vue开发过程中的一些理解,如有不足,希望大家多多提意见。
v-bind属性绑定
vue里面的数据绑定,是一种常见的元素操作,如v-bind:src,v-bind:class,v-bind:style等等。//html代码
这是个官网的例子,再举一个常见的。我们一般对网页图片优化,需要考虑对图片懒加载(延迟加载)会写如下代码:
1.jpg为需要加载的图片,grey.gif为加载前等待图片(图片高度只有1px),再引入js代码,进行控制修改,繁琐又不够灵活。而vue解决了这个问题。
ajax请求数据图片链接地址,写入data,监测到imgUrl变化,自动更新视图。后期可以根据具体的需求,做出相应的扩展。
组件开发
Vue是专门view数据渲染的MVVM框架,其中最核心的是组件开发。组件注册后便可以用在父实例的模块中,以自定义元素的形式使用要确保在初始化根实例之前注册了组件。这是官网的描述,重点是先注册组件,再初始化根实例Vue,否则组件注册失败。
全局组件注册//html代码//js代码Vue.component('my-component', { template: '
局部组件注册
局部注册组件,只能使用在父组件模板内//html代码
在组件命名上出现大写,如,组件是注册失败。
组件通讯
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。
props
“prop”是组件数据的一个字段,期望从父组件传下来//html代码//js代码 Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '{{ msg }}' })//渲染为hello!
动态 Props
与v-bind属性绑定结合使用//html代码//js代码Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '{{ msg.a }}' })new Vue({ el: '#app', data:{ msgs: { a: 1 } }})
与v-mode结合v-bind结合一起使用//html代码//js代码Vue.component('child', { // 声明 props props: ['message'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '{{ message }}'})new Vue({ el: '#app', data:{ parentMsg: 'Message from parent' }})
参考文档vue.js官网http://cn.vuejs.org/guide/
本文网址:http://www.shaoqun.com/a/203148.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
VUE
0