VUE2项目中的命令 事件 插槽 VUEX 组件 属性

创建项目

cnpm i @vue/cli@4.5.13 -g 安装vue的脚手架 -g全局安装

vue create 项目名称 创建vue项目

Babel：用于将 ES6+ 语法转换为向后兼容的 JavaScript 语法。

TypeScript：一种静态类型的 JavaScript 超集，提供更好的类型检查和代码提示功能。 Progressive Web App (PWA) Support：用于将 Vue 应用程序转换为渐进式 Web 应用程序，可以在离线状态下缓存数据和页面。

Router：Vue 官方提供的路由管理插件，用于实现页面之间的导航。

Vuex：Vue 官方提供的状态管理插件，用于集中管理应用程序的数据和状态。 CSS Pre-processors：用于将 CSS 的预处理语言（如 Sass、Less 等）转换为浏览器可以解析的 CSS。 Linter / Formatter：用于规范化代码风格和检测代码错误的插件，包括 ESLint、Prettier 等。

Unit Testing：用于编写和运行单元测试的插件，包括 Jest、Mocha 等。

E2E Testing：用于编写和运行端到端测试的插件，包括 Cypress、Nightwatch 等。

点击文件-->首选项-->设置-->文本编辑-->格式化中的

新建一个css页面鼠标在里面点击右键找到 使用...格式化文档

然后在css中测试 Ctrl + S 会不会更改格式

就可以删除css了

cd vuepro01 先进入文件夹

npm run serve 运行文件

文件目录介绍

public中index.html是程序的入口

assets目录一般方静态文件

components:放和路由没有关系的组件 一般放的是封装的组件

App.vue根组件相当于外层最大的盒子

src中有一个main.js JS程序的入口

router 路由配置

view/page发和路由有关系的组件

npm run build 进行压缩

Helloworld.vue只是一个案例 项目中用不到 可以删除

将App.vue多余的部分删除

该样式快捷键 vb 回车

templae标签内只能有一个最外层的大盒子

JS语言必须写在export default在{}大括号中 暴露 才能被使用

<style lang="less" scoped>
</style>
scoped的作用是让这个样式只能作用该页面的html标签不会影响别的页面的标签

做项目时 需要手动添加 scoped

npm run build 打包

VUE语法 八字胡语法 大括号

v-html可用于添加标签 文本 v-text可用于添加文本 标签无法添加

js中对象中的变量名在html标签中 这样就可以为h1标签添加内容

<template>
<h1>{{name}}</h1>
<h1 v-text="name"></h1>
<h1 v-html="a"></h1>
</template>
<script>
data(){
    return{
        name:"哈哈",
        a:"<a href="#">我是a标签</a>"
    }
}
</script>

VUE 指令

vue中的this指向的是vue对象 当前这个组件

在setTimeout中使用this指向的是window 要使用that来指向这个组件

v-if v-else-if v-else 判断指令

底层原理是将标签删除 或者添加

效率比较低 因为有删除 和添加节点 比较耗时

程序中不能只有一个v-else没有v-if

<template>
    <div>
        <p>我是个人信息显示</p>
        <h1{{name}}></h1>
        <h1 v-if="sex=='1'">男</h1>
        <h1 v-else-if="sex=='2'">女</h1>
        <h1 v-else>机器人</h1>
    </div>
</template>
​
<script>
    export default {
       data(){
            return{
                name:"小何",
                sex:"1"
            }
       }
    }
</script>

@click=""点击之间

v-show="变量名" 变量值为真和假 如果是true则显示 如果为false则不显示

v-hide="变量名" 反之

底层原理是display的none 和block

v-model数据双向绑定

v-model="" 实现数据双绑定

修饰符:

v-model.trim="" 实现数据双绑定 .trim去空格

v-model.number="" 只能传数字

优化代码

v-model.lazy="" lazy 让输入框缓慢加载

v-on事件

鼠标事件

click 鼠标点击左键触发 contextmenu 鼠标点击右键触发 dblclick 鼠标双击触发 mouseover 鼠标经过触发 mouseout 鼠标离开触发 focus 获得鼠标焦点触发 blur 失去鼠标焦点触发 mousemove 鼠标移动触发 mouseup 鼠标弹起触发 mousedown 鼠标按下触发

滚轮事件

mousewheel 鼠标滚轮滚动输出

键盘事件

keyup 某个键盘按键被松开时触发 keydown 某个键盘按键被按下时触发 keypress 某个键盘按键被按下时触发 不识别功能键 比如 ctrl 等

