v-for 遍历
<!DOCTYPE html>
<html >
<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">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-for="(item,index) in arr">{{item}}-----{{index}}</div>
<hr>
<div v-for="(item,index) in 'qianfeng'">{{item}}-----{{index}}</div>
<hr>
<div v-for="(item,index) in 5">{{item}}-----{{index}}</div>
<hr>
<div v-for="(item,index) in obj">{{item}}</div>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
arr:[10,20,30,40],
obj:{
username:"zhangsan",
age:10
}
}
})
/*
v-for: 遍历
可以用来遍历任何对象
数组 字符串 对象.......
*/
</script>
v-on 时间绑定 简写@
<!DOCTYPE html>
<html >
<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">
<title>Document</title>
<style>
.box{
width:200px;
height: 200px;
background: red;
}
.box1{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!-- <button v-on:click="handleClick">点击</button> -->
<button @click="handleClick">点击</button>
<hr>
<div class="box" @click="handleBox(123,$event)">
<div class="box1" @click.stop.once="handleBox1"></div>
</div>
<hr>
<div class="box" @click="handleBox">
<div class="box1" @contextmenu.prevent.stop="handleBox1"></div>
</div>
<hr>
<input type="text" @keydown.enter="handlekeydown">
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:1910
},
//用来存放vue所需要的函数 当前组件所需要的函数
methods:{
handleClick(){
this.msg = 1907
},
handleBox(val,e){
console.log(val,e)
},
handleBox1(){
alert('box1')
}
,handlekeydown(){
console.log(111)
}
}
})
/*
v-on：事件绑定
语法：
v-on:事件名称 = 事件函数
v-on:click=事件函数
简写：@事件名称
修饰符：
作用：修饰指令
语法：
指令.修饰符.修饰符........
stop 阻止冒泡
prevent 阻止浏览器默认事件
enter 按下回车
once 事件只绑定一次
事件对象：
如果需要使用事件对象的情况下只需要给函数传递一个$event即可
数据能够驱动视图？底层用的是Object.defindProperty()来做数据的劫持
*/
</script>
v-pre、 v-cloak、 v-once
<div>{{msg}}</div>
<p v-pre>vue中的{{msg}}用来解析数据的</p>
br
<!DOCTYPE html>
<html >
<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">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<p v-pre>vue中的{{msg}}用来解析数据的</p>
<h2>{{msg}}</h2>
<button @click="handleClick()">修改</button>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
msg:1910
}
,methods:{
handleClick(){
this.msg = 1907;
}
}
})
/*
v-pre:作用是不解析{{}}
v-cloak : 作用防止{{}}在vue.js没有加载进来的时候显示
v-once:数据只解析一次
*/
</script>
先看效果
<!DOCTYPE html>
<html >
<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">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
<hr>
<label>
男 <input type="radio" value="男" v-model="radioVal">
</label>
<label>
女<input type="radio" value="女" v-model="radioVal">
</label>
<p>您选择的性别是：{{radioVal}}</p>
<hr>
<label>
抽烟 <input type="checkbox" value="抽烟" v-model="checkVal">
</label>
<label>
喝酒 <input type="checkbox" value="喝酒" v-model="checkVal">
</label>
<label>
烫头 <input type="checkbox" value="烫头" v-model="checkVal">
</label>
<label>
大保健 <input type="checkbox" value="大保健" v-model="checkVal">
</label>
<ul>
<li v-for="item in checkVal">{{item}}</li>
</ul>
<hr>
<select v-model="seletVal">
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
</select>
<p>您的出身日期为:{{seletVal}}</p>
<hr>
<h2>基于Object.defineProperty实现双数据绑定</h2>
<label>
抽烟 <input type="checkbox" value="抽烟" @change="handleChange($event)">
</label>
<label>
喝酒 <input type="checkbox" value="喝酒" @change="handleChange($event)">
</label>
<label>
烫头 <input type="checkbox" value="烫头" @change="handleChange($event)">
</label>
<label>
大保健 <input type="checkbox" value="大保健" @change="handleChange($event)">
</label>
<ul>
<li v-for="(item,index) in arr">{{item}}</li>
</ul>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: 1910,
radioVal: "男",
checkVal: [],
seletVal: 2000,
arr:[]
},
methods: {
handleChange(e){
let val = e.target.value;
if(this.arr.length>0){
let flag = this.arr.includes(val);
if(flag){
let index= this.arr.indexOf(val);
this.arr.splice(index,1)
}else{
this.arr.push(val);
}
}else{
this.arr.push(val);
}
}
},
})
/*
v-model:双数据绑定
v-model可以直接修改data中的属性值，当数据发生改变的时候视图也会发生改变
v-model只能应该到form表单身上 其他元素无法使用
v-model也有自己的修饰符 number 代表输入框里面的值是一个数字类型的
底层原理
Object.defindProperty来实现,在vue3.0中 将Object.defindProperty替换成了Proxy,
通过给data中的每一个属性加一个数据劫持(给每一个属性加了一个getter/setter方法)
*/
</script>