VUE 基础语法：属性、指令、数据绑定

vue基本语法

el绑定元素id；
data数据，可以在绑定元素内使用；
{{ data中的key }}Mustache语法，通过此方式绑定数据；

<div id="test-1">
  <p>{{ message }}</p>		//通过Mustache语法取值
</div>

<script>
var test1=new Vue({
	el:"#test-1",
	data:{
		message:'测试文本'
	}
})
</script>

vue通过绑定页面元素和vue对象的模式，实现数据绑定；
当数据变动时，会自动体现在页面，反之亦然。

vue对象的属性

除了上面提到的el和 data外，还有以下几个属性：

methods 方法，使用 方法名() 的方式调用；
computed 计算，使用 方法名 的方式调用；
watch 监听，监听数据中的某一个，格式为方法名(val)，其中val为更新后的值；

var test=new Vue({
			el:"#test",
			data:{
				message:'测试文本',
				number:16
			},
			methods:{
				total:function(){
						//方法
				}			
			}, 
			computed:{
				getNum:function(){
						//方法
				}	
			}
			watch:{
				message:function(val){	//监听message这个属性，在变动时调用此方法
						//方法
				}	
			}
		})

指令 V-标签属性

这些指令都是html标签的属性，和普通的html标签一样写在标签体内。

v-bind:绑定html属性，格式为v-bind:html属性=‘data中的key’,
v-bind:可以简写为：

    <p v-bind:value="message"></p>	

v-show:此元素是否展示，若为false则隐藏，可以使用data中的值；

    <p v-show="isTrue"></p>		
    <p v-show=false></p>	

v-model在 input、select、textarea、checkbox、radio上创建双向数据绑定，自动更新绑定的元素的值,绑定的属性须在data中；

    <input v-model="message"></input >		

	data:{
		message:'测试文本',
	},

v-on:添加监听事件，格式为v-on:监听=‘方法名’，方法须在methods中；
v-on:可以简写为 @

    <p v-on:click="change"></p>		

	methods:{
		change:function(){
			//方法
		}			
	}, 

v-if条件判断,支持JavaScript表达式；

<div id="app">
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B' && Math.random() > 0.5">B</div>
    <div v-else-if="type === 'C' || type === 'D'">C or D</div>
    <div v-else>Not A/B/C</div>
</div> 

v-for循环,语法 对象名 in 数组名

	<ol>
		<li v-for="tit in title">{{tit}}</li>
	</ol>

	data:{	//对应的数据
		title:['可乐','咖啡','红牛']
	},

也可以使用数组对象的属性

	<ol>
		<li v-for="tit in title">{{tit.name}}</li>
	</ol>

	data:{	//对应的数据
		title: [
      { name: '可乐' },
      { name: '咖啡' },
      { name: '红牛' }
    ]
	},

实例属性

以$开头，用来和用户定义的属性区分；

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

---

购物车小案例

html代码

	<div id="test">
		<table>
			<thead>
				<tr>
					<th v-for="tit in title">{{tit}}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="good in goods">
					<td>{{good.id}}</td><td>{{good.name}}</td><td>{{good.price}}</td><td>{{good.count}}</td>
					<td><button @click="good.count--" :disabled="good.count<1">-</button></td>
					<td><button @click="good.count+=1">+</button></td>
				</tr>
			</tbody>
		</table>
				<p>总价：{{total()}}</p>
	</div>

js代码

		var title=['序号','序号','价格','数量','操作'];
		var list=[
		{
			id:1,
			name:'可乐',
			price:3.0,
			count:0
		},
		{
			id:2,
			name:'啤酒',
			price:4.5,
			count:0
		},
		{
			id:3,
			name:'红牛',
			price:8.0,
			count:0
		},
		]
		
		var test=new Vue({
			el:"#test",
			data:{
				goods:list,
				title:title
			},
			methods:{
					total:function(){
					var totalPrice=0;
					for(i=0;i<list.length;i++){
//						totalPrice+=list[i].price*list[i].count;
						totalPrice+=this.goods[i].price*this.goods[i].count;
					}
					return totalPrice;
				}			
			}, 
			computed:{

			}
		})

其他

这两种方法效果相同；
因为无论是操作原数组对象，还是操作data属性，另一个的值也会同时改变；

//		totalPrice+=list[i].price*list[i].count;
		totalPrice+=this.goods[i].price*this.goods[i].count;

methods和computed
methods需要加上小括号

	<p>总价：{{total()}}</p>

computed不能加小括号

	<p>总价：{{total}}</p>

在定义上methods就是方法，而computed是计算（得出的值）；
methods每次调用执行一次；
computed在开始时执行一次，只要得出这个值的依赖没有改变，则后续调用返回第一次计算的值；