Vue框架入门学习(二)——Vue修饰符

最新推荐文章于 2024-05-29 18:15:03 发布

2NaCl

最新推荐文章于 2024-05-29 18:15:03 发布

阅读量121

点赞数 1

分类专栏： js 文章标签： Vue

本文链接：https://blog.csdn.net/qq_41936805/article/details/90556147

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

三、Vue进阶用法

三、Vue进阶用法

1.事件修饰符

指针对于v-on事件产生的修饰符，例如说.stop可以让操作停止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js" charset="utf-8"></script>
</head>
<body>
<div id="div1">
    <div class="" @click="fn1()">
        <input type="button" value="按钮" @click.stop="fn2()">
    </div>
</div>

</body>
<script>
    let vm = new Vue({
        el:'#div1',
        data:{

        },
        methods:{
            fn1(){
                alert('11');
            },
            fn2(){
                alert('22');
            }
        }
    });
</script>
</html>

接下来对于几个事件修饰符进行举例
stop 禁止冒泡
once 单次事件
prevent 阻止默认事件
native 原生事件(原生环境下new Vue方法无法使用)
keycode|name 控制键盘按键

prevent，once

        <form action="2.v_bind.html" method="post" @submit.prevent.once="submit()">
            <!--        设置一个页面的跳转事件，但是仅仅可以提交一次，且不会跳转页面，仅仅做提交信息的操作-->
            <input type="submit" value="提交">
        </form>

keydown

<input type="text" @keydown.enter="fn()">

由回车来控制提交

<div id="div1">
        <input type="text" @keydown.enter.ctrl="fn()">
    </div>

由组合键来控制提交

2.computed—计算属性

与method的实现有一定区别
不主动计算，有缓存，当数据改变的时候才会重新计算，性能更高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Computed</title>
    <script src="vue.js" charset="utf-8"></script>
</head>
<body>
    <div id="div1">
        姓：<input type="text" v-model="familyName">
        名：<input type="text" v-model="Name">
        <input type="text" v-model="sum">
    </div>
</body>
<script>
    let vm = new Vue({
        el:'#div1',
        data:{
            familyName:'张',
            Name:'章'
        },
        computed: {
            sum:{
                get() {
                    return this.familyName + this.Name;
                },
                set(value) {
                    this.familyName=value[0];
                    this.Name=value.substring(1)
                }
            }
        }
    });
</script>
</html>

3.watch—监听属性

在这里要强调保证属性一直才能达到监听的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Computed</title>
    <script src="vue.js" charset="utf-8"></script>
</head>
<body>
<div id="div1">
    <input type="text" v-model="user_info.name">
</div>
</body>
<script>
    let vm = new Vue({
        el:'#div1',
        data:{
            user_info:{
                name:'blue',
                age:18
            }
        },
        watch:{
            'user_info.name':function() {//user_info的某一个属性,watch的属性,v-model的属性三者要保持一致
                console.log('name 变了')
            }
        }
    });
</script>
</html>

※4.Vue-router

1.容器
<router-view></router-view>
2.路由表

let router = new VueRouter({
        routes:[
            {
                path:,
                component:{}
            }
        ]
    });

3.添加到vm对象，el，data，methods，···
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
    <script src="vue.js" charset="utf-8"></script>
    <script src="vue-router.js" charset="utf-8"></script>
</head>
<body>
    <div id="div1">
        文字
        <!--1.有了一个路由的容器-->
        <router-view></router-view>
    </div>
</body>
<script>
     //2.配置路由表
    let router = new VueRouter({
        routes:[
            {
                path:'/a',
                component:{template:'<div>aaaaa</div>'}
            },
            {
                path:'/b',
                component:{template:'<div>bbbbb</div>'}
            },
            {
                path:'/c',
                component:{template:'<div>ccccc</div>'}
            }
        ]
    });

    let vm = new Vue({
        el:'#div1',
        data:{},
        //将路由表添加到vm中，通过地址去填充router-view
        router:router
    });
</script>
</html>

由于我们在这里操作的用手动修改域名的方式来进行页面的跳转，所以在这里我们也可以创建href进行手动跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
    <script src="vue.js" charset="utf-8"></script>
    <script src="vue-router.js" charset="utf-8"></script>
</head>
<body>
    <div id="div1">
        <a href="#/a">页面1</a>
        <a href="#/b">页面2</a>
        <a href="#/c">页面3</a>
        文字
        <!--1.有了一个路由的容器-->
        <router-view></router-view>
    </div>
