你的位置:首页 > Java教程

[Java教程]vue开发体验


vue开发体验

记录下vue开发过程中的一些理解,如有不足,希望大家多多提意见。

v-bind属性绑定

vue里面的数据绑定,是一种常见的元素操作,如v-bind:src,v-bind:class,v-bind:style等等。

//html代码<div v-bind:></div>//js代码data: {  isA: true,  isB: false}渲染为<div ></div>

这是个官网的例子,再举一个常见的。我们一般对网页图片优化,需要考虑对图片懒加载(延迟加载)会写如下代码:

<img src="images/1.jpg"  />

1.jpg为需要加载的图片,grey.gif为加载前等待图片(图片高度只有1px),再引入js代码,进行控制修改,繁琐又不够灵活。而vue解决了这个问题。

<img v-bind:> 

ajax请求数据图片链接地址,写入data,监测到imgUrl变化,自动更新视图。后期可以根据具体的需求,做出相应的扩展。

组件开发

Vue是专门view数据渲染的MVVM框架,其中最核心的是组件开发。组件注册后便可以用在父实例的模块中,以自定义元素的形式使用要确保在初始化根实例之注册了组件。这是官网的描述,重点是先注册组件,再初始化根实例Vue,否则组件注册失败。

全局组件注册

//html代码<my-component></my-component>//js代码Vue.component('my-component', {  template: '<div>A custom component! <my-c1></my-c1></div>'})

局部组件注册

局部注册组件,只能使用在父组件模板内

//html代码<div id="Parent"></div>//js代码var Parent = Vue.extend({  template: '<div>I\'m Parent, My children: <my-c1></my-c1></div>',  components: {     //只能用在父组件模板     'my-c1':{        template: '<div>A custom component!</div>'      }   } })//组件实例化 new Parent({    el: '#Parent' })

在组件命名上出现大写,如<my-c1Name></my-c1Name>,组件是注册失败。

组件通讯

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。

props

“prop”是组件数据的一个字段,期望从父组件传下来

//html代码<child msg="hello!"></child>//js代码 Vue.component('child', {   // 声明 props   props: ['msg'],   // prop 可以用在模板内   // 可以用 `this.msg` 设置   template: '<span>{{ msg }}</span>' })//渲染为<span>hello!</span>

动态 Props

与v-bind属性绑定结合使用

//html代码<child :msg="hello!"></child>//js代码Vue.component('child', {   // 声明 props   props: ['msg'],   // prop 可以用在模板内   // 可以用 `this.msg` 设置   template: '<span>{{ msg.a }}</span>'  })new Vue({  el: '#app',  data:{    msgs: {      a: 1    }  }})

与v-mode结合v-bind结合一起使用

//html代码<input v-model="parentMsg"> <br><child :message="parentMsg"></child>//js代码Vue.component('child', { // 声明 props props: ['message'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '<span>{{ message }}</span>'})new Vue({  el: '#app',  data:{    parentMsg: 'Message from parent'  }})

参考文档

  • vue.js官网http://cn.vuejs.org/guide/