coco_2233的博客

我们用不到这么多生命周期，可以简写为以下方法，它会自定调用相应的生命周期，改变isShow就会显示或隐藏div元素}else {在元素按下鼠标，给元素添加跟随鼠标移动的事件元素设置为固定定位，鼠标移动改变left值和top值鼠标松开，移除移动事件。

导航守卫就是在路由跳转的时候进行一些操作或保护。比如一个用户直接修改URL进入管理页面，但是导航守卫检测到这个行为，把路由跳转到登录页面，让他进行登录。导航解析。

try_files就是尝试到网站读取这个文件，有这个文件就返回；没有这个文件就查找这个目录，找到这个目录返回目录；由于vue是单页面应用，只有一个页面，对于不同的URL请求找不到相应的资源会出现404的情况。history模式改变URL同样也不会引起页面的重新加载，它会记录浏览器历史，点击后退按钮会回到上一个页面。下面是vue-router中配置为hash模式，默认是hash模式。是Nginx的一个变量，代表用户访问的地址，，表示返回网站的index.html文件。表示访问的是一个文件，

假如网站中有公共的部分和私密部分，公共部分是所有人都可以看到的，私密部分只有管理员才能看到。结果如下：可以看到当普通用户访问私密部分没有权限，但是可以访问公共部分。Vue Router支持组件的动态导入，即当需要用到这个路由时才导入。当我们想要在路由上添加一些信息时，可以在。在setup中没有this，所以直接访问。我们也可以监听路由的变化来做某些事情。属性，然后在里面写上想要的信息。下面的例子中仍然可以通过。通过点击事件来进行页面跳转。可以让我们访问到路由。在模板中可以直接访问到。

接着上一篇路由继续记录。

我们来看一下结果：我们在main.js中创建了routes，它是一个数组，path就是端口号后面的，例如127.0.0.1:8080/about中的’/about’，component就是要跳转的组件，然后创建router（一般会把创建路由单独放在一个文件中，这里只是为了方便展示写在了main.js中）。在vue中通过使用vue-router来实现组件的切换，具体是通过改变url中的path值来切换组件，path值得改变并不会引起整个页面刷新，只是局部改变其中的内容。的path太长，可以起一个。

keepAlive是vue的一个内置组件，当动态切换组件时它能够缓存组件实例。

对于父子组件的传递数据，可以通过prop进行传递，但是如果是爷爷向孙子传递数据呢？我们需要在爸爸中定义defineProps拿到爷爷传来的数据，然后在孙子中也定义defineProps，爸爸把刚刚拿到的数据在传递给孙子。对于爸爸来说根本用不到这些数据，只是孙子要用到。那有没有一种方法让爷爷直接传递数据给孙子呢？答案肯定是有的，这里说的是依赖注入的方法，还有一种使用vuex的方法以后再说吧。

插槽就是一个占位符，用于在子组件中占位置，然后把父组件传来的内容渲染到这个位置。

在vue中一个.vue文件就是一个组件，一般来说不会在一个文件写太多的代码，我们可以把重复使用的代码写到一个组件中，在另一个组件中引用这个被封装的组件，这样可以提高代码复用性。前一个组件叫做子组件，后一个叫做父组件。

在实际项目中都是用vue-cli进行搭建项目，不用自己配置webpack。

在vue中我们需要访问DOM元素，可以通过给元素添加ref从而获得它的引用。

监听器用于监听响应式数据。当响应式数据发生了改变可以进行相应的操作。

vue生命周期就是指组件被创建到被销毁的过程。

定义了一个publish计算属性，它返回值为ref，我们可以通过publish.value拿到计算结果，但ref在template中会自动添加.value。Vue中的计算属性会自动追踪响应式依赖，publish依赖于author.books，当author.books改变时publish也会改变。在以下代码中所写的逻辑太复杂，写到template中显得太臃肿，我们想要判断作者是否有写过书，可以通过计算属性来描述这个逻辑。计算属性是用来描述依赖响应式状态的复杂逻辑。