菜鸟追梦旅行

这个屌丝很懒，什么也没留下！

热门标签

vue笔记总结_vue valueof

作者：菜鸟追梦旅行 | 2024-05-22 08:44:49

踩

vue valueof

0.数组字符串的操作

0-1.数组

Join(‘’) / toString() ----数组转字符串
splice(index,n) ---- 删除
pop尾部删除 push尾部添加
shift头部删除 unshift 头部添加
sort()数组排序 reverse()数组反转
concat（）合并两个或多个数组/字符串
数组去重4方法
1，includes 包含
2，indexOf
3，lastIndexOf 检测数组的首次和最后一次出现的位置返回值为-1
4，new Set

0-2.字符串

.charAt(index) 根据位置读取字符串
转大小写：.toLowerCase *.toUpperCase
*.concat（）合并两个或多个数组/字符串
*.replace（）替换
截取3方法
*.slice（开始坐标，结束坐标） *.subStr(开始坐标，长度) *.subString(开始坐标，结束坐标)
*.split() 方法用于把一个字符串分割成字符串数组。
*.small()字体变小
*.big()变大
*.startsWith(以什么开头)
*.endsWith（以什么结尾）
*.includes（）是否包含
*.repeat() 重复
*.valueof() 取字符串里的值

1.Mvvm模式

M-(模型层)数据 V-(视图层) 页面 Vm（传递者）-页面与js代码的双向绑定
渲染性能高，加载速度快。

2.computed计算属性

<div>
	{{jisuan}}
</div>
1
2
3

computed:{
	jisuan(){
		return ‘hello World'
	}
}
1
2
3
4
5

计算属性和实例方法的区别：

1.计算属性没有括号，所以不能传参，而方法可以
2.计算属性有缓存，实例方法没有缓存。
述computed和watch的使用场景
computed:
　　　　当一个属性受多个属性影响的时候就需要用到computed
watch:
　　　　当一条数据影响多条数据的时候就需要用watch

3.过滤器filters

data为默认参数之后为传的参数，可以传多个。

	{{ num | uppirce(data,str)}}
1

filters:{
	uppirce(data){
		return ‘$’+data
	}
}
1
2
3
4
5

4.watch监听

<body>
	<div id="app">
		<input type="text" v-model='num'>
		{{num}}
	</div>
