小白的vue学习之路02

最新推荐文章于 2022-11-03 12:51:07 发布

weixin_37770640

最新推荐文章于 2022-11-03 12:51:07 发布

阅读量338

点赞数

本文链接：https://blog.csdn.net/weixin_37770640/article/details/80675484

版权

#### 复习
* vue单文件方式 xxx.vue
* 1:准备好配置文件 package.json(包描述文件&& 封装命令npm run dev) + webpack.config.js文件（打包的配置文件）
* 2:创建index.html（单页应用的页）
* 3:创建main.js(入口文件)
* 4:引入vue和相关的文件xxx.vue
* 5:new Vue(options)
* 6:options（选项）:
- data
- methods
- components（组件内声明子组件)
- props
* 7:实例:
- 在组件内（xxx.vue）中的this
- new Vue()
- 事件
+ this.$on(事件名,回调函数(参数))
+ this.$emit(事件名,数据)
+ this.$once(事件名,回调函数(参数)) 就触发一次
+ this.$off(事件名); 取消事件
* 8:全局
- Vue.component('组件名',组件对象) 在哪里都可以使用
* 9: 组件传值
- 父传子: 属性作为参数
+ 常量 title="xxx" 子组件声明接收参数 props:['xxx']
+ 变量 :title="num" 子组件声明接收参数 props:['xxx']
- 子传父: vuebus（只能是同一辆车）
+ 先停车到父组件，On一下
+ 再开车到子组件，如果需要的话，emit一下，触发上述时间的回调函数

#### 今日重点
* vue组件的使用
* 组件间通信
* vue-router使用
* vue-resource发起http请求
* axios

#### 过滤器
* content | 过滤器,vue中没有提供相关的内置过滤器,可以自定义过滤器
* 组件内的过滤器 + 全局过滤器

- 组件内过滤器就是options中的一个filters的属性（一个对象）

<template>
	<div>
		请输入内容：
	    <input type="text" v-model="text">
	    显示：{{text|myFilter}}
	</div>
</template>
<script>


export default{
	data(){return{
        text:""
    }},
    filters:{
    	myFilter1:function(value) {//value就是text
    		//将输入内容进行反转
    		//1 字符串转换为数组
    		//2 反转
    		//3将数组转换为字符串
    		return value.split('').reverse().join('');
    		
    	}

    },
    methods:{

    }
  }

</script>

<style>

</style>

+ 多个key就是不同过滤器名,多个value就是与key对应的过滤方式函数体

- `Vue.filter(名,fn)`

import Vue from 'vue';

import App from './app.vue';

Vue.filter('myFilter',function(){return 1})



new Vue({
    el: '#app',
   
    render: c => c(App)


})

* 输入的内容帮我做一个反转
* 例子:父已托我帮你办点事
* 总结
- 全局：范围大，如果出现同名时，权利小

- 组件内: 如果出现同名时，权利大，范围小（只能在组件内，不能在其compoents中起作用）

#### 获取DOM元素
* 救命稻草, 前端框架就是为了减少DOM操作，但是特定情况下，也给你留了后门
* 在指定的元素上，添加ref="名称A"
* 在获取的地方加入 this.$refs.名称A
- 如果ref放在了原生DOM元素上，获取的数据就是原生DOM对象
+ 可以直接操作 <div ref=""></div>

- 如果ref放在了组件对象上，获取的就是组件对象<subVue ref=""><subVue>

+ 1:获取到DOM对象,通过this.$refs.sub.$el,进行操作

created(){
console.log('created:',this.$refs.myDiv)
},
mounted(){
this.$refs.subDiv.$el.innerHTML="创建的sub"
this.$refs.myDiv.innerHTML="创建的"
}

- 对应的事件
+ created 完成了数据的初始化，此时还未生成DOM，无法操作DOM

+ mounted 将数据已经装载到了DOM之上,可以操作DOM

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

       <!--  <div ref="myDiv">
            {{text}}
        </div> -->
    </div>
