Vue整合

基础配置:

1.创建:cmd 中 输入 create vue vue_name

启动命令:npm run serve

2.当node_modules(依赖)丢失时通过 npm install 下载 【根据:package-lock.json下载】

3.下载路由 npm i vue-router@3.5.2 -S

Vue使用:

一.js中的区域:

a.data(){} :用于存放变量:除了布尔和数字外 都需要引号

b.methods:{} :用于存放一般的事件包括自定义的function

c.components:{} :用于注册组件

d.mounted(){} :生命周期,用于获取props,data,methods

e.computed:{} :用于计算渲染

f.filters:{} :用于过滤

g.watch: {} :用于监听

h.created(){} : 生命周期,用于获取数据

二.vue原生的渲染:

1.内容渲染指令:

a. v-text:用在标签中,覆盖原有内容

b. {{}}: 插值表达式,直接接收数据的一种方式

c.v-html:可以携带标签,识别标签

2.属性绑定指令:

v-bind:( 简写为 :)

3.事件绑定

a. v-on:click="" 或者 @click=""

b.事件的修饰符:Ⅰ.@click.prevent 阻止浏览器的默认行为

Ⅱ.@click.once 只触发一次事件

Ⅲ.@click.stop 阻止冒泡

4.双向数据绑定

a. v-model

b. v-model.number: 把内容转为数字类型

c. v-model.trim : 去除前后空格

d. v-model.lazy 失去焦点后触发同步

5.条件渲染指令

a. v-if v-else-if v-else条件判断

b.显隐: v-if:删除节点 达成显隐 更安全

v-show: 增加display-none

6.列表渲染指令

a. <tr v-for="(item,index) in mems" :key="item.id">

<td> {{index}}+{{item.id}}</td> </tr>

b. v-for 里写入索引index,以便在后端使用

c. key :主键,增加查询效率

7.过滤器

a. html使用 :<p>{{ message | upperStr | upperStr 3}}</p>

b. 在filters中使用: upperStr(val){} value为 message

8.监听器

a. html 使用: v-model="watch1

b. 在watch使用: watch1(nval,oval){}( nval 新的值;oval 旧的值 )

9.计算属性

a. html使用 {{rgb}

b. 在computed 使用 :

rgb(){

return `rgb({this.r},{this.g},${this.b})`;

}

  1. 在css中 scoped 会防止组件样式冲突

/deep/ h1{color: yellow; } /deep/ 样式穿透 影响子组件

三、组件的使用

1.组件的使用步骤:

a.创建组件

b.导入组件

import ZuJianName from '@/components/ZuJianName.vue';

c.注册组件

在computed 中 ZuJianName :ZuJianName ,

当组件名和变量名相同可以简写为ZuJianName

d.使用组件 :

<zu-jian-name></zu-jian-name> 小写,使用 - 拼接

2.路由占位符 : <router-view/>

  1. 多个组件只显示一个<component :is="ZuJianName "> </component>

4.父子传值(一个vue在另一个vue里)

父-》子

父:<zi-zu-jian-name :abc="msg"></zi-zu-jian-name >

子:prop接收:与data同级

a. props:['abc']

b. props:{ 'abc':String}

c. props:{abc:{ type:String, default:'ok!' //默认值}}

子-》父:

子:this.$emit('fangda',this.num)

父: html :<zi-zu-jian-name @fangda="handle()"></zi-zu-jian-name>

js: handle(val){ this.fs=val}

5.兄弟传值(没有关系)

a.创建向外界共享vue的js文件,与views同级

b. 传值的vue :

sendMsg(){ bus.$emit('share',this.msg)}

c.接收值的vue:

bus.$on('share',val=>{this.getmsg=val})

6.web缓存

存入:localStorage.setItem ('username',this.username) 页面关闭后数据还存在 不安全

sessionStorage.setItem ('username',this.username) 页面关闭后数据不存在 安全

获取:this.username= localStorage.getItem('username');

this.username= sessionStorage.getItem('username');

四、路由的使用

在路由下载后可使用:

  1. 导入依赖 当导入的依赖时node_modules 时直接写依赖的名称

import Vue from 'vue'

import VueRouter from 'vue-router'

2.导入页面组件 导入自己写的文件时必须使用相对路径

import Page1 from '../views/Page1.vue'

import Page2 from '@/views/Page2.vue' @是src文件

  1. 配置路由规则

a.重定向 :从一个vue直接跳到另一个vue

配置:

{

// 使用时路径,自己定义

//path: '/', 当进入是默认进入这个页面

path: '/page1',

// name自己定义

name: 'page1',

// 导入的页面组件名,与导入页面组件的名字一致

component: Page1

},

使用:

router-link 最终会渲染成a标签 to属性会渲染成href属性

<router-link to="/page2"> 跳转到page2</router-link>

b.嵌套路由 : 相当于在Page1里嵌套了Page2 两个都显示

{

path:'/page1',

// 当配置后无需导入组件

component:()=>import('../views/Page1.vue'),

// 子路径

children:[

// 已经在上面导入组件

{path:'page2',component:Page2}

]

}

使用:

<router-link to="/page1/page2"> 跳转到page2</router-link>

<router-view></router-view> 需要子路由的占位符,多个子路由只用一个占位符

4.跳转路由的其他方式

this.$router.push("/page2"); push:会增加一条历史记录

this.$router.replace("/page2"); replace:不会增加历史记录,而是替换当前的记录

this.$router.go(-1); go:历史记录的前进和后退

this.$router.forward(); forward:历史记录的前一个

this.$router.back(); back:历史记录的后一个

5.全局守卫:防止不经过登录,直接访问重要页面 在router里

to :将要访问的路由信息

from:将要离开的路由信息

next:函数

next():放行

next('/login'):代表没有权限,强制跳转

next(false):代表没有权限,也不强制跳转

router.beforeEach((to,from,next)=>{

//允许访问/跳转

// 如果

if(to.path=='/main'){

const username=sessionStorage.getItem('username');

if(username){

//允许访问/跳转

next();

}else{

// 不存在不允许访问,跳回登录页面

next('/login');}}else{ next();}})

补充:@1:生命周期

A。组件创建阶段 注意:方法按照顺序依次执行1次!!

beforeCreate:组件实例刚被创建,组件的 props/data/methods都不能使用

created:组件实例刚被创建,组件的 props/data/methods已创建好,处于可用状态。但是组件的模板结构尚未生成!

beforeMount:将要把内存中编译好的HTML结构渲染到浏览器中。此时浏览器中没有组件的DOM结构。

mounted:将要把内存中的HTML结构,渲染到了浏览器之中。

B。组件运行阶段 注意:数据源发生变化就会执行,执行多次!!

beforeUpdate:将要根据变化过后,最新的数据,重写渲染组件的模板结构。

updated:已经根据最新的数据,完成了组件DOM结构的重新渲染。

C。组件销毁阶段 注意:方法按照顺序依次执行1次!!

beforeDestroy:将要销毁此组件,此时尚未销毁,组件还处于正常工作的状态。

destroyed:组件已经销毁,此组件在浏览器中对应的DOM结构已被完全移除。

结论:

a。如果要在第一时间获取数据,应该在created里进行数据的获取。

b。如果要在第一时间进行dom的操作,应该在mounted方法里进行

相关推荐
满分观察网友z10 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
编程猪猪侠12 分钟前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
满分观察网友z13 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
bemyrunningdog14 分钟前
二进制权限控制方案
javascript·react.js·ecmascript
西西木科技丨Shopify开发机构19 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙25 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1126 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆31 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er35 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0638 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html