Vue学习笔记3

1.1 指针

指令：对于底层DOM操作的一种封装

封装在指令里面可以进行复用

<div id="box">
	<div v-hello=" 'red' "></div>
<div>
<script>
	//自定义指令
	//inserted第一个参数得到的就是这个元素，第二个参数是元素对象
	Vue.directive("hello",{
		//指令的生命周期
		inserted(el,binding){
		//第一次插入到父节点是触发
			el.style.background =binding。value
	},
	update(){
	}	
})
	new Vue ({
		el="box"
	})
</script>

指令的作用：
1. 指令在dom创建好之后就会触发
2. 有时数据引入我们的文件中时，难以判断dom创建的时间
3. 我们可以通过给引入数据的元素上加上自定义指令
4 .当某一个数据引入，dom节点创造好了以后就可以执行某一段行为

1.2 指令补充&nextTick

指令生命周期：
bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted∶被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。
upiate :所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值
能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新(详
的钩子函数参数见下)。
componentUpdated∶指令所在组件的VNode及其子VNode全部更新后调用。
unbind（销毁） :只调用一次，指令与元素解绑时调用。

Vue3与组件生命周期的区别：

Vue3中的生命周期与组件生命周期大致相同，仅仅没有了beforeCreate

nextTick:比updated执行的都完，只执行一次 不能复用只能独自使用

this.$nextTick(()=>{

},2000)

2.1 Vue-cli

2.1.1 Vue-cli创建项目

• 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
• 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
• 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

可以使用.vue文件

2.1.2 启动流程&入口文件

1. 可以在packgae.json文件中直接运行脚本
2. 或者在packgae.json文件的集成终端直接运行
3. 使用npm run serve 或着npm start来启动
4. 通过App.vue文件进

2.1.3 eslint修复

出现的原因：

在使用CLI时，语法规则非常苛刻，因此会出现许多错误

解决方案