</template>
<script>
    import SubVue from './sub.vue';
    export default {
        data(){
            return {
                text:'123'
            }
        },
        components:{
            subVue:SubVue
        },
        //组件创建后,  数据已经完成初始化，但是DOM还未生成
        created(){  //  事件的处理函数(created)
            console.log('created:',this.$refs.myDiv);//获取不到
        },
        //数据装载DOM上后，各种数据已经就位,将数据渲染到DOM上，DOM已经生成
        mounted(){
            console.log('sub:',this.$refs.sub.$el);
            
            //获取组件对象，并获取到其的DOM对象
            this.$refs.sub.$el.innerHTML = '嘻嘻';

             console.log('mounted:',this.$refs.myDiv);

            // 涉及DOM类的操作
             this.$refs.myDiv.innerHTML = '哈哈呵呵';
            // 涉及到数据的操作
            this.text = '嘻嘻呵呵'
        }

    }
</script>
<style>
    
</style>

#### mint-ui
* 组件库
* 饿了么出品,element-ui 在PC端使用的

* 移动端版本 mint-ui npm install mint-ui -S

* https://mint-ui.github.io/#!/zh-cn
* 注意:
- 如果是全部安装的方式
+ 1:在template中可以直接使用组件标签

+ 2:在script中必须要声明，也就是引入组件对象（按需加载）

//1:引入 vue
import Vue from 'vue';
import App from './global.vue';
import MintUi from 'mint-ui';
Vue.use(MintUi);
import 'mint-ui/lib/style.css';




new Vue({
    el: '#app',
    // render:function(c){
    //     return c;
    // }
    render: c => c(App)
    //1:当参数是一个的时候，小括号可以省略
    //2:当代码只有一行且是返回值的时候,可以省略大括号

})

<template>
	<div>


		<mt-header title="multiple button">
  <router-link to="/" slot="left">
    <mt-button icon="back">back</mt-button>
    <mt-button @click="handleClose">close</mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button>
</mt-header>

<mt-swipe :auto="4000">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item>
</mt-swipe>
	</div>
</template>
<script>


export default{
	data(){return{
        
    }},
    methods:{
    	handleClose(){
    		
    	}

    }
  }

</script>

<style>

</style>

#### vue-router
* 前端路由核心就是锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据
* ui-router:锚点值改变，如何获取模板？ajax、
* vue中，模板数据不是通过ajax请求来，而是调用函数获取到模板内容
* 核心：锚点值改变
* 以后看到vue开头，就知道必须Vue.use
* vue的核心插件:
- vue-router 路由
- vuex 管理全局共享数据
* 使用方式
- 1:下载 `npm i vue-router -S`
- 2:在main.js中引入 `import VueRouter from 'vue-router';`
- 3:安装插件 `Vue.use(VueRouter);`
- 4:创建路由对象并配置路由规则
+ `let router = new VueRouter({ routes:[ {path:'/home',component:Home} ] });`
- 5:将其路由对象传递给Vue的实例，options中
+ options中加入 `router:router`

- 6:在app.vue中留坑 ` <router-view></router-view>`

main.js

//引入一堆
import Vue from 'vue';
import VueRouter from 'vue-router';

//主体
import App from './components/app.vue';
import Home from './components/home.vue'

//安装插件
Vue.use(VueRouter); //挂载属性

//创建路由对象并配置路由规则
let router = new VueRouter({
    //routes
    routes: [
        //一个个对象
        { path: '/home', component: Home }

    ]
});

//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router: router, //可以简写router
    render: c => c(App),
})

app.vue