触摸事件

touchstart 手指触摸到一个 DOM 元素时触发 touchmove 手指在一个 DOM 元素上滑动时触发 touchend 手指从一个 DOM 元素上移开时触发

表单事件

focus 表单获得焦点触发 blur 表单失去焦点触发 input 表单每次输入触发 change 表单内容发生改变时触发 select 表单文本被选取时触发 reset 表单重置时触发 submit 表单提交时触发

change 内容变化事件

过渡事件

transitionend 在过渡完成时触发

动画事件

animationend 在动画结束播放时触发 animationiteration 在动画重复播放时触发 animationstart 在动画开始播放时触发

在VUE中 v-on+事件名称 可简写为 @+事件名称

<script>
  export default {
     data(){return {}}},
      //methods  方法的意思   快捷键为  vme 回车 
    methods: {
      fn(){console.log(this.obj);}
    }
  }
</script>

修饰符:

@click.stop="方法名" .stop 用于 阻止事件冒泡

@click..prevent="方法名" ..prevent用于 阻止默认事件

@click..capture="方法名" .capture用于 提前捕获事件

@click..once="方法名" .once用于 事件只触发一次

@click..self="方法名" .once只有使用事件源event中的属性target的时候才会触发自己的事件

按键触发

keyup keydown keypress

.enter（回车键） .tab (tab键)

.delete (捕获“删除”和“退格”键) .esc

.space （空格键） .up （箭头上键）

.down （箭头下键） .left（箭头左键）

.right（箭头右键）

v-for 循环

对数组进行循环

在写v-for的时候，都需要给元素加上一个key属性

<li v-for="(ele,index) in 当前要循环的数组" :key="index"></li>
//加key的原因 
key属性可以避免数据混乱的情况出现（如果元素中包含了有临时数据的元素，如果不用key就会产生数据混乱）
​
给key赋值的内容不能是 可变的

v-bind 指定

v-bind 作用 将属性的值改为变量 v-bin:属性名称="属性值" 可简写为 : 冒号

也可以

<img :src="变量名">j
<img :src="'变量名的值'">   //要加单引号  翻译解析
行内样式
<div :style="{width:w,height:h,background:c}"></div>   //w h c是提前设好的变量
也可以直接使用一个定义好的对象
<div :style="obj"></div>
obj:{
width:"200px",
height:"200px",
background:"red"
}

@在路劲中指定的是src目录

静态路径必须暴露路径才能使用

<template>
<img :src="aa">
</template>
<script>
export default {
  data() {
    return {
      aa: require("../assets/001.png"),
    };
  },
};
</script>

:class :style

<template>
    <div>
        <div :class="kg==true?'box':''"></div>
            <div :class="kg==true?className:''"></div>//有判断写条件   className是一个变量
            <div :class="{box:kg}"></div>//对象类型 指定这个类名是否使用  box是值 类名
            <div :class="['类名',变量指定的类名]"></div> //数组类型 使用多个类名
    </div>
</template>
<script>
export default{
    data(){
        return {
            kg:true,
            指定类名:'box'
        }
    }
}
</script>

<template>
  <div>
    <div class="smallbox" :style="{ background: c,width:h }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      w: "200px",
      h: "300px",
      c: "green",
      obj: {
        width: "200px",
        height: "300px",
        backgroundColor: "green",
      },
    };
  },
};
</script>

<style lang="less" scoped>
.smallbox {
  width: 100px;
  height: 100px;
  background: pink;
}
</style>

V-ref使用

通过ref拿到组件中的dom元素 还可以获取子组件

不能放方法

this.$refs.ref的值

<template>
<div>
    <p ref="pp">要拿到的内容</p>
    <button @click="fn">获取p元素</button>
    </div>
</template>
<script>
export default {
    methods: {
    fn() {
      console.log(this.$refs.pp);   //获取到的值为:  <p>要拿到的内容</p>
    }
  },
}
</script>

也可以获取v-for中的dom元素 获取到的元素会以数组的形式呈现

<template>
<p v-for="(item,index) in arr" :key="index" :ref="'h'+index">
    {{tiem.uname}}</p>
<button @click="fn">获取v-for中的dom节点</button>
</template>
<script>
export default{
    data(){
        return{
            arr:[
                {uname:"小河"},
                {uname:"小甜"},
                {uname:"大何"}
            ]
        } 
    },
    methods:{
        fn(){
            console.log(this.$refs.h0[0])
            //获取到的值为 <p>小甜</p> 以数组的方式显示
        }
    }
}
</script>

