vue(一)

qqdef

已于 2022-04-22 10:42:07 修改

阅读量643

点赞数 1

分类专栏： Vue 文章标签：前端

于 2022-03-16 20:19:34 首次发布

本文链接：https://blog.csdn.net/qq_45102392/article/details/123478717

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

创建项目

1， npm create 项目名称2，选择自定义安装

3，

把Babel. ESlint等插件的配置项，放到自己独立的配置文件中

2.目录结构

小图标，页面

babel配置文件，包管理配置文件

src源代码目录

vue项目中src目录的构成:
1|assets 文件夹:存放项目中用到的静态资源文件，例如: css样式表、图片资源
2 components 文件夹:程序员封装的、 可复用的组件，都要放到components 目录下
3 main.js 是项目的入口文件。整个项目的运行，要先执行main.js
4.App.vue是项目的根组件

3，vue通过main.js把App.vue渲染到index.html的指定区域中。

其中:
①App.vue 用来编写待渲染的模板结构
②index.html 中需要预留一个el区域
③main.js 把App.vue渲染到了index.html 所预留的区域中
// Vue实例的$mount() 方法，作用和el属性完全-样!（main.js）

4.组件的构成

每个.vue组件都由3部分构成，分别是:
●template ->组件的模板结构
●script ->组件的JavaScript行为
●style ->组件的样式

<template>
<div class="test-box">
<h3>这是用户自定义的Test.vue --- {{ username }}</h3>
</div>
</ template>
<script>
//默认导出。这是固定写法!
export default {
// data数据源
//注意: .vue组件中的data 不能像之前一样，不能指向对象。
//注意:组件中的data 必须是一 个函数
data() {
//这个return 出去的{ }中，可以定义数据
return {
username: ' admin'
}
},
methods: {
chagneName() {
this.username = '哇哈哈'//在组件中this就表示当前组件的实例对象
}
},
//当前组件中的侦听器
watch: {},
//当前组件中的计算属性
computed: {},
filters: {},
}
</script>

5. 唯一根节点，一个组件内只有一个大盒子包住所有小盒子，启用less