<template>
    <div>
         <div class='h'>头部  <!-- <a href="#/mymusic">进入音乐</a>

       <a href="#/mymovie">进入电影</a> -->

         <!-- 1:去哪里跟名字使用 -->
        <router-link :to="{name:'music'}">进入音乐1</router-link>
        <router-link :to="{name:'music'}">进入音乐1</router-link>
        <router-link :to="{name:'music'}">进入音乐1</router-link>
        <router-link :to="{name:'movie'}">进入电影1</router-link>
        <router-link :to="{name:'movie'}">进入电影1</router-link>
        <router-link :to="{name:'movie'}">进入电影1</router-link>
         <!-- 2:去哪里跟路径使用 -->
        <router-link to="/mymusic">进入音乐1</router-link>
        <router-link to="/mymovie">进入电影1</router-link>


        </div>
        
        <!-- 留坑，非常重要 -->
        <router-view class='b'></router-view>
          <div class='f'>头部</div>
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        }
    }
</script>
<style>
.h{
    background-color: #f00;
    height: 100px;
}
.b{
    background-color: #ff0;
      height: 100px;

}
 .f{
     background-color: blue;
       height: 100px;

 }   
</style>

<template>
<div>

<router-view></router-view>
</div>
</template>
<script>
export default {
data(){
return {

}
}
}
</script>
<style>

</style>

home.vue:

<template>
    <div>
        我是主页
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        }
    }
</script>
<style>
    
</style>

#### 命名路由
* 需求，通过a标签点击，做页面数据的跳转
* 使用router-link标签
- 1:去哪里 `根据路径<router-link to="/beijing">去北京</router-link>`
- 2:去哪里 `根据名字<router-link :to="{name:'bj'}">去北京</router-link>`
+ 更利于维护，如果修改了path，只修改路由配置中的path，该a标签会根据修改后的值生成href属性

main.js:

//引入一堆
import Vue from 'vue';
import VueRouter from 'vue-router';

//主体
import App from './components/app.vue';

import Music from './components/music.vue';
import Movie from './components/movie.vue';


//安装插件
Vue.use(VueRouter); //挂载属性

//创建路由对象并配置路由规则
let router = new VueRouter({
    //routes
    routes: [
        //一个个对象
        { name:'music',path: '/mymusic', component: Music },
         { name:'movie',path: '/mymovie', component: Movie },

    ]
});

//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router: router, //可以简写router
    render: c => c(App),
})

#### 参数router-link
* 在vue-router中，有两大对象被挂载到了实例this
* $route(只读、具备信息的对象)、$router(具备功能函数)
* 查询字符串
- 1:去哪里 `<router-link :to="{name:'detail',query:{id:1} } ">xxx</router-link>`
- 2:导航(查询字符串path不用改) `{ name:'detail' , path:'/detail',组件}`
- 3:去了干嘛,获取路由参数(要注意是query还是params和对应id名)
+ `this.$route.query.id`
* path方式
- 1:去哪里 `<router-link :to="{name:'detail',params:{name:1} } ">xxx</router-link>`

- 2:导航(path方式需要在路由规则上加上/:xxx) main.js中

- `{ name:'detail' , path:'/detail/:name',组件}`
- 3:去了干嘛,获取路由参数(要注意是query还是params和对应name名)

+ `this.$route.params.name`

main.js

//引入一堆
import Vue from 'vue';
import VueRouter from 'vue-router';

//主体
import App from './components/app.vue';

import List from './components/list.vue';
import Detail from './components/detail.vue';


//安装插件
Vue.use(VueRouter); //挂载属性

//创建路由对象并配置路由规则
let router = new VueRouter({
    //routes
    routes: [
        //一个个对象
        //查询字符串，path不用改
        //{ name:'list',path: '/list', component: List },
         { name:'detail',path: '/detail／:i', component: Detail},

    ]
});

//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router: router, //可以简写router
    render: c => c(App),
})

list.vue

<template>
    <div>
       <!--  查询字符串列表：
        <li v-for="(hero,index) in heros" :key="index">
        	{{hero.name}}

        	<router-link :to="{name:'detail',query:{i :index}}">查看</router-link>
        </li> -->
        path列表：
        <li v-for="(hero,index) in heros" :key="index">
        	{{hero.name}}
        	<router-link :to="{name:'detail',params:{i:index}}">查看</router-link>
        </li>
    </div>
