第02讲 Vue实例

[zptcsoft]

Vue应用架构

<!--1.导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--2.html里面声明式的方式使用数据 -->
<div id="app">
	<h1>{{message}}</h1>
</div>
<script type="text/javascript">
	//3. JS初始化一个Vue对象
	var app=new Vue({
		el:'#app',
		data:{
			message:'hello vue!'
		}
	})
</script>

Vue实例

• Vue.js应用创建非常简单,通过构造函数Vue创建一个Vue根实例，并启动应用。
• 几乎所有的数据均存放在一个对象内，作为参数传递给构造函数。

var app = new Vue({
	//选项
})

选项

el选项

• 必选项
• 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
• 可以是 CSS选择器，也可以是一个 HTMLElement 实例。
• 在实例挂载之后，元素可以用 vm.$el访问。

var app = new Vue({
	el:'#app'
	//el:document.getElementById('app')	
})

data选项

• Vue实例的数据对象。
• 对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。
• 实例创建之后，可以通过 vm.$data 访问原始数据对象。
• Vue实例也代理了 data对象上所有的属性，因此vm.a等价于vm.$data.a。

var app = new Vue({
	el:'#app',
	data:{
		name:'tom'
	}
})

methods选项

• Vue实例的方法集合对象。
• 可以通过Vue实例访问这些方法，或者在指令表达式中使用。

<div id="app">
	<h2>{{name}}</h2>
	<!--通过指令表达式访问方法-->
	<button @click="sayHello">按钮</button>
</div>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			name:'tom'
		},
		methods:{
			sayHello:function(){
				//方法中的this自动绑定为Vue实例
						console.log(this.name,this===app);
			}
		}
	});
	//通过Vue实例访问方法
	app.sayHello();
</script>

computed选项

• 计算属性
• 逻辑复杂的表达式应该用计算属性替代

案例练习

可计算的表格

代码解析

<div id="app">
	<table class="table table-bordered table-striped">
		<tr>
			<th>序号</th>
			<th>物品</th>
			<th>单价</th>
			<th>数量</th>
			<th>小计</th>
		</tr>
		<tr v-for="(good,index) in goods">
			<td>{{index+1}}</td>
			<td>{{good.name}}</td>
			<td>{{good.price}}</td>
			<td><input type="number" min="0" v-model="good.count" /></td>
			<td>{{getSum(index)}}</td>
		</tr>
		<tr>
			<td colspan="4">总计</td>
			<td>{{getTotalSum}}</td>
		</tr>
	</table>
</div>

代码解析

var app = new Vue({
	el: '#app',
	data: {
		goods: [{
			name: '苹果',
			price: 55,
			count: 2
		},{
			name: '香蕉',
			price: 65,
			count: 3
		}],
	},
	methods:{
		getSum:function(i){
			return this.goods[i].price*this.goods[i].count;
		}
	},
	computed: {
		getTotalSum: function() {
			var sum=0;
			for(var i=0;i<this.goods.length;i++){
				sum+=this.goods[i].price*this.goods[i].count;
			}
			return sum;
		}
	}
})

重点点化

1. Vue.js 极简程序写法。
2. Vue.js 常用选项用法el、data、methods、computed等。
3. v-for指令的用法，v-model指令的用法。