Vue(一)初识
本文最后更新于:1 个月前
Vue的意义:将开发者的精力从dom操作解脱,更加专注于数据的操作,
数据驱动,界面的渲染 随着数据的变化自动变化
1.将开发者的精力从dom中解除, 极少做dom操作
2.通过指令(directive)将元素和数据进行绑定
3.数据变化元素界面变化
4.开发者关注数据的变化
配置:Vue官网下载;或npm install vue
js引入包后,实例化Vue对象;
var vm = new Vue({//实例化
el: '#btn',//选择标签(作用区域)
data: {//变量(数据),关联页面的标签
bool: true
},
methods:{//写方法的对象
Fn1(){//方法
},
Fn2(){
}
}
});
渲染数据:
<div id='app'>{{name}}</div>//用插值的方式{{}}来放置data的变量
Vue的数据是双向数据的绑定,数据相互依赖,缺点是源头很难找到,但是提升了数据的感知
指令:
v-if(条件渲染)
<p v-if='bool'></p>//条件满足时显示元素
<p v-else></p>//否则显示元素
<p v-else-if='bool'></p>//条件满足时显示元素
v-for(列表渲染)用for in和for of都行(注意:若遍历数组的时候有重复项,要用一个bind绑定数据否则会出错,如
//数组
<li v-for='item in list'>{{item}}</li>//item是每一项,list是操作的数组(根据list的长度新建li)
<li v-for='(item,index) in list'>{{item}}--{{index}}</li>//item是每一项,index是数组索引,list是操作的数组(根据list的长度新建li)
<li v-for='item in 20'>{{item}}</li>//直接创造20个li
//字符串
<li v-for='item in "hello vue"'>{{item}}</li>//遍历字符串,输出9个li分别是字符每一项
//对象
<li v-for="(val,key,index) in obj">{{key}}:{{val}}---{{index}}</li>//val,key,index分别是对象的每项的属性,属性名,索引
v-click(事件指令)
<button v-on:click="test">点我</button>//类似于onclick,test是Vue实例化中的函数
//v-on:click相当于@click
<a v-on:click.stop="doThis"></a>//取消冒泡事件
<div v-on:click.self="doThat">...</div>//只有点击这个元素自身才会触发
v-bind(属性设置)
<div v-bind:class='state?"red":"green"'>//v-bind:'属性名'='属性值'
//可以写成<div v-bind:class='state?"red":"green"'>
过滤器:(对数据进行处理的函数)
全局过滤器:和局部过滤的区别(局部过滤器只能在当前的组件中使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
{{nowTime|getTime}}
<!-- 这是参数 这是过滤,中间用|隔开-->
</div>
<script>
//全局过滤
Vue.filter('getTime', function (value) {
//中间可以写对数据的处理
return value;
});
var vm = new Vue({
el: '#box',
data: {
nowTime: Date.now()
}
});
</script>
</body>
</html>
局部过滤:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
{{nowTime|getTime}}
<!-- 这是参数 这是过滤,中间用|隔开-->
</div>
<script>
//局部过滤
var vm = new Vue({
el: '#box',
data: {
nowTime: Date.now()
},
filters: {
getTime: function (value) {
//中间可以写对数据的处理
return value;
}
}
});
</script>
</body>
</html>
组件:就是vue的一个拓展实例
全局组件:(整个页面都能使用)
<template id="tp1">
<!-- 组件创建 -->
<div></div>
</template>
var mod = {//组件配置
template: '#tp1',//选中组件
data() {
return {
//写变量
}
},
methods: {
//写函数
}
}
Vue.component('mod', mod);//注册组件
//直接在页面中输入
<mod></mod>
//即可使用
局部组件:(只能在当前选中作用范围中使用)
let box = new Vue({
el: '#box',//当前作用范围是id为box的标签内
data: {
},
methods: {
},
components: {//新建局部组件
mod: ({
template: '#tp1',
data() {
return {}
},
methods: {
}
})
}
});
组件间数据的传输:(类似事件抛发和监听)
父组件传给子组件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<fat></fat>
</div>
<!-- 子组件 -->
<template id="son">
<div>{{callson}}</div>
</template>
<!-- 父组件,父组件中包含子组件 -->
<template id="fat">
<div>
<!-- 当父组件数据改变时,通过将数据保存在自身属性的方法传输 -->
<div>{{fbool}}</div>
<button @click='change'>Change</button>
<!-- 将callson作为属性,附带数据传输给子元素 -->
<son :callson='fbool'></son>
</div>
</template>
<script>
Vue.component('son', {
template: '#son',
data: function () {
return {
}
},
props: ['callson'] //子组件在该处接收数据
});
Vue.component('fat', {
template: '#fat',
data: function () {
return {
fbool: false
}
},
methods: { //点击父组件的按钮时,父组件内数据改变
change() {
this.fbool = !this.fbool;
}
}
});
var box = new Vue({
el: '#box'
});
</script>
</body>
</html>
子组件传给父组件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<fat></fat>
</div>
<template id="son">
<div>
<button @click='change'>Change</button>
<!-- <div>{{sbool}}</div> -->
</div>
</template>
<template id="fat">
<div>
<div>{{fbool}}</div>
<!-- 新建自定义事件,绑定父元素中的函数,传参数写在后面用逗号隔开 -->
<son @callfat='changeF'></son>
<!-- 当子元素被点击时触发父元素的方法 -->
</div>
</template>
<script>
Vue.component('son', {//点击子组件的按钮时,子组件内数据改变
template: '#son',
data: function () {
return {
sbool: false
}
},
methods: {
change() {
this.$emit('callfat');
this.sbool = !this.sbool;
}
}
});
Vue.component('fat', {
template: '#fat',
data: function () {
return {
fbool: false
}
},
methods: {
changeF() {
this.fbool = !this.fbool;
}
}
});
var box = new Vue({
el: '#box'
});
</script>
</body>
</html>
兄弟组件:(结合子传父,父再传子):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<fat></fat>
</div>
<template id="sonf">
<div>
<button @click='change'>Change</button>
<div>First <br>{{sfbool}}</div>
</div>
</template>
<template id="sons">
<div>Second <br>{{callson}}</div>
</template>
<template id="fat">
<div>
<sonf @callfat='changeF'></sonf>
<sons :callson='fbool'></sons>
</div>
</template>
<script>
Vue.component('sonf', {
template: '#sonf',
data: function () {
return {
sfbool: false
}
},
methods: {
change() {
this.$emit('callfat');
this.sfbool = !this.sfbool;
}
}
});
Vue.component('sons', {
template: '#sons',
data: function () {
return {
}
},
props: ['callson']
});
Vue.component('fat', {
template: '#fat',
data: function () {
return {
fbool: false
}
},
methods: {
changeF() {
this.fbool = !this.fbool;
}
}
});
var box = new Vue({
el: '#box'
});
</script>
</body>
</html>
不相邻兄弟组件:
let angel=new Vue();//引入一个Vue实例
angel.$emit('test','Hello')//传送方在函数中抛出事件及数据
angel.$on('test',this.change)//接收方接收事件及数据
动画:
<transition name='aaa'>css中用name值进行动画
若中间有1个以上元素,需要在外面嵌套一个元素,再给该元素加
<div v-if='show'>
<p>Hello</p>
<p>World</p>
</div>
</transition>
.aaa-enter{进入前
opacity: 0;
}
.aaa-enter-to{进入后
opacity: 1;
}
.aaa-enter-active{过渡时间
transition: all 3s;
}
.aaa-leave{离开前
opacity: 1;
}
.aaa-leave-to{离开后
opacity: 0;
}
.aaa-leave-active{过渡时间
transition: all 3s;
}
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!