</body>
<script src="../lib/vue@2.5.16/vue.js"></script>
<script>
new Vue({
	el: "#app",
	data: {
		num: 0
	},
	watch: {
		num(newVal, oldVal) {
			console.log('新的值为' + newVal, "旧值为" + oldVal)
		}
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5.Component 注册组件

可以封装可以重复使用的代码,通常一个组件就是一个功能体，方便与在多个地方使用。

<my_list title="hello World"></my_list>
1

Vue.component("my_list", {
template: `<p>{{title}}</p>`, //插件内容
props: ['title'] //接收参数
})
1
2
3
4

6.directive自定义指令

    <div id="app">
        <li v-for="(item,index) in arr">
             <span v-color="index">{{item}}</span>
        </li>      	 
    </div>
<script>
    Vue.directive('color', (e, obj) => {
        console.log(e, obj)
// e为自己本身 obj为传的参数对象 
    })
    new Vue({
        el: "#app",
        data: {
            arr:[1,2,3,4]
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这里插入图片描述

7.vue常用的事件修饰符

.prevent，阻止默认行为
.stop，阻止事件冒泡
.capture 冒泡改为捕获
.self 只处理自己身上的事件，不理会冒泡或捕获
.once 一次性事件，只执行一次
.native 触发原生的事件（有时发现用一些第三方的组件库时，例如一个封装好的button按钮，绑定点击事件却没有任何作用，这时便需要加 .native）|在组件中事件不生效。

8.组件 component

全局

Vue.component('myDiv', {
template: "<h1>我就是一个小组件</h1>"
})
1
2
3

局部
    Vue.component("my_foot", {
        template: `<div>哈哈</div>`,
		data(){
			return{}
		}
    })

new Vue({
	el: "#app",
	components: {
		'div1': {
			template: {
			my_foot,
			}
		}
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

9.prop父传子

父级中：

  <myLeft num='num'></myLeft>
1

子级接受
在这里插入图片描述
设置传值的类型:

required:必须传的值，default:默认值

10.$emit子传父

在子级中
组件名字：mychild2

  <p @click='give()'></p>

     methods: {
            give() {
                var a = '发送'
                this.$on('give', a)//监听事件
                this.$emit('give', a)//触发事件 2种则取一种即可
            }
        },
1
2
3
4
5
6
7
8
9

在父级中

 <mychild2  @give='give'></mychild2>
    methods: {
            give(val) {
                console.log(val)
            }
	}
1
2
3
4
5
6

11.$parent子传父

父级传送过来信息，通过子级修改，返回父级

this.$parent.msg=‘发送’

12.slot插槽

1.插槽内可以是任意内容
2.直接写slot是显示所有插槽的内容
3.父级中写slot=’a’ ，可以显示插槽内名字为a的内容
在父级中

    <div id="app">
        <child>
            <p slot='a'>我要跳槽</p>
            <p>我也想跳槽</p>
        </child>
    </div>
1
2
3
4
5
6

在子级中

    var child = {
        template: ` 
        <div>
            <slot name='a'></slot>
        </div>`
}
1
2
3
4
5
6

2.插槽也可以用来传输父页面data中的数据

在这里插入图片描述

3.作用域插槽

子传父
子组件传送数据
在这里插入图片描述

父组件在插槽的标签中写入

13.生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程――例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
钩子函数
beforeCreate（创造前）模板还没有渲染。不能访问初始（data,methods中的）数据，不能解析花括号{{}}中的内容。

created （创建）可以访问并修改初始（data,methods中的）数据，不能解析花括号{{}}中的内容。（还没有挂载，会报错）
beforeMount（载入前）可以访问并修改初始（data,methods中的）数据，不能解析花括号{{}}中的内容。（挂载）
mounted（载入）可以访问并修改初始（data,methods中的）数据，可以解析花括号{{}}中的内容。适合做ajax请求
beforeUpdate（更新前）页面显示数据还是旧的，此时data数据是最新的
updated（更新）事件执行的时候，页面和data数据保持一致(可以监听数据)
beforeDestroy(摧毁前) data,methods，过滤器等还处于可用状态，
destroyed（摧毁） data,methods，过滤器等所用方法都不可用。

在这里插入图片描述
生命周期面试题

1、什么是vue生命周期？
答：Vue 实例从创建到销毁的过程，就是生命周期。
也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，
我们称这是 Vue 的生命周期。

2、vue生命周期的作用是什么？
答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3、vue生命周期总共有几个阶段？
答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

4、第一次页面加载会触发哪几个钩子？
答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

5、DOM 渲染在哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。

13.:is动态组件

显示隐藏通过切换data中的str切换组件
在这里插入图片描述

14.keep-live

包裹组件,具有缓存作用，我们每次切换组件都会重新创建一次组件，使用keep-alive之后，会将创建过的组件保存在内存中，以后使用的时候直接使用，而不会每次重新创建
缓存路由组件缓存路由组件对象，可提高用户体验数据实时性比较高时不建议使用

15.动画transition

用法
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
在这里插入图片描述

<template>
    <div class="tabs">
        <div class="put_top">
            <button @click="changeTab('tab1')">1</button>
            <button @click="changeTab('tab2')">2</button>
            <button @click="changeTab('tab3')">3</button>
        </div>
            <transition name="fade">
                <div class="putImg" :is="str"></div>
            </transition>
      </div>
</template>

<script>
import tab1 from '@/pages/tabBar/tab1'
import tab2 from '@/pages/tabBar/tab2'
import tab3 from '@/pages/tabBar/tab3'
export default {
    data() {
        return {
            str: 'tab1',
        }
    },
    methods: {
        changeTab(val) {
            this.str = val
        },
    },
    components: { tab1, tab2, tab3 },
}
</script>

<style lang="less">
.put_top button {
    width: 100px;
    height: 30px;
    background: #fe5e1a;
    border-radius: 15px 0 15px 0;
    border: none;
    outline: none;
    color: #fff;
    margin: 2px;
}
.put_top button:hover {
    opacity: 0.8;
    cursor: pointer;
}
.putImg {
    width: 800px;
    overflow: hidden;
    img {
        width: 100%;
    }
}
.fade-enter-active {
    transition: all 1s;
}
.fade-enter {
    opacity: 0;
    transform: translateX(-300px);
}
.fade-enter-to {
    opacity: 1;
    transform: translateX(0);
}
.fade-leave,
.fade-leave-to {
    opacity: 0;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

渲染列表transition-group
template中

            <transition-group>
                <div v-for="item of list" :key="item.id">
                    {{ item.title }}-{{ item.id }}
                </div>
            </transition-group>
            <button @click="handleAdd">Add</button>
1
2
3
4
5
6

Script中

var count = 0
export default {
    data() {
        return {
            list: [],
        }
    },
    methods: {
        handleAdd() {
            this.list.push({
                id: count++,
                title: 'hello vue',
            })
        },
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

16.Object.defineProperty监听数据的get,set来做一些我们想去做的事情

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

  <p id='p'></p>
    <input type="text" id="inp">

 let p = document.getElementById("p")
    let inp = document.getElementById("inp")
    var obj = {
        name: '你好，世界！'
    }
    inp.value = obj.name

    Object.defineProperty(obj, 'name', {
        set: function (v) {
            p.innerHTML = v

        },
    })

    inp.oninput = function () {
        obj.name = inp.value
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

17.路由router

配置

在router文件下的 index.js中

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = []
const router = new VueRouter({
    routes,
})
1
2
3
4
5
6
7

在main.js中

import router from './router'
Vue.config.productionTip = false
new Vue({
    router,
    render: (h) => h(App),
}).$mount('#app')
1
2
3
4
5
6

使用路由

在index.js中注册路由

import HeadOne from './HeadOne'
const routes = [
    {
        path: '/headone',
        name: 'headones',
        components: HeadOne,
    },
]
1
2
3
4
5
6
7
8

2级路由(子路由)

const routes = [
    {
        path: '/headone',
        name: 'headones',
        components: HeadOne,
        children: [
            {
                path: '/headtwo',
                path: 'headtwo',
                name: HeadTwo,
            },
        ],
    },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

默认显示页面redirect

const routes = [
    {
        path: '/headone',
        name: 'headones',
        components: {
            default: HeadOne,
        },
        redirect: '/headone',
    },
]
1
2
3
4
5
6
7
8
9
10

使用/显示

to 为路由下path的路径 tag为改变标签默认为a标签

<router-link to="/testroute" tag=’li’>xxx</router-link>
1

显示路由组件

<router-view></router-view>
1

active-class属性
选中时的属性

<router-link active-class="red"></router-link>

//css中

.red {
    color: red;
}
1
2
3
4
5
6
7

router-link-exact-active设置当前active的属性

.router-link-exact-active {
    background: pink;
}
1
2
3

路由传参

在父组件中

<router-link tag="li" to="/home2/789">
	home2
</router-link>
1
2
3

在router下的index.js中

   {
        path: '/home2/:id',
        name: 'home2',
        component: () => import('../pages/zuo1/home2.vue'),
    }
1
2
3
4
5

在子组件中

 mounted() {
        console.log(this.$route.params.id)
    },
1
2
3

编程式路由

<button @click='back()'>回退</button>
    back(){
            this.$router.back()

    }
<button @click='goBtn()'>下一级</button>
    goBtn(){
            this.$router.go(1)
    }
<button @click='pushBtn()'>下一级</button>
    pushBtn(){
         this.$router.push('')  //填写路径 跳转 
	  	 this.$router.push(   //传参
			{
				name: 'mains',
				params: { userids: this.userid },
			})
   }
<button @click='replaceBtn()'>下一级</button>
    replaceBtn(){
            this.$router.replace('')   //替换
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

路由守卫

全局守卫

router.beforeEach((to, from, next) => {
    next()
})
1
2
3

全局后置首位

router.afterEach((to, from, next) => {
    console.log('最后了')
})
1
2
3

局部守卫

      {
                path: '/mains/main2',
                name: 'main2',
                component: () => import('../router/mains/main2.	                          vue'),
                beforeEnter: (to, from, next) => {
                    console.log('进入守卫')
                    next()
                },
            },
1
2
3
4
5
6
7
8
9

18.vueX

页面从store下的index.js的state中获取数据
{{ this.$store.state.num }}

1.state 存放数据类似于vue中的data
2.getters 计算属性
3.mutations修改参数的方法
4.actions间接操作需要用commit传递给mutations

this.$store.commit


   <div class="SubNumber">
       <el-button @click="sub()">SubNumber-</el-button>
   </div>
1
2
3
4

methods: {
 sub() {
            this.$store.commit('sub')
        },
 	 }

    mutations: {
         sub(state) {
            if (this.state.num > 0) this.state.num--
        },
    },
1
2
3
4
5
6
7
8
9
10
11

this.$store.dispatch

在vue中添加事件

   <div class="SubNumber">
       <el-button @click="sub()">SubNumber-</el-button>
   </div>
1
2
3

methods: {
        sub() {
            this.$store.dispatch('sub')
        },
    },
//在store下的index.js中的actions中接受
  actions: {
         sub(send) {
            send.commit('SUB')
        },
    },
//使用commit发送给mutations并修改state中的值
    state: {
        num: 0,
    },
   
mutations: {
        SUB(state) {
            if (this.state.num > 0) this.state.num--
        },
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

简写
Index.js中

    state: {
        a: 0,
    },
1
2
3

Vue页面中

  <div>
        {{ a }}
    </div>
1
2
3

Vue script中

   computed: {
        ...mapState({
            a: (state) => state.a + 1,
        }),
1
2
3
4

19.this.$nextTick(() => {})

你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$ nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功

this.$nextTick(() => {
	alert('')
})
1
2
3

脚手架引入常用的插件

16.1脚手架引入animate.css

1.下载

npm install animate.css
1

2在main.js中

import animated from 'animate.css'
Vue.use(animated)
1
2

3.使用

  	         <transition
                name="fade"
                enter-active-class="bounce_enter"
                leave-active-class="bounce_leave"

            >
                <div class="putImg" :is="str"></div>
            </transition>
1
2
3
4
5
6
7
8


.bounce_enter {
    animation: tada 1s;
}
.bounce_leave {
    animation: bounceOutDown 1s;
}
1
2
3
4
5
6
7

16.2脚手架引入jq

npm install jquery --save-dev
1

在package.json中

     "env": {
            "node": true,
            "jquery": true
        },
    "rules": {
            "no-unused-vars": "off"
     }
1
2
3
4
5
6
7

16.3 element-ui

官方文档：https://element-plus.org/#/zh-CN/component/installation
1.下载

npm i element-ui -S
1

2.在main.js中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
1
2
3

深度修改element-ui样式
1.>>>

.agree-rules-checkbox >>> .el-checkbox__inner {
    background-color: red;
}
1
2
3

2./deep/

<style scoped lang="scss">
　　.form {
　　　　background-color: #fff;
　　　　/deep/ .list{
　　　　　　font-size: 18px;
　　　　}
　　}</style>
1
2
3
4
5
6
7

16.4 axios

1.下载

npm install --save axios
npm install --save vue-axios
1
2

2.如果是vue_cli3.0 配置方式：（根目录下面创建vue.config.js）

然后写代码：（pathRewrite不能忘记了）

 module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://suggestion.baidu.com/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {'^/api' : ''}
      }
    }
  }
}
 
1
2
3
4
5
6
7
8
9
10
11
12
13

16.5 echars

https://blog.csdn.net/u013141712/article/details/115544300
安装

npm install echarts -S
1

或者使用国内的淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org
1

使用

cnpm install echarts -S
1

在main.js引入echarts

var echarts = require('echarts') //1
import * as echarts from 'echarts';//2    1与2选择一个引入即可
Vue.prototype.$echart = echarts
1
2
3

测试

   drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                title: {
                    text: 'ECharts 入门示例',
                },
                tooltip: {},
                xAxis: {
                    data: [
                        '衬衫',
                        '羊毛衫',
                        '雪纺衫',
                        '裤子',
                        '高跟鞋',
                        '袜子',
                    ],
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20],
                    },
                ],
            })
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

vue扩充

$ref获取dom

可以通过this.$refs获取到该标签

<p ref="abc">0</p>
<p ref="cartoon">0</p>
  <button @click="show">显示</button>

    mounted() {
        console.log(this.$refs.abc)
	},
     methods:{
        show:function(){
             console.log(this.$refs.cartoon.);
              // 可以通过this.$refs获取到该标签
             }
       }    
1
2
3
4
5
6
7
8
9
10
11
12
13

输出

v-pre跳过编译

跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑

<span v-pre>{{ this will not be compiled }}</span>
//显示的是{{ this will not be compiled }}
<span v-pre>{{msg}}</span>     
//即使data里面定义了msg这里仍然是显示的{{msg}}
1
2
3
4

v-cloak(解决屏幕闪动

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。
我们可以使用 v-cloak 指令来解决这一问题。(解决屏幕闪动问题)

v-once

msg不会改变,只会在页面加载的时候，加载，不会被更新

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/607453