1. 在集成终端使用npm run lint 被赋值但没使用这种错误，这个方法无法修复 vscode自动修复eslint
2. 安装eslint插件，并启用 有时这个插件用不了，可以先将其关闭，最后写完代码在启用，修复文件 先将其关闭，最后写完代码在启用，修复文件
3. 在vue.config.js文件中添加以下代码
   module.export = { lintOnSave: false//暂时关闭代码格式检测 }

2.1.4 单文件组件-注册

"食用"方法：

1. 内容写在template标签下 不能有两个相同的元素 兄弟标签 js部分必须使用ES6导出规范export default{}
2. data使用函数式的写法 可以使用style标签写css，不需要写道行内 如果还需要在文件里引入子组件
3. 先在外面创建一个.vue文件在里面写组件的内容 在将这个组件 通过 import 子组件名 from '子组件文件的地址’引入 全局写法：
4. 还需要再父文件中注册组件 Vue.component(‘子组件名’ , 子组件文件名) 再需要使用 import Vue from
5. 'vue’来引入一次 局部写法： 写components:{ 子组件名 }

2.1.5 单文件组件-通信

• 父子通信和以前的写法相同
• 插槽也能使用
• 子组件的样式会被父组件的影响，插入样式时，先封装子组件的样式再封装父组件的样式，后封装的会影响前封装的
• 只需要在子组件的style标签中加scoped就可以防止被覆盖

2.1.6 单文件组件-生命周期

与以前得生命周期一样 也可以从其他文件从在生命周期得阶段引入到文件 也可以引入axios文件来使用axios方法 需要在终端写npm i --save axios

2.1.7单文件组件-指令与过滤器

指令

先引入 import Vue from 'vue'
接着指令的方法与原来相同

过滤器

先在文件中使用Vue.filter("过滤器名称",()=>{需要修改的操作})声明即可用

2.1.8 反向代理&别名

反向代理需要在vue.config.js文件中加入一段代码

devServer: {
	port : 8000，//随便改端口号
	proxy : {
		'/api' : {
		target: 'https ://*.*.com' ,//需要代理的网站
		host: '*.*.com ' ,
		changeOrigin :true,
		pathRewrite:{
				'自定义接口的名字':''//将自定义接口的名字转为空字符串
			}
		}
	}
}

1. 在接口前端自定义一个名字是为了防止引入多个网址时’/api'相同
2. 在vue文件中 @ 为别名，永远指向src绝对路径，在src下面引入文件时，只需要加@就能引入里面文件的绝对路径

3.1 spa和路由引入

3.1.1 spa&路由引入

import VueRouter from 'vue-router'
Vue.use(VueRouter)//注册路由插件
//配置表
const routes = [
{
path:"/film",
component:Films
}
}

vue-router

• 根据不同的路径加载到不同的页面
  

3.1.2、一级路由

• 在main.js先引入router文件，并且将给文件渲染
• 再创建几个组件
• 在路由文件(index.js)中引入组件
• 在根文件中加上router-view标签相当于slot标签

import 组件名称 from '组件相对地址'
Vue.ues(VueRouter)//注册路由插件，两个全局router-view router-link


const routes =[
{
	path:'/组件名',
	component:组件名称
}//有几个组件就写几次
]

const router =new VueRouter({
	routes
})

export default router

3.1.3 重定向

就是希望打开页面是就会指向我们希望出现的组件页面

const routes =[
	{
		path:'/组件名',
		component:组件名称
	},
	{
	path:'/',
	redirection:'/组件名'
	}
	]

如果想在输入一个未定义的组件，依旧是跳转到我们希望出现的组件页面

const routes =[
	{
		path:'*',
		component:组件名称
	},
	{
	path:'*',
	redirection:'/组件名'
	}
	]

3.1.4 声明式导航

第一种方法

• 使用标签进行跳转组件(使用to=“组件绝对地址”)时，会自动给跳转的组件加上class，可以通过给这个class加上高亮属性，来使得点击某个图标跳转之后可以使得该图标保持高亮
• 并且可以在这个标签中自定义class属性，通过active-class="class名称"的方式添加

第二种方法

• 使用插槽的方式使用标签进行跳转组件(使用to=“组件绝对地址”)，在这个标片中间再加一个
• 标签，在存放组件
  在<router-link>标签中加custom v-slot="{navigate,isActive}"属性
  在<li>标签上@事件="navigate"属性
  isActive是判断是否在当前组件上，是的话就是true，否则是false，可以通过这一特性，添加动态class

3.2 嵌套路由

在父组件中再嵌套一个路由的方法

import 组件名称 from '组件相对地址'
import 子组件名称 from '子组件相对地址'
	Vue.ues(VueRouter)//注册路由插件，两个全局router-view router-link
	
	const routes =[
	{
		path:'/组件名',
		component:组件名称,
		children:[
			{
				path:'/组件名/子组件名',
				component:子组件名称,
			}
		]
	}
	]

重定向使其跳转到子组件

const routes =[
	{
		path:'/组件名',
		component:组件名称,
		children:[
			{
				path:'/组件名/子组件名',
				component:子组件名称,
			}
			{
				path:'*',
				redirect:'/组件名/子组件名'
			}
		]
	}
	]

3.3、编程式导航

• 给值赋上事件，通过执行某个函数触发location.href = '#/组件名'，使其跳转到那个组件页面
• 给值赋上事件，通过执行某个函数触发this.$router.push('/组件名')，使其跳转到那个组件页面

3.4 动态路由

在路由文件中设置一个动态路由

const routes =[
	{
		path:'/组件名/:id',//通过id来获取组件
		component:组件名称
	}
	]

• 在改组件中设置this.$route.params.id来获取id值，发送请求到后端

• 在根组件中设置点击事件后，设置一个函数，参数就是id，通过this.$router.push(/组件名称/${id})的方式，使得创建一个组件

3.5 路由命名

给路由组件加一个name属性

const routes =[
		{
			name:'asd'
			path:'/组件名/:id',//通过id来获取组件
			component:组件名称
		}
		]

然后通过name进行跳转

const routes =[
		{
			name:'asd'
			path:'/组件名/:id',//通过id来获取组件
			component:组件名称
		}
		]

3.6 路由模式

• 如果不想要地址出现#，可以使用history模式
• 在分享时有些网站会加上#，使用这种模式不影响
• 加入mode:'history'即可

const router =new VueRouter({
		mode:'history'
		routes
	})

弊端

1. 不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问http: //oursite.com/user/id就会返回404，这就不好看了。
2. 如果出现了问题，就使用npm run build生成了dist文件夹，仍给后端