children属性 vue3中已被淘汰

<script>
import son from 'son.vue'
    methods:{
        fn(){
            console.log(this.$childen)//获取子组件的所有信息
        }
    }
</script>

组件的生命周期

创建前--> beforCreate 页面已有标签 变量为null

创建后--> created 页面有变量 变量也有值

挂在前--> beforeMount 页面有变量 变量也有值

挂在后--> mounted 页面有变量 变量也有值

修改前--> beforeUpdate

修改后--> updated

销毁前--> beforeDestroy

销毁后 destroyed

父子组件传值(props emit)

default/没有传值时输出此值 有值值为空不会输出

如果报错就在default中使用function的return 对象

数组和对象的时候设置默认值的时候不能直接给{} 或者[]

必须使用function 返回

props:{
	money:{
		type:Number,
		default:function(){
			return {}
		}
	}
}

兄弟之间传值 eventbus

在src文件中 新建utils文件 里创建 eventbus文件夹 内创建eventbus.js

import vue from 'vue'
export let eventbus = new vue()    //按需暴露   在引入时 命名需要{包起来}
//import {eventbus} from ''
export default let eventbus = new vue()   //直接暴露  
使用时 将兄弟组件都引入eventbus.js

import eventbus from 'eventbus.js'
methods:{
	send(){
    	eventbus.$emit("",this.msg)
	}
}

获取值要在生命周期中调用 建议在 created中使用

ref传值

给需要获取的值的标签设置一个ref属性给一个名字

<mySon ref="aa"></mySon>

script中
this.$refs.aa    即可获取其组件中的所有值

插槽

v-slot 用#代替

匿名插槽

父组件中调用子组件

父组件中
<son>1111111111</son>
子组件中
添加<slot></slot>   即可将 1111111111 在子组件中接收 

具名插槽

父组件中
<son>
    <template #hh>
    	<h1>我是头部</h1>
    </template>
    <template v-slot:ff>
    	<h1>我是底部</h1>
    </template>
</son>
子组件中
<header><slot name="hh"></slot></header> //父组件中的我是头部就可以单独传过来
<footer><slot name="ff"></slot></footer> //我底部也可可以单独调用了

插槽子传父值

在子元素中
<slot name="center" :aa="num"></slot>  /具名插槽
<slot :aa="num"></slot>                /匿名插槽
data(){
return:{
num:1
}}
在父级中接收
<son>
	<template #center="{{aa}}"></template>	  //具名插槽
	<template #default="scoped"></template>	  //匿名插槽   scoped需要解构 {{aa}}
</son>

组件的导入

组件一般放到目录的components里面

在app.vue的script中引入

import 子组件的名称(随意取 驼峰式 用短横线形式 方便组件与标签区分) from '子组件的路径'

在export default{ components属性:{ 子组件名称,

}

}

filter过滤器

局部过滤器 在vue文件中编写

过滤器方法必须有返回值

<template>
	<div>
{{username |方法名称}}   // 默认会把username这个参数传值给过滤器中的str
    </div>
</template>
<script>
export default(){
filters:{
    方法名称:function(str){
		逻辑
        return 返回处理后的值
    }
}
}
</script>

全局过滤器 在main.js中编写

import moment from "moment"
Vue.filter("chuliTime",(time)=>{     //filter (方法名称 ,方法体)
	return moment(time).format("YYYY-MM-DD HH-mm-ss")
})

使用方法 在vue文件中

<td>{{需要处理的时间参数 | chuliTime}}</td>  //chuliTime是在main.js中设置的方法名称

watch 监听器

方法名称是data中的数据的名称

watch也是监听 能监听旧值和新值 一般监听data中的数据 方法不一定有返回值

语法一
watch:{
    data中的变量名(新的值,旧的值){}
}
特点:  只有值改变的时候触发

语法二
data(){
	return{
        obj:{
            name:"小戴"
        },
        age:18
	}
}
watch:{
    age(新的值,旧的值){
        deep:false    //深度监听 只能监听变量不能监听 对象 数组中的值
        immediate:true     //是否组件一加载就调用监听
        handler(newVal,oldVal){  //旧值 新值 做逻辑的
		}
    },
    //可以在方法名称中加层级 来解决
    age:{
        deep:true    
        immediate:true     
        handler(newVal,oldVal){
            
		}
    }//两种都可以
    "obj.name":{
        deep:false    
        immediate:true     
        handler(newVal,oldVal){
            
		}
    }
    
}

