|
该文章仅供个人复习，不是重点没有代码示例，代码是在脚手架中运行。
一、基础
1、 生命周期
| vue的生命周期 | 描述 |
|---|
| beforCreate | 这里是在初始化数据之前 | | created | 初始化数据之后 | | beforeMount | 数据和html合并了，但是没有开始渲染 | | mounted | 渲染完成之后 | | beforeUpdate | 不知道 | | updated | 不知道 | | beforeDestroy | 不知道 | | destroyed | 不知道 |
2、 基本指令
| 指令 | 描述 |
|---|
| v-if 和 v-else | 逻辑渲染 | | v-text | 文本渲染，缩写是{{}} | | v-once | 文本渲染，只渲染一次 | | v-for | 批量渲染 | | v-bind 或 : | 绑定标签的属性，支持对象写法或数组写法，缩写是: :class="[类名,{'类名':boolean}]" | | v-model | 双向绑定，如：<input type="text" v-model="a"/> 当输入值的时候，data中的a也会随之input框中的值变化 | | v-on 或 @ | 事件，如：@click="函数名 | ()=>{}" | | v-show | 显示或者隐藏，内部其实是一个display |
二、组件
组件基础----->Vue对象的参数：data、watch、filters、computed、methods、components、生命周期钩子函数…下面一一介绍
1、data
1、data必须是一个函数，data是vue注重数据渲染中的数据
使用：----其实也看不出什么
new Vue({
data(){
return{
number: 1
}
}
})
2、watch
2、侦听属性watch，它会观察并响应数据--至于响应数据我还不理解是什么
new Vue({
watch:{
data中的名称:{
hander(newval,odlval){
},
deep:true|false,
immediate: true|false
}
},
watch:{
data中的名称(newval,odlval){}
}
})
3、过滤器filters
3、过滤器filters，其实就是一个模板，比如：我需要在每一个数字上面加上一个元。
<template>
<div @click="number++" style="color: white">
{{number | money}}
</div>
</template>
<script>
export default {
data(){
return{
number: 1
}
},
filters:{
money(num){
return num+'元'
}
}
}
</script>
4、计算属性computed
4、计算属性computed，它可以监听到数据的变化，可以完成逻辑运算、算术运算..，和函数调用，最后只要返回一个结果就行了。
那这样描述跟侦听属性都没什么区别了呢，侦听属性也可以做运算和调用函数啊。
这里我主要觉得区别最大的是：
1、侦听属性只能侦听一个data中的属性，然后计算属性是可以侦听多个属性。
2、然后侦听属性是可以返回上一个值和新的值，计算属性没有
<template>
<div @click="count++" style="color: white">
{{h | money}}
</div>
</template>
<script>
export default {
data(){
return{
number: 10,
count: 10
}
},
filters:{
money(num){
return num+'元'
}
},
computed:{
h:function(){
return this.number*this.count
}
}
}
</script>
5、methods
5、methods这个是一堆函数的集合，在里面写函数用的
6、components子组件
6、components子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<a-b></a-b>
</div>
<template id="a">
<div>{{h}}</div>
</template>
<script>
let asse = {
template: '#a',
data(){
return {
number: 10,
count: 10
}
},
computed:{
h(){return this.number * this.count}
},
filters:{
money(val){return val + '元'}
}
}
new Vue({
el: '#app',
data(){return{}},
components:{'aB': asse}
})
</script>
</body>
</html>
7、created生命周期
7、生命周期created钩子函数一搬会在请求后端数据的时候拿来做初始化，数据用的，因为这个时候数据和view是没有进行合并的。
三、不知道如何命名
1、父组件向子组件传值
下面介绍 父组件如何向子组件传值，主要是用到了prop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<a-b number="1" ></a-b>
</div>
<template id="a">
<div>
<div>{{number}}</div>
</div>
</template>
<script>
let asse = {
template: '#a',
props:['number']
}
new Vue({
el: '#app',
data(){
return{}
},
components:{
'aB': asse
}
})
</script>
</body>
</html>
2、子组件向父组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<a-b number="1" @add="e => getNumber(e)"></a-b>
</div>
<template id="a">
<div>
<div>{{number}}</div>
<button @click="addNumber">加一</button>
</div>
</template>
<script>
let asse = {
template: '#a',
props:['number'],
data(){
return {num: this.number}
},
methods:{
addNumber(){
this.num++
this.$emit('add',this.unm)
}
}
}
new Vue({
el: '#app',
components:{'aB': asse},
methods:{
getNumber(e){console.log(e)}
}
})
</script>
</body>
</html>
|