Vue的基本概述
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 一旦引入的vue核心包,就可以全局使用 -->
<script src="js/vue.js"></script>
</head>
<body>
<!--
创建vue实例需要的步骤
1.准备一个容器(vue渲染数据的范围)
2.引入vue环境
3.创建vue实例
4.添加vue实例的配置项
4.1 el挂载点
4.2 data准能被数据
-->
<div id="app">
<!-- 插值表达式，我们将来要进行一个数据的渲染就使用这种方式，插值表达式里面定义data里面的变量名称 -->
{{msg}}
<br>
{{name}}
</div>
<script>
const v = new Vue({
// 通过el我们可以配置选择器，这样可以定位到vue实例所作用的容器
el:"#app",
// 通过data可以定义数据，在容器里面渲染的就是data的数据
data:{
msg:"hello vue",
name:"eric",
}
})
</script>
</body>
几种错误的使用情况：
1.渲染data中没有定义的数据
2.不要在插值表达式中写if这样的判断
3.不要再html属性中写插值表达式
正确写法
Vue指令
<style>
.box{
width: 200px;
height: 100px;
line-height: 100px;
border:2px red solid;
margin: 3px;
}
</style>
</head>
<body>
<!--
v-show和v-if都是控制HTML元素的显示和隐藏
如果值为true会显示，否则隐藏
v-show和v-if的区别：
在隐藏元素时，show通过隐藏样式(display:none)的方式，
if通过将当前的dom元素删除掉
-->
<div id="app">
<div v-show="flag" class="box">演示v-show的使用</div>
<div v-if="flag" class="box">演示v-if的使用</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
const v = new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
<body>
<div id="app">
<p v-if="sex==1">性别:男</p>
<p v-else>性别:女</p>
<hr>
<p v-if="score>=90">成绩等级A:优秀</p>
<p v-else-if="score>=80">成绩等级B:良好</p>
<p v-else-if="score>=60">成绩等级C:合格</p>
<p v-else>成绩等级D:不合格</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
const v = new Vue({
el:"#app",
data:{
sex:2,
score:67
}
})
</script>
<body>
<div id="app">
<button @click="count=count-1" type="button">-</button>
<span>{{count}}</span>
<button @click="count=count+1" type="button">+</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
const v = new Vue({
el:"#app",
data:{
count:100,
}
})
</script>
<body>
<div id="app">
<button @click="fn1" type="button">显示与隐藏</button>
<div v-show="flag">这是一个box</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
const v = new Vue({
el:"#app",
data:{
flag:true,
},
methods:{
//用来定义处理函数
//如果要在methods中使用data中的数据，我们可以使用
//Vue实例.属性名的方式来引用
//也可以使用this动态的指向当前动态实例
fn1(){
this.flag = !this.flag;
}
}
})
</script>
<body>
<div id="app">
<div style="margin-bottom: 15px; width: 250px; border: 3px black solid;border-radius: 5px;">
<h3>自动售货机</h3>
<button @click="todec(5)" type="button">可乐5元</button>
<button @click="todec(8)" type="button">牛奶8元</button>
<button @click="todec(10)" type="button">咖啡10元</button>
</div>
<div>
<p>银行卡余额:{{money}}元</p>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
const v = new Vue({
el:"#app",
data:{
money:100,
},
methods:{
todec(price){
if(this.money<price){
alert("余额不足");
return;
}
this.money-=price;
},
dec5(){
this.money-=5;
},
dec8(){
this.money-=8;
},
dec10(){
this.money-=10;
}
}
})
</script>
图片的上下页切换
<body>
<div id="app">
<!-- <img v-bind:src="imgUrl" v-bind:alt="Alt" v-bind:title="Title"> -->
<!--
v-bind是给html属性动态设置值，也可以:属性名称=值
eg:
:src="" :alt="" :title=""
-->
<img :src="imgUrl">
</div>
</body>
<script src="js/vue.js"></script>
<script>
const v = new Vue({
el:"#app",
data:{
imgUrl:"https://img1.baidu.com/it/u=302146640,1270496570&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",
Alt:"五五上",
Title:"无无山",
}
})
</script>
<body>
<div id="app" >
<!-- 只有当前这一页下标不是0才显示可以上一页 -->
<button v-show="index!=0" @click="index--" type="button">上一页</button>
<div>
<img style="height: 200px;" :src="list[index]" alt="haha">
</div>
<button v-show="index!=5" @click="index++" type="button">下一页</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
const v = new Vue({
el:"#app",
data:{
index:0,
list:[
"https://img1.baidu.com/it/u=882687410,353298960&fm=253&app=138&f=JPEG?w=500&h=667",
"https://img1.baidu.com/it/u=2211909947,1090713287&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1155",
"https://img0.baidu.com/it/u=3378675194,2222160237&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
"https://img2.baidu.com/it/u=124634888,3066510728&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
"https://img1.baidu.com/it/u=2413649154,1697438573&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
"https://img2.baidu.com/it/u=3606113107,1124599065&fm=253&app=138&f=JPEG?w=500&h=501"
],
}
})
</script>
<body>
<div id="app">
<ul>
<!-- 遍历数组 -->
<li v-for="(item,i) in arr">
{{item}} -- {{i}}
</li>
</ul>
<ul>
<li v-for="(item) in arr">
{{item}}
</li>
</ul>
<ul>
<!-- 遍历对象 -->
<li v-for="(v,key,io) in person">
{{v}} {{person}} {{io}}
</li>
</ul>
<ul>
<!-- 遍历对象数组 -->
<li v-for="(item) in emps">
姓名:{{item.name}},
年龄:{{item.age}}
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
const v = new Vue({
el:"#app",
data:{
arr:["白菜","黄瓜","胡萝卜","豆荚"],
person:{
name:"kobe",
age:19,
address:"USA"
},
emps:[
{
name:"kobe",
age:18,
address:"USA"
},{
name:"james",
age:16,
address:"USA"
},{
name:"lebra",
age:17,
address:"USA"
}
]
}
})
</script>图书信息的展示和删除操作
<body>
<div id="app">
<li v-for="(item) in books">
{{item.name}}--{{item.author}}<button @click="del(item.id)" type="button">删除</button>
</li>
</div>
</body>
<script src="js/vue.js"></script>
<script>
const v = new Vue({
el:"#app",
data:{
books:[
{id:1,name:"《红楼梦》",author:"曹雪芹"},
{id:2,name:"《西游记》",author:"吴承恩"},
{id:3,name:"《水浒传》",author:"施耐庵"},
{id:4,name:"《三国演义》",author:"罗贯中"}
]
},
methods:{
del(id){
//根据id删除数组中的元素，根据filter方法
//filter过滤规则是:如果数组中的每个元素的id与当前的id不相等，就将其过滤出来，然后放在一个新数组中
this.books = this.books.filter(ite => ite.id!==id);
}
}
})
</script>-key的使用
<body>
<!--
循环列表时，我们要习惯个每一个li列表添加一个唯一标识
eg: :key="唯一值"
这样在删除时可以将li删除干净
-->
<div id="app">
<li :key="item.id" v-for="(item) in books">
{{item.name}}--{{item.author}}<button @click="del(item.id)" type="button">删除</button>
</li>
</div>
</body>