Vue(二)
一、表单指令
属性指令：v-model=“变量”，v-model绑定的变量控制的是表单元素的value值。
<body>
<div id="app">
<form action="">
// 普通表单元素，用v-model直接绑定变量控制value值
<input type="text" v-model="v1">
<input type="text" v-model="v1">
<textarea name="" id="" cols="30" rows="10" v-model="v1"></textarea>
<p>{{ v1 }}</p>
// v1内文本同步内容
<hr>
// 单一复选框
<input type="checkbox" name="agree" v-model="v2">
<hr>
// 多个复选框
男<input type="checkbox" name="hobbies" value="male" v-model="v3">
女<input type="checkbox" name="hobbies" value="female" v-model="v3">
??<input type="checkbox" name="hobbies" value="???" v-model="v3">
<p>{{ v3 }}</p>
<hr>
// 单选框
午饭是什么：<br>
又又:<input name="food" type="radio" value="rou" v-model="v4">
饭饭:<input name="food" type="radio" value="fan" v-model="v4">
<hr>
<button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: false, // 选框默认不勾选
v3: ['male','???'], // 复选框默认勾选的项
v4: 'rou' // 单选框默认勾选的项
}
})
</script>
二、斗篷指令
页面加载时会因为加载的顺序问题产生为渲染的内容闪烁的现象。
<head>
<meta charset="UTF-8">
<title></title>
<style>
[v-cloac] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<P>{{ msg }}</P>
<P>{{ msg }}</P>
<P>{{ msg }}</P>
<P>{{ msg }}</P>
<P>{{ msg }}</P>
<P>{{ msg }}</P>
<P>{{ msg }}</P>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 123456
}
})
</script>
三、条件指令
3.1 条件指令
v-if="true|false"，为假时，在页面上不渲染，可以隐藏标签中的信息。
v-show="true|false"，为假时，在页面中用display:none渲染，虽然没展示，但是在页面结构中。
v-if家族中有v-if、v-else-if、v-esle，只要上一级成立，下一级就会被屏蔽。else分支只要在所有上分支都为假时显示，且不需要条件
<body>
<div id="app">
<p v-if="false">if指令</p>
<p v-show="false">show指令</p>
<p v-if="v1 === '1'">if分支</p>
<p v-else-if="v1 === '2'">elif分支1</p>
<p v-else-if="v1 === '3'">elif分支2</p>
<p v-else>else分支</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '2'
}
})
</script>
3.2 条件指令案例
注意：
sessionStorage的生命周期与页面标签绑定，当标签页被关闭，数据库被清空。
localStorage是前台永久数据库。
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
400px;
height: 200px;
}
.r { background-color: red }
.y { background-color: yellow }
.g { background-color: green }
.action { background-color: pink }
</style>
</head>
<body>
<div id="app">
<p>
<button @click="changeC('red')" :class="{action: c === 'red'}">红</button>
<button @click="changeC('yellow')" :class="{action: c === 'yellow'}">黄</button>
<button @click="changeC('green')" :class="{action: c === 'green'}">绿</button>
</p>
<div class="wrap">
<div class="box r" v-if="c === 'red'"></div>
<div class="box y" v-else-if="c === 'yellow'"></div>
<div class="box g" v-else></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
c: localStorage.c ? localStorage.c : 'red',
},
methods: {
changeC(color) {
// 每一次改变c的值，将值同步到前台数据库
this.c = color;
// 存
localStorage.c = color
}
}
})
</script>
四、循环指令
4.1 循环指令
循环指令：v-for="成员 in 容器"。
字符串循环渲染: 可以只遍历值，也可以遍历值与索引。
数组循环渲染: 可以只遍历值，也可以遍历值与索引。
对象循环渲染: 可以只遍历值，也可以遍历值与键，还可以遍历值、键与索引
<body>
<div id="app">
<p>
<span v-for="v in title">{{ v }}</span>
</p>
<p>
<span v-for="(v, i) in title">
<span v-if="i !=0"> | </span>
{{ v }}
</span>
</p>
<div>
<p v-for="v in people">{{ v }}</p>
</div>
<div>
<p v-for="(v, k) in people">{{ k }}:{{ v }}</p>
</div>
<div>
<p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
</div>
<div>
<div v-for="(stu, i) in stus">
<hr v-if="i !=0">
<p v-for="(v,k) in stu">{{ k }}:{{ v }}</p>
</div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: '循环指令',
arr: [1,2,3,4,5,6],
people: {
name: '兔子',
color: '白',
price: 20
},
stus: [
{
name: 'Json',
age: 25
},
{
name: 'Tom',
age: 8
},
{
name: 'Jerry',
age: 10
},
]
}
})
</script>
4.2 循环指令案例
<body>
<div id="app">
<input type="text" v-model="msg">
<button @click="send_comment">留言</button>
<ul>
<li v-for="(v, i) in comments" @click="deleteMsg(i)">{{ v }}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '',
comments: []
},
methods: {
send_comment(){
if (this.msg){
this.comments.push(this.msg);
this.msg = '';
}
},
deleteMsg(index) {
this.comments.splice(index, 1)
}
}
})
</script>
五、分隔符成员
<body>
<div id="app">
<p>{{ num }}</p>
<p>{ num ]}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 100
},
delimiters: ['{',']}'],
})
</script>
六、计算属性成员
1、computed中定义的是方法属性，data中定义的也是属性，所以不需要重复定义(省略data中的)。
2、方法属性的值来源于绑定的方法的返回值。
3、方法属性必须在页面中渲染后，绑定的方法才会被启用(调用)。
4、方法中出现的所有变量都会被监听，任何变量发生值更新都会调用一次绑定的方法，重新更新一下方法属性的值。
5、方法属性值不能手动设置，必须通过绑定的方法进行设置。
<body>
<div id="app">
<input type="text" v-model="v1">
+
<input type="text" v-model="v2">
=
<button>{{ res }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
},
computed: {
res(){
console.log('从方法被调用了');
return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';
}
}
})
</script>
七、属性监听
1、watch中给已有的属性设置监听方法。
2、监听的属性值一旦发生更新，就会调用监听方法，在方法中完成相应逻辑。
3、监听方法不需要返回值(返回值只有主动结束方法的作用)
<body>
<div id="app">
<p>
姓名<input type="text" v-model="full_name">
</p>
<p>
姓<span>{{ first_name }}</span>
</p>
<p>
名<span>{{ last_name }}</span>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name:'',
first_name:'',
last_name:'',
},
watch: {
full_name() {
if (this.full_name.length === 2){
k_v_arr = this.full_name.split('');
this.first_name = k_v_arr[0];
this.last_name = k_v_arr[1];
}
}
}
})
</script>
八、vue组件
1、组件：由html、css、js三部分组成的独立单位，可以类似于变量，重复使用。
2、组件其实就是vue实例(对象)，一个组件就是一个vue实例(对象)。
3、new Vue()产生的也是实例(对象)，所以也是组件，我们称之为 根组件，一个页面建议只出现一个根组件（项目开发模式下，一个项目建议只出现一个根组件）。
4、组件的html页面结构有 template 实例成员提供， template提供的html结构是用来构虚拟DOM，真实DOM最终会被虚拟DOM替换，根组件一般不提供template，就由挂载点el来提供构建虚拟DOM的页面结构，根组件如果提供了template，还需要设置挂载点作为替换占位，template模板有且只有一个根标签
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
let c1 = '';
new Vue({
el: '#app',
data: {
msg: '123456',
c1: 'red'
},
template: `
<div id='app'>
<p :style="{color: c1}">{{ msg }}</p>
<p @click="clickAction">{{ msg }}</p>
</div>
`,
methods: {
clickAction(){
console.log(this.msg)
}
}
})
</script>
九、子组件
根组件的template，在根组件template中加载的组件，称之为根组件的子组件。
定义子组件的步骤：1.定义组件、2.注册组件、3.使用组件
<body>
<div id="app">
<my-tag></my-tag>
<my-tag></my-tag>
<my-tag></my-tag>
<tag></tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 如何定义子组件：组件就是一个普通对象，内部采用vue语法结构，被vue注册解释后，就会成为vue组件
let myTag = {
template: `
<div>
<h3>子组件</h3>
<p>自定义组件</p>
</div>
`,
};
// // 全局组件，不要注册就可以直接使用
Vue.component('tag', {
template: `
<div>
<h3>全局组件</h3>
<p>我是自定义的全局组件</p>
</div>
`,
});
new Vue({
el: '#app',
computed: {
myTag,
}
})
</script>