Vue基础学习笔记（二）

2018-07-15 本文已影响17人许小花花

一、过滤器

过滤器可被用于一些常见的文本格式化（即对文本进行处理，后再输出）。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号 | 指示：

{{ message | 过滤器名 }}

<div v-bind:id="rawId | 过滤器名"></div>

1. 在一个组件的选项中定义本地的过滤器
  在vue实例中声明过滤函数。是vue实例对象的一个叫做 filters 的属性，它是一个对象，里面可以声明多个过滤器

filters:{
        过滤器名: function (value) {
         if (!value) return ''
         return value.split('').reserve().join("")
  }

2.在创建 Vue 实例之前全局定义过滤器
在vue实例声明之前，定义一个全局的过滤器

Vue.filter('过滤器名称', function (value) {
  if (!value) return ''
  return value.split('').reserve().join("")
})

new Vue({
  // ...
})

二、vue中获取DOM元素

虽然vue是数据驱动，对DOM的操作相对较少，但有时我们仍需要获取到DOM元素。此时就使用到ref 属性。

1.为特定元素添加 ref 属性

<div ref = "myDiv">一个DIV元素</div>

2.在vue实例中，使用 this.$refs.myDiv 来得到上面那个 div 元素（注意声明周期钩子函数，mounted 之后才可以获得）

export default{
    mounted(){
        thid.$refs.myDiv.innerHTML = "一个被改变了内容的DIV元素"
    }
}

3.如果 ref 属性放在组件上，则this.$refs.xx 获取到的是组件对象

<sub-vue ref = "sub"></sub-vue>

export default{
    mounted(){
        console.log(this.$refs.sub)
    }
}

控制台输出
输出的是一个组件对象，它和vue实例对象一样，都是vue组件对象，它也有 $el 属性，对应的是本身在DOM里的那个元素 <sub-vue> 所生成的对应DOM元素

三、vue-router

附上文档：https://router.vuejs.org/zh/

使用过程：

1.下载 npm intsall vue-router -s
2.在 main.js 中引入

import Vue from 'vue'
import VueRouter form 'vue-router'

3.安装插件 (在mian.js 中)

Vue.use(VueRouter)

4.创建路由对象,配置路由规则，并传递到Vue实例中 (在 main.js 中)

let router = new VueRouter({
    routes:[
        {path:'/home',component:'home'} // 注意这个home组件也要 import 进来，这里component 的值 home 是import 进来的组件所赋给的变量名
    ]
})
new Vue({
    el:'#app',
    router,
    render: h => h(App)
})

5.留坑
在需要显示组件的地方（一般为App.vue）留下占位符

<router-view></router-view>

自此，路由配置完成。会根据当前的 URL 去确定应该显示哪一个组件。但是，我们不可能让用户去组件输入URL。而应该像以前用 a 标签进行跳转那样子来确定 URL 但这样会出现不好维护的情况，如果URL要改变我们需要改变 a 标签（App.vue），routes 里面的 path（main.js），就是需要改两个文件，比较麻烦。所以，一般使用命名方式

<!-- App.vue中 -->
<router-link :to="{name:'home'}"></couter-link>

// main.js中
let router = new VueRouter({
    routes:[
        {path:'/home',name:'home',component:'home'}
    ]
})
new Vue({
    el:'#app',
    router,
    render: h => h(App)
})

这样的话，需要更改 URL 就只需要更改 main.js 里面的路由规则中的 path
其实，router-link 中的 to 属性还可以直接指定 URL，像下面这样。但不如指定 name 来的更方便

<router-link to='/home'></couter-link>

6.404和重定向
重定向的实现：

let router = new VueRouter({
    routes:[
       {path:'/',component:'home'}// 在默认页面指定一个组件，否则是空白的
       {path:'/',redirect:'/home'} //在默认页面指定跳转 URL 
       {path:'/',redirect:{name:'home'}}
    ]
})
new Vue({
    el:'#app',
    router,
    render: h => h(App)
})

404的实现

// 添加一个全匹配的路由
let router = new VueRouter({
    routes:[
       {path:'/',redirect:{name:'home'}}
       {path:'/home',name:'omponents'}
       {path:'*',component:'notFound'}// 这个组件也要 import 进来
    ]
})
new Vue({
    el:'#app',
    router,
    render: h => h(App)
})

7.由跳转的过程中传递对象
在路由跳转的过程中会传递一个object，我们可以通过watch方法查看路由信息对象。

watch: {
  '$route' (to, from) {
      console.log(to);
      console.log(from);
  },
},

这里 from和to是两个对象，包括基本的路由信息，如hash等等。

拓展使用

1.拼接URL
有时，URL 中还有 query 部分，如 id 等等。此时可对router-link中的to属性进行拓展。比如，此时我们 query 部分的 id 是列表对应的 index

<!--  App.vue -->
<ul>
  <li v-for='(apple,index) in apples' :key='index'>
    <router-link :to="{name:'home',query:{id:index}}"></router-link>
  </li>
</ul>

得到的结果会是/home?id=数字此时匹配的仍旧是路由规则里那个{name='home',path=/home}的，因为 query 部分不影响路由规则。
此时，在App.vue 中，可以通过this.$route.query来获得 URL 中的query（因为 main.js 中已经安装插件Vue.use(VueRouter),会全局挂载$route（一些信息数据） 和 $router（一些功能函数） 两个对象）
this.$route.query得到的是？后的部分。除了 query 还有params，它可以在路由规则中指定拼接方式，而不是像query那样只能通过？拼接在后面。

<!--  App.vue -->
<ul>
  <li v-for='(apple,index) in apples' :key='index'>
    <router-link :to="{name:'home',params:{id:index}}"></router-link>
  </li>
</ul>

// main.js中
let router = new VueRouter({
    routes:[
        {path:'/home/:id',name:'home',component:'home'} 
    ]
})
new Vue({
    el:'#app',
    router,
    render: h => h(App)
})

2.编程导航
有时我们需要操作页面的前进后退，其实通过$router.go()方法实现

this.$router.go(-1) //页面回退
this.$router.go(1) //页面前进
this.$router.push('/anothPage') //向指定 URL 跳转

这些方法让我们可以自行编程进行页面的跳转
go方法就是浏览器上的前进后退按钮，方法中传递的数字参数就是前进和后退的次数

3.多视图
一个 URL 有时需要同时渲染多个组件，此时需要用到多视图

多视图1
多视图2
多视图3
4.嵌套路由

嵌套路由

有时我们在一个组件中，还嵌套了其他的页面，比如一个音乐组件，其中嵌套了多种音乐类别，当点击 music 组件中的跳转，实现子组件的切换

// 注册方法，在 main.js 中
let router = new VueRouter({
    routers:[
        {path:'/',redirect:"/home"},
        {path:'/music',name:'music',component:music,children:[
            {name:'soft',path:'soft',component:soft},
            // 这里的path 没有加上/，表示相对于music。即路径为/music/soft
            {name:'Japan',patj:'Japan',component:Japan}
        ]}
    ]
})

在music.vue组件中，也留下了<route-link></router-link>占位符，用来显示soft和Japan两个组件。当然App.vue中也留下了给music的占位符

四、vue-resource

早期是 vue 团队开发的插件，现已停止维护。基于 HTTP 发送请求，获取资源。
使用步骤

1.下载 npm i vue-resource -s
1. 引入 import VueResource from 'vue-resource'
1. 安装 Vue.use(VueResource)
1. 使用

// app.vue中  get请求
export default {
    data(){
        return {}
    },
    created(){
        this.$http.get('URL').then(res => {
            this.data = res.body.message
        },err => {
                console.log(err)
            })
    }
}

// post请求
export default {
    data(){
        return {}
    },
    created(){
        this.$http.post('URL',{key:'value'},{emulateJSON:true }).then(res => {
            this.data = res.body.message
        },err => { 
                console.log(err)
            })
    }
}

当发送post请求且跨域时会报错，请求无法发送，所以要加上 emulateJSON，它会改变请求头的Content Type，使得请求可以发送
post请求的时候，如果数据是字符串默认头就是键值对，否则是对象就是application/json

五、axios

axios文档中文翻译
相对于 vue-resource ，axios支持三端使用，且功能更丰富，稳定。

1.下载 npm i axios -s
2.引入import Axios form 'axios'
3.挂载及使用

// mian.js
Vue.prototype.$axios = Axios // 给vue原型挂载一个属性，所有的实例都可以使用

// app.vue  get请求
export default {
    data(){
        return {}
    },
    created(){
        this.$axios.get('URL').then(res => {
            this.data = res.data.message
        }
        .catch(err => { 
                console.log(err)
            })
    }
}

// app.vue post请求
export default {
    data(){
        return {}
    },
    created(){
        this.$axios.post('URL','key=value').then(res => {
            this.data = res.data.message
        }).
        catch(err => { 
                console.log(err)
            })
    }
}

post请求的时候，如果数据是字符串默认头就是键值对，否则是对象就是application/json，此时是无法发送请求的，所以改为字符串发送
还可以通过使用 Axios.default.baseURL= 'URL'来设置默认请求路径（main.js中）。然后在 app.vue 中使用时，第一个参数只需写默认的 UR L后面的拼接部分及可以，不用写重复的长长的部分。
也可以在第二个参数加上{params:{id:'xx'}}(get请求)作为查询字符串，当然 post 请求的则是在第三个参数。它会自己拼接在 URL 后面。
同时应该注意，在发送post请求时，如果使用{params:{id:'xx'}}，是将参数拼接在 URL 后面的。如果是想要作为请求体内容应该放在body里面。并且此时要记得配置Content-Type为application/x-www-form-urlencoded，否则默认为是text/plain，这时服务器就不知道怎么解析数据了

import axios from 'axios';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$axios = axios;