[JavaScript知识库]vue复习回忆

v-text 类似于innertext?

? ?基本用法? v-text=“一句表达式”

? ? ? ? 一句话表达式

? ? ? ? 变量

? ? ? ? 基本运算

? ? ? ? 三元表达式

{{}}插值语法

? ? ? ? v-text 用于标签上的

? ? ? ? {{}}用于文本区域

? ? ? ? v-text? 它会完成替换标签内容

? ? ? ? {{}}只是部分替换

v-html 类似于innerHtml?

v-on绑定事件

? ? ? ? @简写

@click=‘’btnclick

click=“变量=$event”

? ? ? ? methods：{btnclick（e）{e:事件对象}}

@click。stop：阻止冒泡

@click。prevent：阻止默认事件

@keyup.enter=“按键修饰符

v-bing?

? ? ? ? ：简写

? ? ? ? ：src=”一句话表达式“

? ? ? ? ：class style

? ? ? ? ：class=【class类名】

? ? ? ? ：style={属性名：值}

v-show：控制标签是否显示，实际就是控制dispalay：none

v-if：用于控制标签是否渲染

? ? ? ? 区别：

? ? ? ? ? ? ? ? 多切换场景：v-show

? ? ? ? ? ? ? ? 多条件：v-if

v-for? ? ? ? 列表渲染

