Vue_基础

ゞ浴缸里的玫瑰 2021-10-06 04:34 355阅读 0赞

### Vue\_基础 ###

*  概述
 *  示例
 *  相关语法
 *  动态样式
 *   *  class
     *  style

# 概述 #

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 ##

## style ##