computed 计算属性

特点

1 具有监听功能

2 方法必须有返回值

3 内部使用的是vue中的 set 和 get方法实现

4 具有缓存机制 提高性能

5 只有数据源变化才能触发 计算属性方法

6 不能在其中使用异步

router 路由写法

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import home from '@/views/home'

const routes=[
    {
        path:"/",
        redirect:"/home"  
        //重定向 重新将这个路径定义到那个路由上
        //将"/" 定义为 /home 路径
        name:"Home",
        component:Home    
        //   因为在上面全局中引入了home可以直接使用 在使用频繁的网页中使用 提高性能
        childen:[//如果还有分页可以在里面继续填写  path种可以不用带斜杠 浏览器自动补齐
        {...}
        ]
    },
        path:"/news",
        name:"news",
        component:()=>{return import("../component/news.vue")}
  //提高性能   懒导入路由   return 和大括号都可以省略不写
]
//将规则添加到路由中 router
const router = new VueRouter({
  routes     //重名可省略一个简写  routes:routes
})
export default router   //暴露
<router-link to="路径"></router-link> 路由入口

<router-view to="路径"></router-view>路由链接在哪里显示 出口

注意

//在我们路由一旦挂载到全局之后 vue就会自动的生成两个对象
    //$route $router  this.$route.query
    //$route 一个页面跳转到另一个页面的详细信息(单个路由)
    //1路由地址 path  2参数 query / params
    // $router 记录了当前 router 目录下的index.js中所有的路由(地址)
    //这个作用可以使用 编程路由跳转
    //  push 跳转    replace跳转  go(-1 0 1)前进后退

主页的对象传给分页
stu主 detail分页 list分页
入口
<router-link :to="'/stu/detail?obj=' + JSON.stringify(ele)">详情页</router-link>     //方法1   字符串方法
<router-link :to="{ path: '/stu/detail', query: { obj: ele } }">详情页</router-link> //方法2   query方法
<router-link :to="{ name: 'detail', params: { obj: ele } }">详情页</router-link>    //方法3    params方法
出口
在挂载后 mounted中接收
JSON.parse(this.$route.query.obj);     //方法1 接收
this.$route.query.obj;                 //方法2 接收 
this.$route.params.obj;                //方法3 接收

params 和 query 区别

params 对应name 不携带地址

query 对应path 携带地址

params刷新值就没了 query 值一直都在

$router种push 和 replace 都能够跳转路由 推送到对应的地址

==注意==

query的刷新一直存在 前提是字符串 对象存的是堆栈内容存储

push 携带历史记录 能返回上一级 可以使用go返回上一级 replace 不携带历史记录 不能返回上一级

编程式路由

<button @click="fn(ele)">详情页</button>
 methods: {
    fn(ele) {
      this.$router.push({
        path: "/stu/detail",
        query: { obj: ele },
      });
    },
  },
接收
this.obj = this.$route.query.obj;
<button @click="fn(ele)">详情页</button>
 methods: {
    fn(ele) {
      this.$router.push({
        name: "stu",
        params: { obj: ele },
      });
    },
  },
接收
this.obj = this.$route.params.obj;

二级路由的配置中 path可以不带斜杠 浏览器会自动补齐

路由守卫

如果没有登录 是不能让其访问后太数据的 换个浏览器就可以直接进入了

router中index.js文件中
const router = new VueRouter({
    routes
})

router beforEach((to,form,next)=>{
    //to 去哪个路由
    //from 从哪里来
    //next 放行
    //判断 第一步 判断是否有token
    window.localstroage.getItem("sell_token")
    if(token){
        next()
    }else if(to.path=='/login'){
        next()
    }else{
	}
})  

export default router

VUEX

将一些数据/变量存入vue项目的全局变量中 然后让每一个组件都可以访问

