Vue_基础

概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

示例

//创建Vue实例
var vm = new Vue({
	//页面作用范围
	el: "#app",
	//页面渲染数据
	data: {
		totalMoney: 0,
		productList: [],
		delFlag: false,
		addressList: [],
		limitNum: 3,
		currentIndex: 0,
		classOne: md,
		classTwo: centor,
		items: []
	},
	//实时计算，data中的值进行处理，供页面使用
	computed: {
		initAddressList: function() {
			return this.addressList.slice(0, this.limitNum); //默认显示三条数据：v-for="item in initAddressList"
		}
	},
	//页面特殊数据的过滤 可带参数
	filters: {
		formatMoney: function(value, arg) {
			return "￥ " + value + arg;
		}
	},
	//页面加载完执行
	mounted: function() {
		this.cartView();
	},
	//监听data中指定对象的数据变化，发送变化出发该操作
	watch: {
		items: {
			handler: function(items, oldItems) {
				window.localStore.setItem("localData", items);
			},
			deep: true
		}
	},
	//页面设计的函数
	methods: {
		//调用后台API获取数据
		cartView: function() {
			var _this = this;
			this.$http.get("url", {
				"id": 123
			}).then(function(res) {
				_this.totalMoney = res.body.result.totalMoney;
				_this.productList = res.body.result.list;
			});
		},
		//动态改变页面金额
		changeMoney: function(product, type) {
			if (type < 0) {
				product.productNum++;
			} else {
				product.productNum++;
				if (product.productNum < 1) {
					product.productNum = 1;
				}
			}
		},
		//选择商品
		selectedProduct: function(item) {
			if (typeof item.checked == 'undefined') {
				//Vue.set(item,"checked",true);    //全局赋值
				this.$set(item, "checked", true); //局部赋值，给item对象动态添加一个key/value   
			} else {
				item.checked = !item.checked;
			}
		}，
		//商品列表全选
		checkAll: function() {
			//遍历productList并给checked赋值
		},
	}
})
//全局过滤器    提取到common.js中  供引用页面调用
Vue.filter("money", function(value, arg) {
	return "￥ " + value + arg;
})

相关语法

v-for遍历       v-if页面指定标签是否显示   v-show       v-text赋文本值       v-html赋值       v-bind页面标签属性赋值      v-on页面绑定事件     v-model页面实时数据双向绑定

v-on:click="" == @click=""   //请内可以是表达式也可以是方法   @click="delFlag=true"
v-bind:class="" == :class=""   //:class="{"check":false}"判断赋值   :class"[classOne,classTwo]"直接赋值
v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

<li v-for="(item,index) in productList" v-bind:class="{'check':index==currentIndex}" @click="currentIdex=index"></li>
<div v-text="item.money | formatMoney('元')"></div>
<div v-html="item.html"></div>
<img v-bind:src="item.image"></img>     //页面设计图片渲染需要使用v-bind来绑定src属性并赋值
<a href="javascript:;" v-on:click="function(item,-1)">+</a>
<a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}" v-on:click="selectedProduct(item)"></a>   //v-bind:class  会在之前class中添加 而不是覆盖
<div class="md-overlay" v-if="delFlag"></div>   //vue实例data中delFlag变量的值来决定该div是否显示

动态样式

class

<view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view
<view class="static" :class="[activeClass, errorClass]">333</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>

style

<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>