VUE案列 watch 监测值的变化模板语法插值模板语法指令(遍历) 单向数据绑定双向绑定子组件入门父组件向子

案列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script src="js/vue.js"></script>
		<div id="app">
			{{message}}
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el : "#app",
				data:{
					message:"hello vue!"  //这里没有;号
				}
			});
		</script>
	</body>
</html>

watch 监测值的变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script src="js/vue.js"></script>
		<div id="app">
			{{name}}
		</div>
		<script type="text/javascript">
			//创建user对象
			var user = {"name":"zs"};
		
			//创建vue对象
			var vue = new Vue({
				el : "#app",
				data:user
			})
			//检测值的变化  只记录第一次和最后一次的值
			vue.$watch("name",function(newValue,oldValue){
				console.log(newValue,oldValue);
			})
			vue.name="lisi";
			vue.name="ww";
			
		</script>
	</body>
</html>

模板语法插值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style type="text/css">
			.active{
				font-size: 50px;
				color: blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
			<h2>不解析html</h2>
			<p v-text="rawHtml"></p>
			<h2>解析HTML</h2>
			<p v-html="rawHtml"></p>
			<h2>绑定样式</h2>
			<p :class="mycolor">test</p>
			<h2>进行算术运算</h2>
			{{num+100}}
			<h2>进行三元运算</h2>
			{{ok==1?"yes":"no"}}
			<h2>进行函数调用</h2>		
			{{msg.split('').reverse().join('')}}
		</div>	
		
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					rawHtml:"today";
				}
			})
			var vue = new Vue({
				el:"#app",
				data:{
					rawHtml:"今天<b>星期五</b>",
					mycolor:"active",
					num:100,
					ok:2,
					msg:"vue"
				}
			});
		</script>
		
	</body>
</html>

模板语法指令(遍历)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
			<p >现在可以看到我吗？v-if</p>
			<!-- v- if 是完成创建对象和删除对象的方式，进行显示和隐藏 -->
			<!-- v-show 是设置对象的显示与否的样式，来进行显示与隐藏 -->
			<p >现在可以看到我吗？v-show</p>
			<p ></p>
			<p ></p>
			<h2>v-for数组</h2>
			<ul>
				<li v-for="(item,i) in menu">
					{{item.name}} ------ {{item.age}}
				</li>
			</ul>
			
			<h2>v-for对象</h2>
			<ul>
				<li v-for="(key,value) in student">
					{{key}}----{{value}}
				</li>
			</ul>
			
		</div>
	</body>
	<script type="text/javascript">
		var vue = new Vue({
			el :"#app",
			data:{
				menu:[
					{"name":"zs","age":14},
					{"name":"ls","age":17},
					{"name":"ws","age":15}
				],
				student:{"name":"taylor","sex":"woman"}
			}
		
		})
		
	</script>
</html>

单向数据绑定


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style type="text/css">
			.active{
				color: blue;
			}		
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <p  v-bind:class="mycolor">我是显示颜色的</p> -->
			<p  v-bind:class="{active:flag}">我是显示颜色的</p>
			<button v-on:click="change" >改变颜色</button>
		    <button v-on:click="flag = !flag">改变颜色</button>
		</div>
		<script>
			var vue = new Vue({
				el:"#app",
				data:{
					mycolor : "active",
					flag : false
				},
				methods:{
					change(){
						this.flag = !this.flag;
					}
				}
			})
		</script>
	</body>	

</html>

双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	
	<body>
		<div id="app">
			<!-- 只有表单元素(有value的属性)才有双向绑定 -->
			
			
			
			<!-- 解析双向绑定 
			  v-bind可缩写为:
			  v-on  可缩写为@
			-->
			<h2>双向绑定解析</h2>
			{{message}} <br>
			文本框1:<input type="text" v-bind:value="message" />
			文本框2:<input type="text" v-model="message" />
		</div>
		
	</body>
	<script>
		var vue = new Vue({
			el : "#app",
			data:{
				message :"数据域"
			}
		})
	</script>
</html>

子组件入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		
	</head>
	<body>
		<div id="app"></div>	
	</body>
	<script>
		//创建子组件
		var App ={
			template :"<div>子组件入口</div>"
		};
		//父组件
		var vue = new Vue({
			el : "#app",
			//使用子组件
			template:"<App/>",
			//挂载子组件
			components:{
				App
			}
		})
	</script>

</html>

父组件向子组件传值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			*{
				padding: 0;
				margin: 0;
				}
			.main{
				width: 100%;
			}	
			.head{
				width: 100%;
				height: 80px;
				background-color: yellow;
			}
			.xia{
				width: 100%;
				height: 1000px;
			}
			.xia .aside{
				float: left;
				width: 30%;
				height: 100%;
				background-color: skyblue;
			}
			.xia .content{
				float: left;
				width: 70%;
				height: 100%;
				background-color: greenyellow;
			}
			
		</style>
	</head>
	<body>
		<div id="app"></div>
		
		<script type="text/javascript">
			//全局组件,第一个参数是组件名称，第二个参数是内容
			Vue.component('Vbtn',{
				template:"<button>按钮</button>"
			})
			
			//父子组件传值
			//1.在父组件中先绑定自定义的属性posts  ：:自定义的属性名=posts
			//2.子组件要声明props:[自定义的属性名]来接收
			//3.收到了就是自己的，可以随便使用
			
			//声明局部头部组件
			var Vheader = {
				template:`
				<div class="head">我是头部组件
					<button @click="changeFontSize">字体变大</button?
				</div>`,
				methods:{
					changeFontSize(){
						//触发父组件的自定义事件 $emit()
						//第一个参数是触发自定义事件的名称
						//第二个参数就是传进去的值
						this.$emit('change')
					}
				}
			};
			
			//声明局部侧边栏组件
			var Vaside = {
				template:'<div class="aside">我是侧边栏组件<Vbtn/></div>'
			};
			
			//声明局部内容栏组件
			var Vcontent = {
				template:`
				<div class="content">我是内容组件
					<ul>
						<li v-for='item in posts'>
							<h3>{{item.title}}</h3>
							<h4>{{item.content}}</h4>
						</li>
					</ul>
				
				</div>`
			,
			props:['posts']
			};
			//声明局部组件  声子，挂子，用子
			var App = {
				template:`
				<div class="main" :style='{fontSize:postFontSize+"em"}'>
					<Vheader @change='changeHandler'/>
					<div class="xia">
						<Vaside/>
						<Vcontent :posts="posts"/>
					</div>
				</div>`,
				methods:{
					changeHandler(){
						this.postFontSize+=.1;
					}
				},
				// 组件中如果有data,必须返回函数
				data(){
					return {
						posts:[
							{id:1,title:"我的第一篇博客",content:"好日子不是等来的"},
							{id:2,title:"我的第二篇博客",content:"读书有什么用"},
							{id:3,title:"我的第三篇博客",content:"努力会有回报"}
						],
						postFontSize:1
					}
				},
				components:{
					Vheader,Vaside,Vcontent
				}
			};
			
			
			new Vue({
				el:"#app",
				//使用组件
				template:"<App></App>",
				data(){
					return {						
					}
				},
				//挂载组件
				components:{
					App
				}
			});
		</script>
	</body>
</html>