<style lang="less">
test-box {
background-color:口pink;
h3 {
color:red;
}
</style>

6.组件的使用步骤

//步骤1:使用import语法导入需要的组件:
import Left from '@/components/Left. vue//@表示src目录
//步骤2:使用components节点注册组件
export default {
components: {
Left
}
}
//步骤3:以标签形式使用刚才注册的组
<div class="box">
<Left></Left>
</div>

<script>
// 1.导入需要使用的vue组件
import Left from '@/ components/Left. vue '
export default {
// 2.注册组件
components: {
Left
}
}
</script>

7.注册全局组件
在vue项目的main.js入口文件中,通过Vue.component()方法，可以注册全局组件。

//导入需要全局注册的组件
import Count from '@/ components/ Count . vue '
//参数1:字符串格式，表示组件的"注册名称”
//参数2:需要被全局注册的那个组件
Vue . component( 'MyCount', Count)

自定义指令

私有自定义指令

<h1 v-color>App 根组件</h1>




directives: {
//定义名为color的指令，指向一个配置对象
color: {
//当指令第一次被绑定到元素上的时候，会立即触发bind 函数
//形参中的el表示当前指令所绑定到的那个DOM对象
bind(el) {
console.log('触发了v-color 的bind函数')
el.style. color = 'red'
}
}
}

如果是通过指令传值

<h1 v-color="color">App 根组件</h1>
<p v-color="'red'">测试</p>


data() {
return {
color: 'blue'
},
bind(el, binding) //binding用来接收传入的值
{
console.1og('触发了v-color 的bind 函数')
el.style.color = binding.value 
console1og(binding)
}

bind函数只调用1次:当指令第一次绑定到元素时调用，当DOM更新时bind函数不会被触发update 函数会在每次DOM更新时被调用。update第一次不会触发。

<button @click="color = ' green'">改变color的颜色值</button>


update(eI, binding) {
console.log('触发了v-color 的update函数' )
el. style.color = binding. value
}

如果bind和update函数中的逻辑完全相同,，则对象格式的自定义指令可以简写成函数格式:

color (eI, binding) {
el. style. color = binding. value}

全局自定义指令（main.js）

Vue.directive('color', function(el, binding) {
el.style. color = binding. value 
})

前端路由：Hash地址与组件之间的对应关系。

前端路由的工作方式

路由的安装

//在main.js
//导入路由模块，目的:拿到路由的实例对象
import router from '@/router/index. js'

new Vue({
render: h => h(App), 
//在Vue项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载
// router:路由的实例对象
router
}) . $mount('#app ')

在路由模块中声明路由的对应关系

<!--只要在项目中安装和配置了vue-router, 就可以使用router-view 这个组件了-->
<router-view></router-view>
//在父组件里写充当占位符


//在router中index.js中写
//导入需要的组件
import Home from' @/ components/Home . vue'
import Movie from ' @/components/Movie. vue'
import About from ' @/ components/About . vue'




//创建路由的实例对象
const router = new VueRouter({
// routes 
是一个数组，作用:定义“hash 地址”与“组件”之间的对应关系
routes: [
{ path: ' /home'，component: Home },
{ path:' /movie', component: Movie },
{ path: ' /about', component: About }]

不用加#号


<router-link to="/home">首页</router-link>
<router-link to="/movie">电影 </router-link>
<router-link to=" /about">关于</router-link>

路由重定向

//重定向的路由规则，加一项
 {path:'/',redirect: ' /home '}，

嵌套路由

通过children属性声明子路由规则

//在路由index.js文件下
import Tab1 from ' @/ components/tabs/Tab1. vue
import Tab2 from ' @/ components/ tabs/Tab2. vue




{path: ' /about' ,component: About ，
// redirect: '/about/tab1',
children: [
//子路由规则
//默认子路由:如果children 数组中，某个路由规则的path值为空字符串，则这条路由规则，叫做“默认子路由”
{path: '', component: Tab1 },
//{path: 'tab1', component: Tab1 },
{ path: 'tab2'，component: Tab2 }
]}
//此时<!--子级路由链接-->
<router-link to=" /about">tab1 </router-link>//不用写tab1了
<router-link to="/about/tab2">tab2</ router-link>

动态路由：动态路由指的是:把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。在vue-router中使用英文的冒号(:) 来定义路由的参数项。

<!-- this. Sroute是路由的“参数对象”-
<!-- this. Srouter是路由的“导航对象”

需求：点击不同链接，弹出同一组件，向服务器请求数据

{path:'/movie/ :id' ,component :Movie}
//获取id值
//第一种方法：$route.params.mid
//第二种方法通过props
{path:'/movie/ :id' ,component :Movie,props :true}
//然后再movie组件内
props: ['id']，

<!-- 注意1:在hash地址中， /后面的参数项，叫做"路径参数”- - >
<!--在路由“参数对象”中，需要使用this. $route. params来访问路径参数-->
<!--注意2:在hash地址中，?后面的参数项，叫做“查询参数”-->
<!-- 在路由“参数对象"中，需要使用this . $route . query来访问查询参数-->
<!--注意3:在this. $route 中，path只是路径部分，fullPath 是完整的地址-->
<!-- 
例如: 
<!-- /movie/2?name=zs&age=20 是fullPath 的值-->
<!-- /movie/2 是path的值-->

编程式导航

vue-router提供了许多编程式导航的API,其中最常用的导航API分别是:
①this.$router.push('hash 地址')
●跳转到指定 hash地址,并增加一-条历史记录
②this. $router.replace('hash地址')
●跳转到指定的hash地址,并替换掉当前的历史记录
③this. $router.go(数值n)
在实际开发中，一般只会前进和后退一层页面。因此vue-router提供了如下两个便捷方法:
①$router.back()
②$router.forward()

写在route文件下的index.js文件

const router = new VueRouter({
routes :[]
})
//为router 实例对象，声明全局前置导航守卫
//只要发生了路由的跳转，必然会触发beforeEach 指定的function 回调函数
router .beforeEach( function(to, from, next) {
// to表示将要访问的路由的信息对象
// from表示将要离开的路由的信息对象
// next()函数表示放行的意思
next()
})

当前用户拥有后台主页的访问权限，直接放行: next()
当前用户没有后台主页的访问权限，强制其跳转到登录页面: next('/login')
当前用户没有后台主页的访问权限，不允许跳转到后台主页: next(false)

点击main如果未登录转到注册页面

router .beforeEach((to, from, next) => {
if (to.path === ' /main') {
const token = localStor age . getItem( 'token' )
if (token) {
next() //访问的是后台主页，且有token 的值
} else {
next(' /login') //访问的是后台主页，但是没有token 的值
}
} else {
next() //访问的不是后台主页，直接放行
})

第三方库使用/deep/穿透

this.artlist = [... this.artlist, ... res]合并两个数组

如果某个组件是通过路由渲染的放在views文件下