</body>
<script>
     //2.配置路由表
    let router = new VueRouter({
        routes:[
            {
                path:'/a',
                component:{template:'<div>aaaaa</div>'}
            },
            {
                path:'/b',
                component:{template:'<div>bbbbb</div>'}
            },
            {
                path:'/c',
                component:{template:'<div>ccccc</div>'}
            }
        ]
    });

    let vm = new Vue({
        el:'#div1',
        data:{},
        //将路由表添加到vm中，通过地址去填充router-view
        router:router
    });
</script>
</html>

但是这里我们写href又感觉很原始，其实router里面封装了router-link能方便我们进行页面的跳转

		<router-link to="/a">页面1</router-link>
        <router-link to="/b">页面2</router-link>
        <router-link to="/c">页面3</router-link>

PS：用#可以防止页面刷新
在router-link内给按钮加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
    <script src="vue.js" charset="utf-8"></script>
    <script src="vue-router.js" charset="utf-8"></script>
    <style media="screen">
        .links {overflow:hidden;}
        .links .nav {float:left; color: aqua;margin-right:10px}
        .links .router-link-active {
            color: blueviolet;}
    </style>
</head>
<body>
    <div id="div1">
        <div class="links">
            <router-link class="nav" to="/a">页面1</router-link>
            <router-link class="nav" to="/b">页面2</router-link>
            <router-link class="nav" to="/c">页面3</router-link>
        </div>
        文字
        <!--1.有了一个路由的容器-->
        <router-view></router-view>
    </div>
</body>
<script>
     //2.配置路由表
    let router = new VueRouter({
        routes:[
            {
                path:'/a',
                component:{template:'<div>aaaaa</div>'}
            },
            {
                path:'/b',
                component:{template:'<div>bbbbb</div>'}
            },
            {
                path:'/c',
                component:{template:'<div>ccccc</div>'}
            }
        ]
    });

    let vm = new Vue({
        el:'#div1',
        data:{},
        //将路由表添加到vm中，通过地址去填充router-view
        router:router
    });
</script>
</html>

5.命名路由

若router path太复杂，就可以选择给router进行命名，而且路由的选择根据举例来决定
顺便加入了一些样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
    <script src="vue.js" charset="utf-8"></script>
    <script src="vue-router.js" charset="utf-8"></script>
    <style media="screen">
        .links {overflow:hidden;}
        .links .nav {float:left; color: aqua;margin-right:10px}
        .links .router-link-active {
            color: blueviolet;}
    </style>
</head>
<body>
    <div id="div1">
        <div class="links">
            <router-link class="nav" :to="{name:'aaa',params:{id:55}}">页面1</router-link>
            <router-link class="nav" to="/b">页面2</router-link>
            <router-link class="nav" to="/c">页面3</router-link>
        </div>
        文字
        <!--1.有了一个路由的容器-->
        <router-view></router-view>
    </div>
</body>
<script>
     //2.配置路由表
    let router = new VueRouter({
        routes:[
            {
                path:'/news/:id',
                name:'aaa',
                component:{template:'<div>新闻：{{$route.params.id}}</div>'}
                //route 路由信息
            },
            {
                path:'/b',
                name:'bbb',
                component:{template:'<div>bbbbb</div>'}
            },
            {
                path:'/c',
                name:'ccc',
                component:{template:'<div>ccccc</div>'}
            }
        ]
    });

    let vm = new Vue({
        el:'#div1',
        data:{},
        //将路由表添加到vm中，通过地址去填充router-view
        router:router
    });
</script>
</html>

6.JS控制路由跳转

之前提到了，获取id的时候我们使用的是$route
而使用js来控制路由跳转，使用的是 $router

首先先创建一个事件，导向定义好的路由地址，根据路由地址对应的template去填充router-view，而如果是参数，就通过调用的函数找到对应的参数后再填充。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
    <script src="vue.js" charset="utf-8"></script>
    <script src="vue-router.js" charset="utf-8"></script>
    <style media="screen">
        .links {overflow:hidden;}
        .links .nav {float:left; color: aqua;margin-right:10px}
        .links .router-link-active {
            color: blueviolet;}
    </style>
