Vue的基本用法

使用Vue的前骤

  1. 安装vue.js(现在已更新到2.0以上版本了)
  2. 对应的jsp页面导入vue.js
  3. 初始化Vue实例

Vue的基本结构

  1. el: '#list' 代表vue作用的范围,只要在标签的id为list(对应一样就行,名字可变),这个范围里都可以使用
  2. data: { item: item} 这是代表vue里面的数据,可以是对象,也可以简单的变量,里面可以有多个数据,在可用范围内可以调用,调用方式两种:{{item}} 或 "item"
    注:后者一般是使用在标签里,如 :value = "item"或 v-bind:value="item",不能直接写成value="item"是没有效果的
  3. methods: { initItem: function() { } } 这是用来定义方法的,在页面调用这里面的方法,可以实现数据的实时更新,methods里面可以有多个方法,以逗号隔开
  4. filters: {formatDate: function() { } } 这是也用来定义方法的,不过这和methods里面的方法用法不一样,同时叫法也不一样,这里为拦截器,不是直接调用的,而是{{item | formatDate}} 或 "item | formatDate"意思是将item这个数据做一定的处理
  5. computed: {uodateItem : function(){ } }这里其实也是定义方法的,用法也和methods一样,唯一不一样的地方是这种用法是有缓存的

Vue常用的方法(不需要单独定义的)

  1. 当想要给对象添加字段时,可以使用set, 如:buildApp = new Vue({....}); buildApp.set(item, price, 24);可以用this.set()或者this.$set(),不过必须保证this的作用域和buildApp是一样的, 第一个参数代表操作的对象,第二参数代表添加的字段,第三个参数代表添加的字段对应的值
  2. 在jsp中绑定时间时,可以使用 :事件 or @事件,如: :click,@click
  3. v-bind是一半的绑定,可以直接使用vue里面的方法和数据,如,v-bind:class=""
  4. v-for 是遍历,v-for="(item, idex) in items" 意思是遍历items
  5. v-if="这里是条件表达式",v-else,v-else-if=""
  6. v-model ,可以实现数据的双向绑定, 如<input v-model:value="item"/>当输入框中的值改变时,item的值也相应的放生变化,注:v-model只在表单中有作用(要输入值的标签)

js中当定义了数组变量var arry = [];时,可以用arry.push(数据)将数据添加到arry中,在cllAjax中直接调用callback()方法可以实现内部的数据真正的被外面使用

posted on 2018-01-12 14:14  觉绝  阅读(436)  评论(0编辑  收藏  举报

导航