首页 > 代码库 > vue（二）

vue（二）

2024-10-12 22:06:39   213人阅读

首先 vue的雏形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://www.mamicode.com/vue.js"></script>
</head>
<body>
　　<div id="box">
	{{msg}}
　　</div>
</body>
<script>
　　new Vue({        
	el:"#box",  //这是个选择器，可以是id名字，class名字，也可以是body
	data:{      //数据
	　　msg:"hellow vue"
	　　}
	})
</script>
</html>

　　

常用指令:

指令：扩展html 标签功能，属性

1.v-model

一般用在表单元素上（input） 实现双向数据绑定

<div id="box">
	<input type="text"  v-model="msg">
	<input type="text"  v-model="msg">
	{{msg}}
</div>
<script>
　　new Vue({
	el:"#box",
	data:{
	　　msg:"hellow vue"
	}
　　　　})
</script>

　　2.循环 v-for

　　v-for="name in arr";

　　v-for="name in josn"

　　v-for="(k,v) in json"

<div id="box">
	<ul>
	　　<li v-for="value in arr">{{value}}</li>		
	</ul>
	<hr>
	<ul>
	　　<li v-for="item in json">{{item}}</li>					
	</ul>
</div>
</body>
<script>
　　new Vue({
	el:"#box",
	data:{
	　　arr:["apple","orange","bananr"],
	　　json:{a:‘apple‘,b:‘orange‘,c:‘banner‘}
	　　}
　　　　})
</script>
</html>

　　3.事件 v-on:click="函数"

　　

new Vue({
	el:"#box",
	data:{    //数据
		arr:["apple","orange","bananr"],
		json:{a:‘apple‘,b:‘orange‘,c:‘banner‘}
	},
	methods:{  //方法
	　　show:function()
　　　　　　　　{
		alert(1)
	　　　　}
	　　}
	})

　　

vue（二）


联系
我们