一. vue的初步使用
1.引入相关依赖
//<!-- 引入一个vue文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
2. 给出相应的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box2">
{{ msg }}
</div>
<div id="app">
{{ msg }}
<h1> {{ count }}</h1>
</div>
<div id="box3">
{{ msg }}
</div>
<!-- 引入一个vue文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
// el用来绑定需要展示在那个盒子中
// 通过el配置选择器，指定 vue 管理的是那个盒子
el: '#app',
// data 提供数据
data:{
// data中的数据是需要渲染的数据
msg:'Hello World!',
count:6666
}
})
</script>
</body>
</html>
下图是效果图
从上图不难发现，只有通过el绑定的数据才能使用vue中的插值语法，同时vue是数据驱动类，数据发生变化视图也随着变化
二. Vue中常用的几个指令
1. v-show, v-if, v-else, v-else-if
首先我们先明确一点v-show和v-if的底层实现是不同的，v-show通常用于频繁切换的DOM元素，而v-if则适用条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 100px;
line-height: 100px;
margin: 10px;
border: 3px solid #000;
text-align: center;
border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;
}
</style>
</head>
<body>
<div id="app">
<div class="box" v-show="flag">我是v-show控制的盒子</div>
<div class="box" v-if="flag">我是v-if控制的盒子</div>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
</body>
</html>
v-if，v-else,v-else-if它只会渲染最多一个满足条件的DOM元素，如下图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-if="gender===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>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender:1,
score:90
}
})
</script>
</body>
</html>
2. v-on
v-on用来绑定事件具体写法为 v-on:事件名=“” 可简写为 @事件名=“”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="cnt--">-</button>
<span>{{cnt}}</span>
<!-- 方式一 -->
<!-- v-on:事件名="内联语句" -->
<!-- 方式二 -->
<!-- v-On:事件名=“methods中的函数名” -->
<!-- @事件名="" -->
<button @click="cnt++">+</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
// 用来提供数据
data: {
cnt:100
},
// 用来提供方法
methods:{
add(){
this.cnt++
}
}
})
</script>
</body>
</html>
3. v-bind
v-bind用于绑定数据和元素属性
可简写为 ：
v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找,当然也可以等于一个常数，这样就不用去data里找了。
当我们在控制台改变url时，对应也会变化。
相同的，我们还可以绑定图片src属性、超链接的class
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
imgsrc:"https://cn.vuejs.org/images/logo.png",
class:"btn btn-default"
}
});
<div class="app">
<a v-bind:href="url" v-bind:class="klass">click me</a>
<img v-bind:src="imgsrc">
</div>
绑定HTML Class
另外一种够可以传入一个对象，如下
对象的名active，表示要添加的类名，isActive是vue中的数据，表示在什么情况下添加该类名，对应为真才添加。
<div class="app">
<a :class="{active:isActive}">click me</a>
</div>
绑定内联样式
一、对象语法
v-bind:style 的对象语法十分直观–非常像CSS，其实它是一个Javascript对象，CSS属性名的规范写法是用驼峰命名法
<div id="box1" :style="{color:activeColor, fontSize:size,textShadow:shadow}">就是帅</div>
二、数组语法
<div id="box" :style="[styleObjectA, styleObjectB]">好好学习，天天向上</div>
4.v-for
v-for常用于数据的渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>小黑水果店</h3>
<ul>
<li v-for="(item, index) in list">{{item}} {{index}}</li>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: ['西瓜', '苹果', '鸭梨']
}
})
</script>
</body>
</html>
5. v-model
v-model 通常用于表单元素，数据的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
账户：<input type="text" v-model="username"> <br><br>
密码：<input type="password" v-model="password"> <br><br>
<button @click="login">登录</button>
<button @click="reset">重置</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username:'',
password:''
},
methods: {
login(){
console.log(this.password,this.username)
},
reset(){
this.password='',
this.username=''
}
},
})
</script>
</body>
</html>