VUE---学习进阶06

1.补充小知识点

1.1 scoped

作用:设置样式只在当前页面起效果

<style scoped>
.box{
width:100px
}
</style>

1.2 ref使用

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。
上面这句话的意思：

<div class="box"  ref='box1'>我是父组件</div>
div绑定ref属性时，可以使用this.$refs.box1获取该元素，进而可以使用原生的方法进行操作.
	
对子组件设置ref="child"：
<vChild ref="child"></vChild>
this.$refs.child可以获取子组件的实例对象。可以直接调用子组件的方法等。

1.3 go的使用

go用来返回上一个浏览记录。
主要代码：
点击之后可以进行返回上一个界面

<button @click="$router.go(-1)">返回</button>

2.路由的使用

2.1路由的基本使用

1.安装：
npm install vue-router --save
2.在main.js中引入 
	import Router from 'vue-router'
	Vue.use(Router)
	const router = new Router({
	//配置规则
	routes:[
	{
	path:'/login',
	component:login
	}，
	//重定向
	{
	path:'/',
	redirect:login
	}，
	]
	})
	new Vue({
		router,
	})
3.在页面增加需要跳转的按钮
	<router-link to='/login'>跳转</router-link>
4.在哪里显示组件的内容 需要添加路由出口
	<router-view></router-view>

2.2路由的嵌套

在路由main.js中配置：用children，同时注意：二级路由 path不需要加/ 同时重定向path为空即可

const router = new Router({
    // 路由规则
    routes:[
      {
        path:'/login',
        component:login,
        // 二级路由 path不需要加/   同时重定向path为空即可
        children:[
          {
            path:'index',
            component:index,
          },
          {
            path:'food',
            component:food,
          },
          {
            path:'mine',
            component:mine,
          },
          {
            path:'',
            redirect:'food',
          }
        ]
      })

2.3项目配置

项目中主要设置的文件有：
----src

​ ----assets

​ -img

​ -css

​ -js

​ ----components 拼接页面存放的组件

​ ----pages 页面组件

​ ----common 公共组件

----filter 过滤器

----util 工具类

2.4编程式导航

除 <router-link to='/movie'>电影</router-link>搭配to方法使用只用之外还有：this.$router.push和this.$router.replace
依据情况进行使用：

1.没有约束条件时跳转，用router-link
2.push 是一级一级的往上返回  相当于增加一条新的历史记录
3.replace 是直接返回最开始位置，相对替换上一条历史记录

代码:

<!-- --1.router-link--- -->
    <router-link to='/movie'>电影</router-link>
    <router-link to='/food'>美食</router-link>
    <!-- 2.$router.push -->
    <button @click="toMovie">电影</button>
    <button @click="toFood">美食</button>
    <!-- 3.$router.replace -->
     <button @click="toMovie1">电影1</button>
    <button @click="toFood1">美食1</button>

2.5 动态路由

动态路由即带参路，带参路由进行传递的参数主要用于下个界面获取不同数据进行渲染页面，即根据不同ID获取不同数据。

两种方式传参，一种是以带问号的形式，另一种不带问号。
注意：
1.不带问号传参（this.$router.push('/movieDetail/'+id)）时会将参数解析为路由，在进行取参数时需要使用this.$route.params.参数名进行取值。
2.带问号传参（:to="'/movieDetail?'+item.id"）时不会将参数解析为路由，在进行取参数时需要使用this.$route.query.参数名进行取值。

不带问号主要代码：

在router中的index.js中修改
 {
       path:'/movieDetail/:id',
       component:movieDetail,
  }
  
  在movie中增加点击跳转方法：
     toDetail(id){
       this.$router.push('/movieDetail/'+id)
        console.log(id)
    }

带问号主要代码：
注意：通过？传参方式 需要注意路由匹配规则 path:’/movieDetail/:id’ 一定不要添加:id

 <ul>
        <li is='router-link' :to="'/movieDetail?'+item.id" v-for='item in list' :key='item.id'>
            <p>{{item.name}}</p>
            <p>{{item.time}}</p>
            <p>{{item.price}}</p>
        </li>
    </ul>

3. 过滤器的封装

步骤：
1.filter文件夹下新建一个filterPrice.js文件，然后里面写需要的方法 然后导出方法
2.filter文件夹下新建一个index.js 用来存放所有的方法（filterPrice）
3.在main.js中导入filter-.>index.js 然后循环遍历添加

//filterPrice.js
export default function(price){
    return price.toFixed(2)
}


//
index.js
import filterPrice from './filterPrice'
export default {
    filterPrice,
    
}

//main.js
import Filters from './filter/index.js'
for(let i in Filters){
  Vue.filter(i,Filters[i])
}

注意：使用过滤器时，需要用你注册的那个名字也就是导出名字 filterPrice
 <p>{{item.price | filterPrice}}</p>

注：其他组件的封装也类似，比如：通过common文件夹下下面的index导出所有的公共组件，同时需要注册到main.js中