会在src文件中生成一个store文件文件中有 index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        //state就是放 数据(其他名字:状态) 的
        //想共享就可以直接放进去
        uname:"小河",
        arr:[{id:1,name:"小河"},{id:2,name:"中何"},{id:3,name:"大何"}]
    },
    getters: {
        //监听全局的变化做的功能    自动会触发
        //对state进行过滤或者计数
   	    //其中的方法必须有返回值
        ff: (state) => {
    		return arr.id>2        //{id:3,name:"大何"}
  		} 
       	fn: (state, getters) => {//接受其他 getter 作为第二个参数
    		return arr.ff.length    //  1 
  		}  
    },
    mutations:{   //不能写异步的方法
        //专门修改 state中的数据中 
        //他是一个对象 对象中一般 放同步的方法
        //在mutations中所有的方法第一个参数都是固定的 state
        //修改方式 定义一个方法
        // 修改的是公共的值 其他组件引入 值也会变
        fn(state,payload){
            state.uname=payload
        }
	},
    actions:{
        //actions存异步方法的地方
        //不能直接操作 state
        //actions 还需要调用 mutations中的方法
        //在actions中所有的方法第一个参数都是固定的 context  
        context包含整个store中的内容 state mutations actions getters...
        //commit("mutations中的东西")
        async_fn(context,payload){
        context.commit("fn",payload)
    	}
    },
    modules:{
        //模块化
    }	
})

引入修改的公共值
传值   第二个参数payload 传的值    没有第三个参数
调用state中的值
$store.state.属性名称
调用mutations中的方法
this.$store.commit("mutations中的方法名",传值)  //传的值就是第二参数
调用actions中的方法
this.$store.dispath("actions中的方法名",传值)  //触发的是actions中的方法
调用getters中的方法
this.#store.getters.方法名称

模块化

在store文件中创建modules文件在其中创建 例如 user.js goods.js 在js中编写

export default {
    state: {},
    mutations:{},
    actions: {},
}

在store index中导入

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import goods from './modules/goods'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    goods, user
  }
})

使用 this.$store.state.user.num

在main.js中多了一行代码

$nextTick() 等到Dom节点渲染完，再进行操作

而在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象进行其他操作

nextTick()是异步函数

页面加载完成 再回调$nextTick()函数

<template>
  <section>
    <div ref="hello">
      <h1>Hello World ~</h1>
    </div>
  </section>
</template>
<script>
    mounted() {
      console.log(this.$refs['hello']);  //可以获取到元素
      this.$nextTick(() => {            //可以获取到元素
        console.log(444);
        console.log(this.$refs['hello']);
      });
    },
    created() {
      console.log(this.$refs['hello']);   //无法获取元素
      this.$nextTick(() => {              //可以获取到元素  异步
        console.log(222);
        console.log(this.$refs['hello']);
      });
    }
</script>

案例

在下次 DOM 更新循环结束之后执行延迟回调

<template>
	<div class='onediv' ref="onediv">{{ onediv }}</div>
	<button @click='handleClick'>将值替换</button>
	<button @click=fn>再次查值</button>
</template>

<script>
export default:{
    data() {
    	return {
      		onediv: "123",
    	};
  	},
    methods: {
    	handleClick() {
      		this.onediv = "456";//修改值
            // 原生$ref获取到第一个div改变后的值
      		console.log(this.$refs.onediv.innerHTML); 
            //值为 123 旧值
            console.log(document.querySelector(".onediv").innerHTML); 
            //值为 123 旧值
             this.$nextTick(() => {
        		console.log(this.$refs.onediv.innerHTML);  
                 //获取值为 456 新值
      		});
    	},
        fn(){//再次检查时
          console.log(document.querySelector(".onediv").innerHTML);
            //值为 456 新值
        }
  	}
}
</script>

第二种写法

异步中的同步

<script>
methods: {
    async handleClick() {
      this.onediv = "456";
      await this.$nextTick(); // await 等待返回值后，再执行下面的事情。
      console.log(this.$refs.onediv.innerHTML); //获取值为 456 新值
    }
  }
</script>

项目优化

如果你显示和隐藏的内容不是频繁操作 用v-if

如果你显示和隐藏的内容是 频繁操作 用 v-show

v-model.lazy="" lazy 让输入框缓慢执行 懒加载

当一个文件夹中只有一个文件并且名为index 路径就可以只写到文件夹名

面试题

<script>
    //data在vue中有两种  
    //一种就时一个对象 data{  }第二种一个方法返回一个对象 data(){return{  }}
    //第二种是最好的 因为有自己的作用域 不会被别人干扰 也不会干扰别人
    export default{
data:{
	name:"小甜甜"
}
data(){     //有作用域 不会影响别人  也不会被别人影响
	return {
	name:"小花花"
}
        }
    }
</script>

拓展

全屏方法  document.documentElement.webkitRequestFullscreen()
取消全屏方法  document.webkitExitFullscreen()