Vue--入门篇
Posted gzw-23
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue--入门篇相关的知识，希望对你有一定的参考价值。
一、v-model和单选按钮（radio）
<div id="app">
<input name="sex" value="男" type="radio" v-model=‘aaa‘>男 //监测数据的变化！
<input name="sex" value="女" type="radio" v-model=‘aaa‘>女
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:‘#app‘,
data:{
aaa:‘男‘ //对应的value的值，可以设置默认选中
},
})
</script>
二、v-model和复选框（checkbox）
<div id="app">
<input type="checkbox" value="吃饭" v-model=‘like‘>吃饭
<input type="checkbox" value="睡觉" v-model=‘like‘>睡觉
<input type="checkbox" value="打豆豆" v-model=‘like‘>打豆豆
<p>{{like}}</p>
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:‘#app‘,
data:{
like:[] //接收数据的数组
},
})
</script>
三、v-model和下拉列表（select）
<div id="app">
<select v-model=‘checkout‘> //下拉列表只需在select上绑定就可以
<option value="吃饭">吃饭</option>
<option value="睡觉">睡觉</option>
<option value="打豆豆">打豆豆</option>
</select>
<p>{{checkout}}</p>
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:‘#app‘,
data:{
checkout:‘打豆豆‘ //这里绑定谁，就默认显示谁。
},
})
</script>
v-model小案例
<!DOCTYPE html> <html lang="en"> <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"> <header> <label> <input type="text" placeholder="请输入内容……" @keyup.enter=‘push‘> </label> </header> <section> <ul> <li v-for=‘(item,index) of getArr‘> <span>{{item}}</span> <button @click=‘remove(index)‘>删 除</button> </li> </ul> </section> </div> <script src="./vue.js"></script> <script> let app=new Vue({ el:‘#app‘, data:{ getArr:[], }, methods:{ push(e){ this.getArr.push(e.target.value) e.target.value=‘‘; }, remove(i){ this.getArr.splice(i,1) //注意：删除，虽然是和原生数组的方法名一样，但不再是原生的本质，而是经过二次封装之后的。 } } }) </script> </body> </html>
v-model的修饰符
<div id="app">
<!-- 实现一个双向数据绑定 -->
<!-- <input type="text" :value="message" @input=‘fn‘> --> //给value绑定value值
<!-- v-model的修饰符 .lazy 失去焦点是…… .number 返回一个数据类型-->
<input type="text" v-model.lazy=‘message‘>
<p>{{message}}</p>
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:‘#app‘,
data:{
message:‘原生value不支持，所以用绑定，加：‘
},
methods:{
fn(e){
this.message=e.target.value;
}
}
})
</script>
四、computed （计算属性）注意：属性！属性！属性！！！！是一个属性。
<!DOCTYPE html>
<html lang="en">
<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="computed">
<p>{{usename}}</p> //此处不再加括号！！！属性
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: ‘#computed‘,
data: {
firstname: ‘Lebron‘,
lastname: ‘james‘,
},
computed: {//计算属性---因为是属性，所以直接写，不再加括号
// usename() {
// return this.firstname + ‘.‘ + this.lastname
// }
//计算属性的特点：有缓存，
//展开写法；
usename:{
//里面有一个get（）方法和set（）方法；
get(){
return this.firstname+‘.‘+this.lastname
},
set(val){
}
}
}
})
</script>
</body>
</html>
vue入门小demo
<!DOCTYPE html>
<html lang="en">
<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>
*{margin:0;padding:0;}
ul,li{list-style: none;}
section{width:600px;height:400px;margin:200px auto;border: 2px solid #000;position: relative;left: 200px;;}
.td{border-bottom: 1px solid rebeccapurple;width: 100%;height:50px;}
.header{float: left;margin:0 40px;line-height: 50px;}
.con{width:600px;height:70px;border-bottom: rebeccapurple 1px solid;display: flex;justify-content: space-around;}
p{float: left;height: 70px;line-height: 70px;text-align: center;width:100px;}
P:nth-of-type(3){display: flex;justify-content: space-around;width:100px;height:50px;align-items: center;}
button{margin-right: 0;width:80px;height:25px;background:rgb(207, 205, 204);outline: none;border: none;border-radius: 10px;cursor: pointer;}
div{position: absolute;bottom: 0;left: 0;}
</style>
</head>
<body>
<div id="app">
<section>
<ul class="td">
<li class="header">商品名</li>
<li class="header">价格</li>
<li class="header">数量</li>
<li class="header">产地</li>
<li class="header">删除</li>
</ul>
<ul>
<li class="con" v-for=‘(item,index) in message‘>
<p>{{item.name |fruit}}</p>
<p>{{item.price | setMoney}}</p> // | 是一个管道，后接过滤
<p><button class="ctrl" @click=‘cut(index)‘> - </button>{{item.num}}<button @click=‘add(index)‘> + </button></p>
<p>{{item.city}}</p>
<p><button @click=‘remove(index)‘>删 除</button></p>
</li>
</ul>
<div>总价格:{{allPrice | allMoney}}</div>
</section>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: ‘#app‘,
data: {
message: [
{
name: ‘红富士‘,
price: 15,
num: 5,
city: ‘静宁‘,
},
{
name: ‘哈密瓜‘,
price: 10,
num: 10,
city: ‘新疆‘,
},
{
name: ‘香蕉‘,
price: 20,
num: 10,
city: ‘三亚‘,
},
{
name: ‘葡萄‘,
price: 15,
num: 5,
city: ‘哈密‘,
},
]
},
methods:{
cut(i) {
this.message[i].num > 1 && this.message[i].num--; //如果 && 遇到false后面的表达式将不再执行
},
add(i) {
this.message[i].num < 10 && this.message[i].num++;
},
remove(i){
this.message.splice(i,1)
}
},
computed:{
allPrice() {
return this.message.reduce((prevPrice, nowPrice) => {
return prevPrice + (nowPrice.price * nowPrice.num)
},0)
}
},
filters:{//过滤
setMoney(price){ //实参必须为所要筛选的数组项！！！
return ‘￥‘+price+ ‘.00‘
},
fruit(name){
return ‘水果：‘+name
},
allMoney(allPrice){
return ‘￥‘+allPrice+‘.00‘
}
}
})
</script>
</body>
</html>
五、watch （监视）
<body>
<div id="app">
<!-- <input type="text" v-model=‘dog‘> -->
<input type="text" v-model=‘obj.b.c‘>
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:‘#app‘,
data:{
dog:‘哈士奇‘,
obj:{
a:1,
b:{
c:222,
}
}
},
computed:{
},
watch:{ //监听数据的变化。
// dog(nValue,Ovalue){
// console.log(nValue,Ovalue)
// }
// ‘obj.a‘(newVal,oldVal){
// console.log(newVal,oldVal)
// }
//深层监听；
obj:{
handler(newVal,oldVal){
console.log(newVal.b.c,oldVal.b.c)
},
deep:true, //深层监控，handle此方法必须写，而且固定不变，
}
}
})
</script>
以上是关于Vue--入门篇的主要内容，如果未能解决你的问题，请参考以下文章