</template>
<script>
    export default {
        data(){
            return { 
            	heros:[{name:'zxy'},{name:'李白'}]

            }
        }
    }
</script>
<style>
    
</style>

detail.vue:

<template>
    <div>
       详情
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },//dom还未生成
        created(){
        	//获取路由参数
        	// vue-router挂载两种数据
            // $route 信息数据 $router 功能函数
            console.log(this.$route.query);
            console.log(this.$route.params);

        },
        mouted(){

        }
    }
</script>
<style>
    
</style>

#### 编程导航
* 不能保证用户一定会点击某些按钮
* 并且当前操作，除了路由跳转以外，还有一些别的附加操作

* this.$router.go 根据浏览器记录前进1 后退-1

goback(){this.$router.go(-1);},//后退
goo(){this.$router.go(1);},//前进

* this.$router.push(直接跳转到某个页面显示)

- push参数: 字符串 /xxx

this.$router.push('/mymusic')

- 对象 : `{name:'xxx',query:{id:1},params:{name:2} }`

this.$router.push({name:'music',query:{id:1,name:2}})

app.vue

<template>
    <div>
         <div class='h'>头部  

        </div>
             <button @click="goMusic">跳转到音乐</button>
              <button @click="test">测试编程导航传递参数</button>
        <!-- 留坑，非常重要 -->
          <router-view class='b'></router-view>

          <div class='f'>头部</div>
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },
        methods:{
          goMusic(){
             this.$router.push('/mymusic')

          },
          test(){
            this.$router.push({name:'music',query:{id:1,name:2}})
          }
         
        }
    }
</script>
<style>
.h{
    background-color: #f00;
    height: 100px;
}
.b{
    background-color: #ff0;
      height: 100px;

}
 .f{
     background-color: blue;
       height: 100px;

 }   
</style>

music.vue

<template>
    <div>
                我是音乐
              <button @click="goMovie">跳转到电影</button>
               <button @click="goback" >向上一页</button>
               <button @click="goo" >向下一页</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },
        methods:{
        	goMovie(){
        		this.$router.push({name:'movie'})
        	}
        	,
        	goback(){this.$router.go(-1);},//后退
        	goo(){this.$router.go(1);},//前进

        
        }
    }
</script>
<style>
    
</style>

movie.vue

<template>
    <div>
        我是电影
             <button @click="goback">向上一页</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },
        methods:{
        	goback(){this.$router.go(-1);}
        }
    }
</script>
<style>
    
</style>

#### 复习用js实现

* 过滤器，全局，组件内
* 获取DOM元素，在元素上ref="xxx"
* 在代码中通过this.$refs.xxx 获取其元素
- 原生DOM标签获取就是原生DOM对象
- 如果是组件标签，获取的就是组件对象 $el继续再获取DOM元素
* 声明周期事件(钩子)回调函数
- created: 数据的初始化、DOM没有生成
- mounted: 将数据装载到DOM元素上，此时有DOM
* 路由
- `window.addEventListener('hashchange',fn);`
- 根据你放`<router-view></router-view><div id="xxx"></div>` 作为一个DOM上的标识

- 最终当锚点值改变触发hashchange的回调函数，我们将指定的模板数据插入到DOM标识上

<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        height: 100px;
    }

    .h {
        background-color: yellowgreen;
    }

    .b {
        background-color: hotpink;
    }

    .f {
        background-color: skyblue;
    }
    </style>
</head>

<body>
    <div class="h">我是头部</div>
    <div id="content" class="b"></div>
    <div class="f">我是底部</div>
    <script type="text/javascript">
    //监视锚点值的改变
    window.addEventListener('hashchange', function() {
        var text = '';
        switch (location.hash) {
            case '#/music':
                text = '各种音乐的数据';
                break;
            case '#/movie':
                text = '各种电影的数据';
                break;
        }

        document.getElementById('content').innerHTML = text;



    })
    </script>
</body>

</html>

