Vue学习之路

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script type="text/javascript" src="js/vue.js"></script>
	<title>测试1</title>
</head>
<body>
	<h1>这是第一个vue项目</h1>
</body>
<script type="text/javascript">
	vue()
</script>
</html>

运行结果:

这是第一个vue项目

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="./js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		
		<div class="app">
			{{ message }} {{ name }}
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:".app",
				data:{
					message: "helloVue!!!!",
					name:"six酱"
				}
			});
		</script>
	</body>

</html>

运行结果:

helloVue!!!! six酱

2019/9/8

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/vue.js"></script>
	<body>
		<div class="app1">
			{{a}}---{{b}}
		</div>
	</body>
	<script type="text/javascript">
		var data = {a : 1, b : 2};
		var vm = new Vue({
			el:".app1",
			data: data
		})
		data.b = "here!!!"
		console.log(data.b);
	</script>
</html>
</body>
<script type="text/javascript">
    var data = {a : 1, b : 2};
    var vm = new Vue({
        el:".app",
        data: data
    })
    data.b = "here!!!"
    console.log(data.b);
</script>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app-2">
			<span v-bind:title="msg">
				鼠标悬停几秒钟查看此处动态绑定的提示信息
			</span>
		</div>
	</body>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app-2",
			data:{
				msg:"页面加载于" + new Date().toLocaleString()
			}
		})
		// app.$data.msg = "1修改后,页面加载于" + new Date().toLocaleString()
		
		app.msg = "2修改后,页面加载于" + new Date().toLocaleString()
		// console.log(app.$data.msg);
	</script>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			{{a}}
		</div>
		<div id="app2">
			
			{{99+100}}
			
			<p>{{foo}}</p>
			
			<button v-on:click="foo = 'fear'">点击它</button>
		</div>
	</body>
	<script type="text/javascript">
	
		var data = { a : 1 }
		
		
		var vm = new Vue({
			data:data
		})
		
		var obj = { foo: "bar" };
		
		// Object.freeze(obj);
		// obj.$watch("foo", function(){console.log("hello")});
		
		new Vue({
			el: "#app2",
			data: obj
		})
		function test(){
			alert("test!!!!");
		}
		// data对象的所有属性都假如到了vue的响应式系统中, 可以使用5`
		console.log(vm.a == data.a);
		
		// console.log(vm);
		// vm对象展开
		/* 
		 "$attrs": undefine
		 "$children": []
		 ​​
		 length: 0
		 ​​
		 <prototype>: Array []
		 ​
		 "$createElement": function $createElement()​
		
			.
			.
			.
			.
		 a : 1
		 */
		var vm2 = new Vue({
			el: "#app",
			data:{
				a: "I love Vue!!!"
			}
		})
		console.log(vm2);
		vm2.b = "cmn";
		
		
	</script> 
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box1">
			<button type="button" v-on:click="a += 1">点击加一</button>
			{{a}}
		</div>
	</body>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#box1",
			data:{
				a : 1
			},
			created:function(){
				console.log("a is "+this.a);
		}})
		var fn = (x, y) => x*x + y*y;
		console.log(fn(10,10));
		
		var name = "小王", age=16;
		var obj =  {
			name:"小张",
			objAge:this.age,
			myFun:function(){
				console.log(this.name+"年龄"+this.age);
			}
		}
		
		var db = {name: "six酱", age:17};
		obj.myFun.call(db);
	</script>
</html>