vue基础
Posted jinhongquan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue基础相关的知识，希望对你有一定的参考价值。
知识总结
"""
1、vue框架的优势
2、vue如何在页面中引入
1）通过script标签引入vue.js环境
2）创建vue实例
3）通过el进行挂载
3、插值表达式
{{ 变量以及变量的简单运算 }}
4、文本指令
{{ }} | v-text | v-html | v-once
5、方法指令
v-on:事件="变量" | @事件="变量" | @事件="变量()" | @事件="变量($event, ...)"
6、属性指令
v-bind:属性="变量" | :属性="变量"
:title="t1"
:class="c1" | :class="[c1, c2]" | :class="{c1: true}"
:style="s1" | :style="{color: c1, fontSize: f1}"
s1是字典变量，c1和f1变量分别控制字体颜色和大小
7、js补充
function可以作为类，内部会有this
箭头函数内部没有this
{}里面出现的函数称之为方法： 方法名(){}
"""
1、按照上方 知识点总结 模块，总结今天所学知识点
2、有 红、黄、蓝 三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<div>
<!--需求：当前点击者高亮-->
<button @click="changeColor(‘red‘)">红</button>
<button @click="changeColor(‘yellow‘)">黄</button>
<button @click="changeColor(‘blue‘)">蓝</button>
</div>
<div class="box" :style="{backgroundColor: bgColor}"></div>
<!--(div>button*3)+.box-->
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: ‘#app‘,
data: {
bgColor: ‘black‘
},
methods: {
changeColor(color) {
this.bgColor = color;
}
}
})
</script>
</html>
3、有一个200x200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrap {
width: 200px;
height: 200px;
/*background-color: black;*/
color: white;
font: bold 50px/200px ‘STSong‘;
text-align: center;
user-select: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap" @click="actionFn" :style="{backgroundColor: bgColor}">{{ count }}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: ‘#app‘,
data: {
count: 0,
bgColor: ‘black‘,
colorArr: [‘cyan‘, ‘pink‘, ‘green‘]
},
methods: {
actionFn() {
this.count ++;
this.bgColor = this.colorArr[this.count % 3]
}
}
})
</script>
</html>
1、如图：图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成下红上绿，依次类推 2、可以将图编程自动旋转
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrap {
border: 3px solid black;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin: 50px auto 0;
position: relative;
}
.red, .green {
width: 100px;
height: 200px;
position: absolute;
}
.red { background-color: red; }
.green { background-color: green; }
.l {
width: 100px;
height: 200px;
left: 0;
}
.t {
width: 200px;
height: 100px;
top: 0;
}
.r {
width: 100px;
height: 200px;
right: 0;
}
.b {
width: 200px;
height: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap" @click="actionFn">
<div class="red" :class="red_class"></div>
<div class="green" :class="green_class"></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: ‘#app‘,
data: {
count: 0,
red_class: ‘l‘,
green_class: ‘r‘,
red_arr: [‘l‘, ‘t‘, ‘r‘, ‘b‘],
green_arr: [‘r‘, ‘b‘, ‘l‘, ‘t‘],
},
methods: {
actionFn() {
this.count ++;
this.red_class = this.red_arr[this.count % 4];
this.green_class = this.green_arr[this.count % 4];
}
}
})
</script>
</html>
以上是关于vue基础的主要内容，如果未能解决你的问题，请参考以下文章