v-for=”{item，index）in 数组“ ：key=”index“

? ? ? ? ? ? ? ? item：当前项，index：索引

key值作用：它是它所在dom的唯一标识

? ? ? ? 虚似dom

? ? ? ? ? ? ? ? 使用一个对象表示一个dom

? ? ? ? ? ? ? ? 基本dom操作

? ? ? ? ? ? ? ? width：立马渲染

? ? ? ? ? ? ? ? height：立马渲染

diff算法：新旧dom（虚似dom）对比

找不同的地方渲染

通过虚似dom找不同进行渲染

第二天

@事件名=”方法（参数值，$event）“

? ? ? ? οnclick=”方法（event）“

v-once：只执行一次

v-pre:保持原样输出

v-cloak：在vue实例化完成前可以控制样式处理

? ? ? ? div#app v-cloak

? ? ???[v-cloak]{display:none}

动画? 单元素动画

? ?????????条件：? ? ? ?要有进入，离开动作

? ? ? ? v-if/v-show 路由切换

? ? ? ? 实现

? ? ? ? 用transition包住

? ? ? ? 加入name属性 name=”值xxx“

? ? ? ? ? ? ? ?值是后面css的前缀

? ? ? ? ? ? ? ? .xxx-enter 进入时，希望从什么状态变到正常状态

???????????????? .xxx-leave-to离开时，希望从正常状态变到什么状态

???????????????? .xxx-enter-active, .xxx-leave-active用于承载transition或者animation

多元素动画

? ? ? ? 用于transition-group包住

? ? ? ? 每一个动画元素都要加key值

axios使用

axios({
    url,
    method:
)}.then((res)=>{请求成功}).catch((err)=>{
        请求失败
)}


axios抽离 
login.js
import axios from 'axios'
axios.default.baseURL="基地址"
export function login(data){
    return axios({
        url,method,data
    })
}
使用：
 import {login} from '@/api/login.js'
 methods:{
     loginUser(){
       login(表单数据).then(res=>{}).catch(()=>{})  
     }
 }

第三天?

? 创建脚手架

????????vue create 项目名

? ? ? ? npm run serve

git 使用

????????

git clone 地址  只拉取master分支
 
git checkout -b 分支名 origin/分支名 ：拉取其他远程分支

git add . :将代码提交到暂存

git commit -m”注释“ ：将代码提交到本地仓库

git push 提交

分支处理

git checkout -b 分支名 ：创建并切换到分支

git branch -a 查看本地与远程仓库

git branch -d（D） 分支名：删除分支

git push origin ：分支名：删除远程分支

合并
git merge 分支名：将某分支合并到当前分支

产生冲突原因：你所修改的代码不是在最新代码基础上修改的
冲突解决
        看到： 分支名、|merging
        错误显示出冲突文件
            找到错误文件用vscode打开
                使用当前修改 | 使用远程修改 | 合并使用
     修改完成
    git add .
    git commit -m"注释"
    git push 
 其他解决方案
    备份当前代码
    重新拉一份代码
    把自己写的代码复制过来
    在提交

es6模块化导入

? ? ? ? node

? ? ? ? 导入 require

? ? ? ? 暴露出去? module.exports

es6

? ? ? ? 导入 import

? ? ? ? 暴露export export default

? ? ? ? ? ? ? ? export default 一个文件只能有一个

? ? ? ? ? ? ? ? ? ? ? ? imort 文件名from ”路径“

? ? ? ? ? ? ? ? export 可以有多个

? ? ? ? ? ? ? ? ? ? ? ? import {名字} form 路径????????

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 错误 Object（...） 可能是路径错误

插槽

? ? ? ? 默认插槽

? ? ? ? ? ? ? ? 定义 <slot />? <el-button>提交</el-button>

? ? ? ? ? ? ? ? 使用

????????????????????????

父组件：
    <子组件标签>
    内容
    </子组件标签>

父组件
    <子组件标签>
    <template>
    </template>
    </子组件标签>

父组件
    <子组件标签>
    <template v-slot :default>
        内容
    </template>
    </子组件标签>

????????具名插槽

????????作用域插槽

父子组件传值

? ? ? ? 父传子（父传子属性）

? ? ? ? ? ? ? ? 传：子组件标签 属性名=值

? ? ? ? ? ? ? ? 收：props：[属性名]

? ? ? ? ? ? ? ? 注意点：单向数据流，基本数据类型Number String Boolean null undefined

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 复杂数据类型 Array Objcet Function

? ? ? ? ? ? ? ? ? ?数据存储位置的不一样

? ? ? ? ? ? ? ? ? ? ? ? 基本数据类型存储在栈中

? ? ? ? ? ? ? ? ? ? ? ? 复杂数据类型：数据存储在推，它的引用地址在栈

? ? ? ? ? ? ? ? 子组件内，父组件传入的值钱不可修改（基本数据类型不可修改，复杂数据类型：只要不修改它的引用地址，它的值随便修改，而且修改后父组件会同步修改）

子传父 子触发了父的方法）

? ? ? ? 绑定 子组件标签 @子组件方法名=”父组件方法名“

? ? ? ? 触发：子组件内 this .$emit（子组件方法名，参数值）

第四天

ref 用于原生标签：获取dom?

? ? ? ? div ref =div

? ? ? ? this.$refs.div

用于组件标签：获取组件的实例对象（this）

? ? ? ? son ref=son

? ? ? ? this.$refs.son

父子组件传值

? ? ? ? 父传子（父获取子的实例对象）

? ? ? ? ? ? ? ? son ref = son

? ? ? ? this.$refs.don===son组件的实例化对象（this）

? ? ? ? 子传父（子获取父的实例对象）

? ? ? ? 子组件内：this.$parrent===父组件的实例对象

? ? ? ? ? ? ? ? 注意点

? ? ? ? ? ? ? ? son.vue

? ? ? ? ? ? ? ? ? ? ? ? this.$parent===el card的实例对象

第五天 生命周期

? ? ? ? beforecreate 创建前，实例化还没有完成，所以它不能访问data属性与methods方法

? ? ? ? 可以调用接口，调用完成它也一定可以拿到data属性与methods方法

? ? ? ? created 创建后实例化已完成，可以访问data属性与methods方法，但是还是不能访问vue渲染后的dom用于进入页面接口请求

? ? ? ? beformount渲染前，读取了需要渲染的html内容，解析相应的html{{}} v-model

? ? ? ?mounted渲染后，将解析后的html渲染出来，它是第一个可以访问vue渲染后的dom的生命周期：进入页面dom操作

? ? ? ? beforeupdate更新前，vue页面中使用的相关数据已修改，但是页面还没有完成相应渲染

? ? ? ? updated更新后，vue页面中使用的相关数据已修改，且已完成相应渲染

? ? ? ? beforeDestroy 销毁前都可以访问data和methods数据，一般用于善后的（setnterval，scroll..)

? ? ? ? destroyed销毁后，可以访问data属性与methods方法，但是不能访问vue渲染后的dom

? ? ? ? nextTick 作用等他前面的数据渲染完成后再在执行它内部的回调函数方法

let a=1
setTimeout(()=>{
   let a=3
},0)
this.$nextTick(()=>{
    console.log(a)//2
})
let a=2

scoped:只能用于当前组件和子组件最外层

? ? ? ? innerHTML的样式，加了scoped能管到吗？

? ? ? ? div v-html=“富文本“

? ? ? ? scoped 。h3{color：red}

? ? ? ? 看到到的都可以管到，看不到的都管不到

建议用 ：：v-deep

第六天 组件-v-model

