三.Vue的使用
1.vue成员获取($options的使用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h1 @click="btnClick">{{ msg }}</h1>
<p>{{ 10 | add }}</p>
<p>{{ $data }}</p>
<p>{{ $options.arr }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
msg: '数据',
a: 1,
b: 2,
},
methods: {
btnClick() {
console.log(this.msg)
}
},
filters: {
add(v) {
return v+1
}
},
arr: [1, 2, 3, 4],
});
console.log(app.msg);
console.log(app.$data);
console.log(app.$options.methods);
console.log(app.$options.arr);
</script>
</html>
2.原义指令v-pre
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div v-pre>
<!--v-pre的内部解除vue控制-->
<!--{{}}不是插值表达式，msg不是变量，v-on不是指令，都是原义输出-->
<p>{{ msg }}</p>
<span v-on="abc"></span>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: "message"
}
})
</script>
</html>
3.v-for循环指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{ arr }}</p>
<p>
<span>{{ arr[0] }}</span>
<span>{{ arr[1] }}</span>
<span>{{ arr[2] }}</span>
<span>{{ arr[3] }}</span>
<span>{{ arr[4] }}</span>
</p>
<div>
<!--值 遍历-->
<p v-for="v in arr">
<span>{{ v }}</span>
</p>
</div>
<div>
<!--值，索引 遍历-->
<p v-for="(v, i) in arr">
<span>第{{ i + 1 }}个值：{{ v }}</span>
</p>
</div>
<p>{{ student }}</p>
<div>
<p v-for="(v, k, i) in student">
<span>{{ k, v, i | f1 }}</span>
</p>
</div>
<div>
<!--页面渲染格式:
name: Bob | age:18 | gender:男
name: Tom | age:1 | gender:男
-->
<p v-for="stu in stus">
<!--<span v-for="(v, k, i) in stu">{{i?' | ':''}}{{k}}:{{v}}</span>-->
<span v-for="(v, k, i) in stu">{{i|f2}}{{k}}:{{v}}</span>
</p>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
arr: [1, 4, 2, 3, 5],
student: {
'name': 'Bob',
'age': 18,
'gender': '男'
},
stus: [
{
'name': 'Bob',
'age': 18,
'gender': '男'
},
{
'name': 'Tom',
'age': 20,
'gender': '男'
}
]
},
filters: {
f1(k, v, i) {
// return k + ":" + v + '(' + i + ')'
// el表达式:${},常用于获取后台传递的数据
return `${k}:${v}(${i})`
},
f2(i) {
// i为0代表假，返回''，其它索引时返回' | '
return i ? ' | ' : ''
}
}
})
</script>
</html>
4.to_list案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>todolist</title>
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="info">
<button @click="addMsg">留言</button>
<ul>
<li v-for="(msg, i) in msgs" @click="delFn(i)">{{ msg }}</li>
</ul>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: '',
// msgs: ['11111', '22222'],
// msgs: sessionStorage.msgs && JSON.parse(sessionStorage.msgs) || [],
// sessionStorage存放数组和字典需要JSON字符串参与
msgs: JSON.parse(sessionStorage.msgs || '[]'),
},
methods: {
addMsg() {
let info = this.info;
if (info) {
// this.msgs.push(this.info); // 尾增
this.msgs.unshift(this.info); // 首增
// 清空留言框
this.info = '';
sessionStorage.msgs = JSON.stringify(this.msgs);//同步
}
},
delFn(i) {
//删除留言
this.msgs.splice(i, 1);
sessionStorage.msgs = JSON.stringify(this.msgs);//同步
}
}
})
</script>
</html>
5.v-slot插槽指令
#简化了父子组件的信息交互
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插槽指令</title>
<style>
body {
font-size: 30px;
}
li:hover {
color: orange;
cursor: pointer;
}
.del:hover {
color: red;
}
</style>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="info">
<button @click="add_msg">留言</button>
<ul>
<msg-tag :msg="msg" v-for="(msg, i) in msgs" :key="msg">
<!--template通过v-slot绑定子组件内部slot插槽标签的name属性值-->
<template v-slot:del_btn>
<span @click="del_fn(i)" class="del">x</span>
</template>
</msg-tag>
</ul>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let msgTag = {
props: ['msg'],
template: `
<li>
<slot name="del_btn"></slot>
<span>{{ msg }}</span>
</li>
`,
};
new Vue({
el: '#app',
components: {
msgTag
},
data: {
info: '',
msgs: JSON.parse(sessionStorage.msgs || '[]'),
},
methods: {
add_msg() {
let info = this.info;
if (info) {
this.msgs.unshift(this.info);
this.info = '';
sessionStorage.msgs = JSON.stringify(this.msgs);
}
},
del_fn(index) {
console.log(index);
this.msgs.splice(index, 1);
sessionStorage.msgs = JSON.stringify(this.msgs);
}
}
});
</script>
</html>
