vue(1) - 基本用法和基本指令

一：首先 vue的雏形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="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"

　　*有重复数据时，会报错，用 track-by="$index/userId" 提高循环性能

<div id="box">
	<ul>
	　　<li v-for="value in arr"  track-by="$index>{{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 /mouseout /mouseover /mousedown /dblclick...="函数"　

　　注:v-on:click可以简写成 @click

//点击按钮在数组后面添加potomo
<div>
　　<input type="button" v-on:click="add()">
　　<ul>
　　　　<li v-for="value in arr">{{value}}</li>
　　</ul>
</div>
new Vue({
	el:"#box",
	data:{//数据
		arr:["apple","orange","bananr"],
		json:{a:'apple',b:'orange',c:'banner'}
	},
	methods:{//方法
	　　add()
　　　　　　　　{
		this.arr.push("Peach")
	　　　　}
	　　}
	})

　　4.v-show=true/false

<div id="box">
　　<input type="button" value="点击" v-on:click="a=false">
　　<div style="width:100px;height:100px;background:red;" v-show="a">
　　</div>
</div>
</body>
<script>
　　new Vue({
	el:"#box",
	data:{  
	　　a:true
	}
　　})
</script>

　　

5.在vue里绑定属性用 v-bind  

v-bind:src 简写成 :src

<script>
        window.onload=function(){
            new Vue({
                el:"#box",
                data:{
                    url:"https://www.baidu.com/img/bd_logo1.png"
                },
                methods:{
                    
                },                
            })
        }
    </script>

</head>
<body>
<div id=box>
    <img v-bind:src="url" alt="">    
</div>

 

posted @ 2017-06-27 18:06  sunwy927  阅读(214)  评论(0)  编辑  收藏  举报