父传子

? ? ? ? 子组件标签 ：value=”父组件属性“

? ? ? ? 子组件内接收：props[value]

? ? ? ? 注意点：单向数据流（栈不可以修改，推可以随便修改）

? ?子传父

? ? ? ? 子组件标签 @ input=”父组件属性=$event"

? ? ? ? 子组件内触发父组件方法

? ? ? ? ? ? ? ?this.$emit(input,实参)

? 简写

? ? ? ? ? 父组件内子组件标签上简写

? ? ? ? ? ? ? ? 子组件标签：value=“父组件属性” @input=“父组件属性=$event”

? ? ? ? ? ? ? ? 子组件标签 v-model= “父组件属性”

? ? ? ? ? ? ? ? 子组件内：

? ? ? ? ? ? ? ? ? ? ? ? porps：[value]

? ? ? ? ? ? ? ? ? ? ? ? this.$emit(input,实参)

? ? ? ? ? ? ? ? ? ? ? ? model:{prop:value,event:input)

计算属性

? ? ? ? 使用场景;依赖一个或者多个值生产一个新的值

? ? ? ? 特点：它产生的新值会缓存，依赖的值变化了它会实时变化

computed:{
    方法名(){
        return 值
    }，
    方法名:{
        get(){
            return 值
        },
        set(value){
            ....
        }
    }
    
}
h3  {{方法名}}
div  {{方法名}}
js    方法名=1

? ? ? 创建项目注意点”

cnpm ：淘宝镜像像工具

npm install -g cnpm --

registry=https://registry.npm.taobao.org

yarn ：npm工具

? ? ? ? 资源下载时，如果以前下载过，它不用重新下载，直接找缓存使用

? ? ? ? 使用 npm i yarn -g

? ? ? ? 安装插件

? ? ? ? npm i axois/ npm ununstall axios

? ? ? ? yarn add axios / yarn remove axios

? ? ? ? 全局插件 安装

? ? ? ? ? ? ? ? npm i

? ? ? ? ? ? ? ? yarn

运行项目

? ? ? ? npm run serve?

? ? ? ? yarn serve

注意 如果使用yarn安装插件，就别再使用那npm 如果二个一起安装可能项目会损坏运行不起来

路由? ? 路由基本使用

安装 yarn add vue-router

? ? ? ? 导入

? ? ? ? ? ? ? ? src/router/index.js

? ? ? ? ? ? ? ? import VueRouter from vue-router

? ? ? ? 注册

? ? ? ? import vue from 'vue'

? ? ? ? Vue.use(VueRouter)

实例化

const router =new VueRouter({routes"[]})

暴露出去

? ? ? ? export default router

在mian.js中挂载

import router from '@router/index.js

new Vue({router})

路由传参? 基本传参

? ? ? ? this.$router.push('/路径？参数名=值）

? ? ? ? this.$router.push({path:'/路径，query：{参数名：值}）

? ? ? ? this.$router.push({path:'/路径，params：{不支持这种写法}}

? ? ? ? 收

? ? ? ? ? ? ? ? 路径所在对应组件来接受

? ? ? ? ? ? ? ? this.$route.query.参数名

动态路由

应用场景：新闻列表

? ? ? ? 点击列表看详情

配置路由

{path：'/xxx/:id'

componet:xxx

}

传? this.$router.push('/xxx/'123)

收? this.$route.params.id===123

vuex 共享状态管理（共享数据管理）

????????它管理的数据都是响应式

? ? ? ? 不同组件间的传参

基本使用

src/store/index.js

? ? ? ? 安装yarn add vuex npm i vuex

? ? ? ? 导入 inport Vuex from vuex

注册

? ? ? ? import Vue form vue

? ? ? ? Vue.use（Vuex）

实例化

? ? ? ? const store =new Vuex.store({

? ? ? ? ? ? ? ? ? ? ? ? state:{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //存储共享数据

? ? ? ? ? ? ? ? ? ? ? ? }

}）

暴露出去? ?export default store

挂载到main.js

? ? ? ? import store from @/store

? ? ? ? new Vue ({store})

state 使用

? ? ? ? this.$store.state 属性名可以直接访问vue证state存储的属性。它的值是响应式的

mutations使用? 作用 修改state数据的唯一途径

定义

? ? ? ? mutations：{

? ? ? ? ? ? ? ? 方法名（state,value){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? state.属性名=value

}

}

调用mutations方法

? ? ? ? this.$store.commit (mutations方法名：参数名