</head>
<body>
    <div id="div1">
        <div class="links">
            <input type="button" value="页面1" @click="fn1()">
            <input type="button" value="页面2" @click="fn2()">
            <input type="button" value="页面3" @click="fn3()">
        </div>
        文字
        <!--1.有了一个路由的容器-->
        <router-view></router-view>
    </div>
</body>
<script>
     //2.配置路由表
    let router = new VueRouter({
        routes:[
            {
                path:'/news/:id',
                name:'news',
                component:{
                    template:'<div>新闻：{{$route.params.id}}</div>'
                }
                //route 路由信息
            },
            {
                path:'/b',
                name:'bbb',
                component:{
                    template:'<div>bbbbb</div>'
                }
            },
            {
                path:'/c',
                name:'ccc',
                component:{
                    template:'<div>ccccc</div>'
                }
            }
        ]
    });

    let vm = new Vue({
        el:'#div1',
        data:{},
        //将路由表添加到vm中，通过地址去填充router-view
        router:router,
        methods:{
            fn1() {
                this.$router.push({
                    name:'news',
                    params:{
                        id:22
                    }
                });
            },
            fn2() {
                this.$router.push('/b');
            },
            fn3() {
                this.$router.push('/c');
            }
        }
    });
</script>
</html>

7.监视路由

使用watch来实现路由监视的功能

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js" charset="utf-8"></script>
    <script src="vue-router.js" charset="utf-8"></script>
    <style media="screen">
    .links {overflow:hidden;}
    .links .nav {float: left; color:#CCC; margin-right:10px}
    .links .router-link-active {color:black;}
    </style>
  </head>
  <body>
    <div id="div1">
      <div class="links">
        <input type="button" value="页面1" @click="fn1()">
        <input type="button" value="页面2" @click="fn2()">
        <input type="button" value="页面3" @click="fn3()">
      </div>
      文字
      <!--1.路由容器-->
      <router-view></router-view>
    </div>
  </body>

  <script>
  //2.路由表
  let router=new VueRouter({
    routes: [
      {
        path: '/news/aaa/',
        component: {
          template: '<div>新闻2</div>'
        }
      },
      {
        path: '/news/:id/',
        name: 'news',
        component: {
          template: '<div>新闻：{{$route.params.id}}</div>'
        }
      },

      {
        path: '/b',
        component: {template: '<div>bbbbb</div>'}
      },
      {
        path: '/c',
        component: {template: '<div>cccccc</div>'}
      }
    ]
  });

  let vm=new Vue({
    el: '#div1',
    data: {},
    methods: {
      fn1(){
        this.$router.push('/news/19');
        //this.$router.replace({name: 'news', params: {id: Math.random()}});
      },
      fn2(){
        this.$router.push('/b');
      },
      fn3(){
        this.$router.push('/c');
      }
    },
    router,
    watch: {
      $route(value, old_value){
        console.log(value, old_value);
      }
    }
  });
  </script>
</html>

但用watch进行路由监视不推荐，因为只能看，无法干预，官方更推荐使用路由守卫，因为可以进行干预。

？

8.多视图

使用多个router-view，用name去进行标注

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js" charset="utf-8"></script>
    <script src="vue-router.js" charset="utf-8"></script>

</head>
<body>
<div id="div1">
    <div class="links">
        <router-link to="/">首页</router-link>
        <router-link to="/news">新闻</router-link>
    </div>
    <!--1.路由容器-->
    <router-view name="header"></router-view>
    <router-view></router-view><!--默认视图default-->
    <router-view name="footer"></router-view>
</div>
</body>

<script>
    const headerCmp = {
        template:'<div>头部</div>'
    };
    const footerCmp = {
        template:'<div>底部</div>'
    };
    const newsCmp = {
        template: '<div>新闻</div>'
    };
    const userCmp = {
        template: '<div>用户</div>'
    };
    const indexCmp = {
        template: '<div>首页</div>'
    };


    //2.路由表
    let router=new VueRouter({
        routes: [
            {
                path:'/',
                name:'index',
                //完成视图对应的工作,以router-view的name与声明的变量进行配对
                components: {
                    default:indexCmp,//默认视图
                    header:headerCmp,
                    footer:footerCmp
                }
            },
            {
                path:'/news',
                name:'news',
                components:{
                    default:newsCmp,
                    header:headerCmp,
                    footer:footerCmp
                }
            }
        ]
    });

    let vm=new Vue({
        el: '#div1',
        data: {},
        methods: {
        },
        router
    });
</script>
</html>