vue使用：基础
目录：
vue
vue是一个数据模板引擎
new Vue({
el: "#app",
data: {
greeting: "Hello World"
}
})
vue常用指令
v-开头指令帮助渲染数据
- v-text渲染普通数据
- v-html
- v-for
- v-if if会创建和销毁dom树
- v-show show是加了display
- v-bind 添加属性，用:简写，可以接字典和数组
- v-on 绑定动作，用@简写
- v-model 进行双向数据绑定
for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="i in all">{{ i }}</li>
</ul>
<ul>
<li v-for="st in students">姓名: {{ st.name }}, 年龄：{{ st.age }}</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
all: ["python", "go", "vue"],
students: [
{
name: "why",
age: 18
},
{
name: "pqt",
age: 17
}
]
}
})
</script>
</body>
</html>
if判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="role == 'why'">
<h1>why</h1>
</div>
<div v-else-if="role == 'pqt'">
<h1>pqt</h1>
</div>
<div v-else>
<h1>other</h1>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
role: "mb"
}
})
</script>
</body>
</html>
动作绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1 :class="{ active: isActive }">{{ why }}</h1>
<button @click="changeColor">变色</button>
</div>
<script>
new Vue({
el: "#app",
data: {
isActive: false,
why: "wanghongyu"
},
methods: {
changeColor: function () {
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name">
<input type="checkbox" value="男" v-model="genders">
<input type="checkbox" value="女" v-model="genders">
<hr>
{{ name }}
{{ genders }}
</div>
<script>
new Vue({
el: "#app",
data: {
name: "why",
genders: []
}
})
</script>
</body>
</html>
computed计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>python</td>
<td><input type="text" v-model="python"/></td>
</tr>
<tr>
<td>go</td>
<td><input type="text" v-model="go"/></td>
</tr>
<tr>
<td>vue</td>
<td><input type="text" v-model="vue"/></td>
</tr>
<tr>
<td>总成绩</td>
<td>{{ sumScore }}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: "#app",
data: {
python: 60,
go: 70,
vue: 80
},
computed: {
sumScore: function () {
return this.python + this.vue + this.go;
}
}
})
</script>
</body>
</html>
指令修饰符
上边输入的数据默认是字符的，修改会变为字符串拼接，v-model.number可以将输入变为数字
- lazy在失焦之后再进行计算
- trim去掉空白
获取DOM元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div ref="myRef">wanghongyu</div>
<button @click="changeColor">变色</button>
</div>
<script>
new Vue({
el: "#app",
data: {
why: "wanghongyu"
},
methods: {
changeColor: function () {
this.$refs.myRef.style.color = 'red'
}
}
})
</script>
</body>
</html>
this.$refs.myRef.style.color的myRef是值为myRef的对象，获取到的是一个div标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-pos="postition">Hello why!</div>
</div>
<script>
Vue.directive("pos", function (el, bindding) {
console.log("el", el);
console.log("bindding", bindding)
});
new Vue({
el: "#app",
data: {
postition: true
}
})
</script>
</body>
</html>
directive的两个参数分别是指令名称和回调函数
console打印一下el和bind
el <div>Hello why!</div>
bindding {name: "pos", rawName: "v-pos", value: true, expression: "postition", modifiers: {…}, …}
def: {bind: ƒ, update: ƒ}
expression: "postition"
modifiers: {}
name: "pos"
rawName: "v-pos"
value: true
__proto__: Object
el就是当前标签，bindding包含name为指令名称，expression为属性的key，value是属性的value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="{ box: isShow }" v-pos="leftBotton">Hello why!</div>
</div>
<script>
Vue.directive("pos", function (el, bindding) {
console.log("el", el);
console.log("bindding", bindding)
if (bindding.value) {
el.style['position'] = 'fixed' ;
el.style['right'] = 0;
el.style['bottom'] = 0;
}
});
new Vue({
el: "#app",
data: {
leftBotton: true,
isShow: true
}
})
</script>
</body>
</html>
如果写为v-pos.right.bottom，console的bindding里有modifiers: {right: true, bottom: true}
所以可以修改为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="{ box: isShow }" v-pos.right.bottom="leftBotton">Hello why!</div>
</div>
<script>
Vue.directive("pos", function (el, bindding) {
console.log("el", el);
console.log("bindding", bindding)
if (bindding.value) {
el.style['position'] = 'fixed' ;
for (let key in bindding.modifiers) {
el.style[key] = 0;
}
}
});
new Vue({
el: "#app",
data: {
leftBotton: true,
isShow: true
}
})
</script>
</body>
</html>