#### 重定向和404
* 进入后，默认就是/
* 重定向 `{ path:'/' ,redirect:'/home' }`
* 重定向 `{ path:'/' ,redirect:{name:'home'} }`
* 404 : 在路由规则的最后的一个规则
- 写一个很强大的匹配

- `{ path:'*' , component:notFoundVue}`

//引入一堆
import Vue from 'vue';
import VueRouter from 'vue-router';

//主体
import App from './components/app.vue';
import Home from './components/home.vue';
import NotFound from './components/notFound.vue';


//安装插件
Vue.use(VueRouter); //挂载属性

//创建路由对象并配置路由规则
let router = new VueRouter({
    //routes
    routes: [
        //一个个对象<!-第一种->
        // { name:'home',path: '/myhome', component: Home },
        // {path:'/',redirect:'/home'}
     <!-第二种->
     { name:'home',path: '/myhome', component: Home },
     {path:'/',redirect:{name:'home'}},
     //最终无法匹配
     {path:'*',component:NotFound},

    ]
});

//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router: router, //可以简写router
    render: c => c(App),
})

#### 多视图
* 以前可以一次放一个坑对应一个路由和显示一个组件
- 一次行为 = 一个坑 + 一个路由 + 一个组件
- 一次行为 = 多个坑 + 一个路由 + 多个组件
* components 多视图是一个对象对象内多个key和value
- key对应视图的name属性
- value 就是要显示的组件对象
* 多个视图`<router-view></router-view>` -> name就是default

* `<router-view name='xxx'></router-view>` -> name就是xxx

main.js

//引入一堆

import Vue from 'vue';import VueRouter from 'vue-router';//主体import App from './components/app.vue';//路由切换页面import header from './components/header.vue'import footer from './components/footer.vue'//注册全局头组件// Vue.component('headerVue', header);// Vue.component('footerVue', footer);//注册全局底部组件//安装插件Vue.use(VueRouter); //挂载属性//创建路由对象并配置路由规则let router = new VueRouter({ //routes routes: [{ path: '/', components: { header: footer, default: header, footer: footer } } ]});//new Vue 启动new Vue({ el: '#app', //让vue知道我们的路由规则 router, //可以简写router render: c => c(App),})app.vue

<template>
    <div>
        <div>我是头部啊</div>
        <hr/>
            <!-- 留坑，非常重要 坑名-->
            <router-view class="b" name="header"></router-view>
            <router-view class="b" ></router-view>
            <router-view class="b" name="footer"></router-view>
        <hr/>
        <div>我是底部啊</div>
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        }
    }
</script>
<style scoped>
    .h{
        height: 100px;
        background-color: yellowgreen;
    }
    .b{
        height: 100px;
        background-color: skyblue;
    }
    .f{
        height: 100px;
        background-color: hotpink;
    }
</style>

#### 嵌套路由
* 用单页去实现多页应用，复杂的嵌套路由
* 开发中一般会需要使用
* 视图包含视图

* 路由父子级关系路由

```javascript
期组件内包含着第一层router-view
{ name:'music' ,path:'/music', component:Music ,
children:[ 子路由的path /就是绝对路径不/就是相对父级路径
{name:'music.oumei' ,path:'oumei', component:Oumei },
{name:'music.guochan' ,path:'guochan', component:Guochan }
]
}

```

main.js

//引入一堆
import Vue from 'vue';
import VueRouter from 'vue-router';

//主体
import App from './components/app.vue';

import Header from './components/header.vue';
import Footer from './components/footer.vue';
import Oumei from './components/oumei.vue';
import Music from './components/music.vue';
import Guochan from './components/guochan.vue';
import NotFound from './components/notFound.vue';

//注册全局组件
Vue.component('headerVue',Header);
Vue.component('footerVue',Footer);


//安装插件
Vue.use(VueRouter); //挂载属性

//创建路由对象并配置路由规则
let router = new VueRouter({
    //routes
    routes: [
        //一个个对象
        // { name:'home',path: '/myhome', component: Home },
        // {path:'/',redirect:'/home'}
     {path:'/',redirect:{name:'music'}},
     { name:'music',path: '/music',component:Music,children:[{name:'music_oumei',path:'oumei',component:Oumei},{name:'music_guochan',path:'guochan',component:Guochan}]},
      //最终无法匹配
     {path:'*',component:NotFound},

    ]
});

