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>
computed:{
jisuan(){
return ‘hello World'
}
}
计算属性和实例方法的区别：
1.计算属性没有括号，所以不能传参，而方法可以
2.计算属性有缓存，实例方法没有缓存。
述computed和watch的使用场景
computed:
当一个属性受多个属性影响的时候就需要用到computed
watch:
当一条数据影响多条数据的时候就需要用watch
3.过滤器filters
data为默认参数 之后为传的参数，可以传多个。
{{ num | uppirce(data,str)}}
filters:{
uppirce(data){
return ‘$’+data
}
}
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)
}
}
})
5.Component 注册组件
可以封装可以重复使用的代码,通常一个组件就是一个功能体，方便与在多个地方使用。
<my_list title="hello World"></my_list>
Vue.component("my_list", {
template: `<p>{{title}}</p>`, //插件内容
props: ['title'] //接收参数
})
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>
7.vue常用的事件修饰符
.prevent，阻止默认行为
.stop， 阻止事件冒泡
.capture 冒泡改为捕获
.self 只处理自己身上的事件，不理会冒泡或捕获
.once 一次性事件，只执行一次
.native 触发原生的事件（有时发现用一些第三方的组件库时，例如一个封装好的button按钮，绑定点击事件却没有任何作用，这时便需要加 .native）|在组件中事件不生效。
8.组件 component
全局
Vue.component('myDiv', {
template: "<h1>我就是一个小组件</h1>"
})
局部
Vue.component("my_foot", {
template: `<div>哈哈</div>`,
data(){
return{}
}
})
new Vue({
el: "#app",
components: {
'div1': {
template: {
my_foot,
}
}
}
})
9.prop父传子
父级中：
<myLeft num='num'></myLeft>
子级接受
设置传值的类型:
required:必须传的值，default:默认值
10.$emit子传父
在子级中
组件名字：mychild2
<p @click='give()'></p>
methods: {
give() {
var a = '发送'
this.$on('give', a)//监听事件
this.$emit('give', a)//触发事件 2种则取一种即可
}
},
在父级中
<mychild2 @give='give'></mychild2>
methods: {
give(val) {
console.log(val)
}
}
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>
在子级中
var child = {
template: `
<div>
<slot name='a'></slot>
</div>`
}
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>
渲染列表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>
Script中
var count = 0
export default {
data() {
return {
list: [],
}
},
methods: {
handleAdd() {
this.list.push({
id: count++,
title: 'hello vue',
})
},
},
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
}
17.路由router
配置
在router文件下的 index.js中
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = []
const router = new VueRouter({
routes,
})
在main.js中
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: (h) => h(App),
}).$mount('#app')
使用路由
在index.js中注册路由
import HeadOne from './HeadOne'
const routes = [
{
path: '/headone',
name: 'headones',
components: HeadOne,
},
]
2级路由(子路由)
const routes = [
{
path: '/headone',
name: 'headones',
components: HeadOne,
children: [
{
path: '/headtwo',
path: 'headtwo',
name: HeadTwo,
},
],
},
]
默认显示页面redirect
const routes = [
{
path: '/headone',
name: 'headones',
components: {
default: HeadOne,
},
redirect: '/headone',
},
]
使用/显示
to 为路由下path的路径 tag为改变标签默认为a标签
<router-link to="/testroute" tag=’li’>xxx</router-link>
显示路由组件
<router-view></router-view>
active-class属性
选中时的属性
<router-link active-class="red"></router-link>
//css中
.red {
color: red;
}
router-link-exact-active设置当前active的属性
.router-link-exact-active {
background: pink;
}
路由传参
在父组件中
<router-link tag="li" to="/home2/789">
home2
</router-link>
在router下的index.js中
{
path: '/home2/:id',
name: 'home2',
component: () => import('../pages/zuo1/home2.vue'),
}
在子组件中
mounted() {
console.log(this.$route.params.id)
},
编程式路由
<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('') //替换
}
路由守卫
全局守卫
router.beforeEach((to, from, next) => {
next()
})
全局后置首位
router.afterEach((to, from, next) => {
console.log('最后了')
})
局部守卫
{
path: '/mains/main2',
name: 'main2',
component: () => import('../router/mains/main2. vue'),
beforeEnter: (to, from, next) => {
console.log('进入守卫')
next()
},
},
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>
methods: {
sub() {
this.$store.commit('sub')
},
}
mutations: {
sub(state) {
if (this.state.num > 0) this.state.num--
},
},
this.$store.dispatch
在vue中添加事件
<div class="SubNumber">
<el-button @click="sub()">SubNumber-</el-button>
</div>
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--
},
},
简写
Index.js中
state: {
a: 0,
},
Vue页面中
<div>
{{ a }}
</div>
Vue script中
computed: {
...mapState({
a: (state) => state.a + 1,
}),
19.this.$nextTick(() => {})
你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$ nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功
this.$nextTick(() => {
alert('')
})
脚手架引入常用的插件
16.1脚手架引入animate.css
1.下载
npm install animate.css
2在main.js中
import animated from 'animate.css'
Vue.use(animated)
3.使用
<transition
name="fade"
enter-active-class="bounce_enter"
leave-active-class="bounce_leave"
>
<div class="putImg" :is="str"></div>
</transition>
.bounce_enter {
animation: tada 1s;
}
.bounce_leave {
animation: bounceOutDown 1s;
}
16.2脚手架引入jq
npm install jquery --save-dev
在package.json中
"env": {
"node": true,
"jquery": true
},
"rules": {
"no-unused-vars": "off"
}
16.3 element-ui
官方文档：https://element-plus.org/#/zh-CN/component/installation
1.下载
npm i element-ui -S
2.在main.js中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
深度修改element-ui样式
1.>>>
.agree-rules-checkbox >>> .el-checkbox__inner {
background-color: red;
}
2./deep/
<style scoped lang="scss">
.form {
background-color: #fff;
/deep/ .list{
font-size: 18px;
}
}</style>
16.4 axios
1.下载
npm install --save axios
npm install --save vue-axios
2.如果是vue_cli3.0 配置方式：（根目录下面创建vue.config.js）
然后写代码：（pathRewrite不能忘记了）
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://suggestion.baidu.com/',
ws: true,
changeOrigin: true,
pathRewrite: {'^/api' : ''}
}
}
}
}
16.5 echars
https://blog.csdn.net/u013141712/article/details/115544300
安装
npm install echarts -S
或者使用国内的淘宝镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用
cnpm install echarts -S
在main.js引入echarts
var echarts = require('echarts') //1
import * as echarts from 'echarts';//2 1与2选择一个引入即可
Vue.prototype.$echart = echarts
测试
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],
},
],
})
},
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获取到该标签
}
}
输出
v-pre跳过编译
跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑
<span v-pre>{{ this will not be compiled }}</span>
//显示的是{{ this will not be compiled }}
<span v-pre>{{msg}}</span>
//即使data里面定义了msg这里仍然是显示的{{msg}}
v-cloak(解决屏幕闪动
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。
我们可以使用 v-cloak 指令来解决这一问题。(解决屏幕闪动问题)
v-once
msg不会改变,只会在页面加载的时候，加载，不会被更新
796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
