前端-vue基础
一、vue基础
1.vue的模板语法
<!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>
<!-- CDN引入 二选一即可，但要保证网络畅通-->
<!-- 开发环境版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<!-- 生产环境版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
<!-- 本地引入 -->
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- 渲染数据的方法：双大括号 {{ }} -->
{{ message }}
<br>
<!-- 双向数据绑定，通过改变视图来渲染不同的数据 -->
<input type="text" v-model="msg">
</div>
</body>
<script>
// 生成vue的实例
let app = new Vue({
// 绑定id名为app的标签
el: "#app",
// 数据，里面是对象形式的数据
data : {
// 属性 ： 属性值
message : 'hello world',
msg : 'hello vue'
}
})
</script>
</html>
2.vue的基本语法
<!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>
<script src="../vue.js"></script>
<style>
.one{
color: red;
}
.two{
color: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- 模板语法不会解析标签 -->
{{ message }}
<!-- html,text解析标签与否和JS相同 -->
<!-- 文本渲染 -->
<div v-html="message"></div>
<div v-text="message"></div>
<!-- v-bind绑定指令 -->
<div v-bind:title="msg">DOM元素属性绑定的完整写法</div>
<!-- v-bind可以省略，但是冒号不能省 -->
<div :title="msg">DOM元素属性绑定的简写</div>
<!-- 绑定class属性，动态改变元素样式 -->
<div :class="className1">
{{shop}}
</div>
<div :class="className2">
{{shop}}
</div>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
message: '<span>hello world</span>',
msg : '你指向了这里',
shop : '水果',
className1 : 'one',
className2 : 'two'
}
})
</script>
</html>
3.绑定样式
<!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>
<script src="../vue.js"></script>
<style>
.one {
color: red;
}
.two {
color: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用对象语法来绑定样式 -->
<!-- 直接绑定数据里面的一个对象，动态切换class -->
<div :class="{one:oneActive,two:twoActive}">
1.{{ msg }}
</div>
<!-- 使用三目运算符绑定样式 -->
<div :class="userId==1?className1:className2">
2.{{ msg }}
</div>
<!-- 了解：使用内联直接绑定样式 -->
<div :style="{color:colorValue,fontSize:fontSizeValue}">
3.{{ msg }}
</div>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
userId: 2,
oneActive: false,
twoActive: true,
msg: 'DOM元素的样式绑定',
className1: 'one',
className2: 'two',
colorValue: 'green',
fontSizeValue: '50px'
}
})
</script>
</html>
4.条件渲染
<!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>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- 条件渲染:指令v-if，整个流程要紧挨着，中间不可以有别的代码，否则程序识别不出来 -->
<div v-if="num==1">A</div>
<div v-else-if="num==2">B</div>
<div v-else-if="num==3">C</div>
<div v-else-if="num==4">D</div>
<div v-else="num==5">E</div>
<!-- 元素显示和隐藏 -->
<!-- v-if可以控制元素显示或隐藏 -->
<div v-if="isShow">这里是v-if</div>
<!-- v-show也可以实现隐藏显示 -->
<div v-show="isShow">这里是v-show</div>
<!-- v-if和v-show的区别 -->
<!--
1.v-if是真正的条件渲染，有很高的切换开销，适用于条件不太容易改变的时候，也就是切换的不频繁
2.v-show是简单的基于CSS进行切换，有很高的初始渲染开销，适用于频繁的切换
-->
</div>
</body>
<script>
let app = new Vue({
el : '#app',
data : {
num : 4,
// 改变布尔值可以控制元素显示隐藏
isShow : true
}
})
</script>
</html>
5.事件处理
<!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>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-on用绑定事件 -->
<button v-on:click="point">求点击</button>
<br><br>
<!-- 点击事件的简写 v-on:替换成@ -->
<button @click="point">点击事件的简写</button>
<br><br><br>
<!-- 页面刷新时div的初始值是10，每点击一次加号div的值加5，每点击一次减号div的值减3，当div的值不足3时，div的值为0 -->
<button @click="add(5)">+</button>
<button @click="reduce(3)">-</button>
<br>
<div>
{{ num }}
</div>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
num: 10
},
// 写函数的区域
methods: {
point() {
alert('你点击了按钮')
},
add(value) {
this.num += value
},
reduce(value) {
if (this.num <= value) {
this.num = 0
} else {
this.num -= value
}
}
},
})
</script>
</html>
6.循环遍历指令
<!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>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- 循环遍历指令依赖于v-for，可以遍历数组或对象 -->
<p v-for="(value,key,index) in student">
<!-- 遍历后，value表示属性值，key表示属性，index表示索引值 -->
{{ index + 1 }},{{ key }},{{ value }}
</p>
<!-- index,key都是可选参数，如果不需要可以省略 -->
<p v-for="value in student">
{{ value }}
</p>
<br><br><br>
<!-- 遍历数组，index是可选参数,不需要可以省略 -->
<div v-for="(item,index) in userArr">
{{ item.userId }},{{ item.userName }},{{ item.userSex }}
</div>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
student : {
name : '张三',
age : 18,
sex : '男'
},
userArr : [
{
userId : 1,
userName : '小明',
userSex : '男'
},
{
userId : 2,
userName : '小红',
userSex : '女'
},
{
userId : 3,
userName : '小丽',
userSex : '女'
}
]
}
})
</script>
</html>
7.计算属性
<!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>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<p>当前num的值是 {{ num }} → 函数方法</p>
<div>当前num的值是 {{ msg }} → 计算属性方法 </div>
<button @click="change">改变num的值</button>
</div>
</body>
<script>
let app = new Vue({
el : '#app',
data : {
num : 1
},
methods: {
change(){
this.num = Math.floor(Math.random() * 2)
console.log('调用函数：' + this.num)
}
},
// 计算属性的区域
computed: {
msg(){
console.log('调用计算属性：' + this.num)
return this.num % 2 == 0 ? '偶数' : '奇数'
}
},
// 计算属性与函数的区别：
// 函数的调用，只要触发就会执行，不管值是否发生改变
// 计算属性的调用，只在值发生改变的情况下才会调用，如果值没有变化就不会调用对应的方法，这样的程序会更节省资源
})
</script>
</html>
本文含有隐藏内容，请 开通VIP 后查看