//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router: router, //可以简写router
    render: c => c(App),
})

app.vue

<template>
    <div>

        <header-vue></header-vue>
          <hr/>
          <router-view class='b'></router-view>
            <hr/>
       <footer-vue></footer-vue>
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },
        methods:{
         
         
        }
    }
</script>
<style>

 
   
</style>

music.vue:

<template>
    <div>
             欢迎来到音乐世界
        <router-link :to="{name:'music_oumei'}"> 欧美音乐  </router-link>
        <router-link :to="{name:'music_guochan'}"> 国产音乐 </router-link>
       
              <router-view class='b'></router-view>
             
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },
        methods:{
        	

        
        }
    }
</script>
<style>
    
</style>

#### vue-resource(了解)

* 可以安装插件，早期vue团队开发的插件
* 停止维护了，作者推荐使用axios
* options预检请求，是当浏览器发现跨域 + application/json的请求，就会自动发起
* 并且发起的时候携带了一个content-type的头

#### axios

安装；

$ npm install axios

$ bower instal axios

* https://segmentfault.com/a/1190000008470355?utm_source=tuicool&utm_medium=referral
* post请求的时候，如果数据是字符串默认头就是键值对，否则是对象就是application/json
* this.$axios.get(url,options)
* this.$axios.post(url,data,options)
* options:{ params:{id:1}//查询字符串, headers:{ 'content-type':'xxxxx' },baseURL:'' }
* 全局默认设置：Axios.defaults.baseURL = 'xxxxx';

* 针对当前这一次请求的相关设置

main.js

//引入一堆
import Vue from 'vue';
//主体
import App from './components/app.vue';

//引入
import Axios from 'axios';

Axios.defaults.baseURL = 'http://182.254.146.100:8899/api/';


//给Vue原型挂载一个属性
Vue.prototype.$axios = Axios;


//new Vue 启动
new Vue({
    el: '#app',
    render: c => c(App),
})

app.vue

<template>
    <div>
        {{data}}
    </div>
</template>
<script>
    export default {
        data(){
            return {
                data:[]
            }
        },created(){
           this.$axios.get('getlunbo',{
                params:{
                    id:'123'
                },
                baseURL:'http://www.baidu.com'
           })
           .then(res=>{
            this.data = res.data.message;
           })
           .catch(err=>{
            console.log(err);
           })
           // .finally(()=>{
           //  console.log('最终');
           // })
           // 
           
           //post
           this.$axios.post('postcomment/300',
            'content=传智27期，真正霸气的一批'
           // {
           //  content:'传智27期，再次霸气的一批'
           // },
           // {
           //  //设置
           //  headers:{
           //      'content-type':'application/x-www-form-urlencoded'
           //  }
           // }
           )
           .then(res=>{
                this.data = res.data.message;
           })
           .catch(err=>{
            console.log(err);
           })

        }
    }
</script>

#### 如何练习
* 1:路由核心
- 路由基本使用
- 任选一种路由参数的方式(查询字符串)
- 404(路由匹配规则)
- 嵌套路由
- 编程导航
* 2:http请求
- axios 发起get、post请求（300）
- 获取 http://182.254.146.100:8899/api/getcomments/300?pageindex=1
- 发起 http://182.254.146.100:8899/api/postcomment/300
- axios挂载属性方式

weixin_37770640

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白的vue学习之路02

#### 复习* vue单文件方式 xxx.vue* 1:准备好配置文件 package.json(包描述文件&amp;&amp; 封装命令npm run dev) + webpack.config.js文件（打包的配置文件）* 2:创建index.html（单页应用的页）* 3:创建main.js(入口文件) * 4:引入vue和相关的文件xxx.vue* 5:new Vue(options)*...
复制链接

扫一扫