index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<h1>Vue2原理分析</h1>
		<h2>标题：{{title}}</h2>
		<button v-on:click="handleChangeTitle">点击我，2秒后改变标题</button>
		<form>
			<label>你的名字</label>
			<input v-model="formData.name" type="text"/>
			<span>{{formData.name}}</span>
			<label>价格:</label>
			<input v-model="formData.price" type="text"/>
			<label>数量:</label>
			<input v-model="formData.amount" type="text"/>
			<label>总计:</label>
			<span>{{total}}</span>
			
		</form>
	</div>
	<script src="./index.js"></script>
	<script>
		const vm = new Vue({
			el:'#app',
			data(){
				return {
					title:'hello,world',
					formData:{
						name:'战三',
						price:2,
						amount:10
					},
					list:[]
				}
			},
			watch:{
				title:function(newVal,oldVal){
					console.log(`title: ${oldVal} => ${newVal} `)
				}
			},
			computed:{
				total(){
					return this.formData.price * this.formData.amount
				}
			},
			methods:{
				handleChangeTitle(){
					setTimeout(()=>{
						debugger
						this.title = "hello,vue"
					},2000)
				}
			}
		})

		vm.list.push({name:'张三',status:1})
		setTimeout(()=>{
			vm.list[0].name = "李四"
		},3000)
		

	</script>
</body>
</html>


computed:{
	sum(){
		return this.price * this.total
	}
}