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

news/2024/7/10 2:49:06 标签: Vue

文章目录

  • 三、Vue进阶用法
    • 1.事件修饰符
    • 2.computed—计算属性
    • 3.watch—监听属性
    • ※4.Vue-router
    • 5.命名路由
    • 6.JS控制路由跳转
    • 7.监视路由
    • 8.多视图

Vue_1">三、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>

Vuerouter_143">※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>

http://www.niftyadmin.cn/n/784842.html

相关文章

【easy】198. House Robber 123总结……

【easy】198. House Robber 123总结……

题目一&#xff1a; 一个极其简单的动态规划。 class Solution { public:int rob(vector<int>& nums) {int best0 0; // 表示没有选择当前houses int best1 0; // 表示选择了当前houses for(int i 0; i < nums.size(); i){ int temp best0; best0 ma…
阅读更多...
Vue框架入门学习(三)——路由嵌套、组件

Vue框架入门学习(三)——路由嵌套、组件

文章目录四、路由嵌套1.搭建2.子路由模块五、组件1.局部组件2.部署dev-server3.全局组件4.测试组件5.slot插槽6.组件的生命周期四、路由嵌套 1.搭建 首先创建工程和对应的目录&#xff0c;但是不将vue.js和vue.router.js导入进来&#xff0c;而是直接cmd到对应folder进行下载…
阅读更多...
Pathon1 - 基础1

Pathon1 - 基础1

一、 Hello world程序 print("Hello World!") 执行命令: python hello.py ,输出 执行 python hello.py 时&#xff0c;明确的指出 hello.py 脚本由 python 解释器来执行。 如果想要类似于执行shell脚本一样执行python脚本&#xff0c;例&#xff1a; ./hello.py &…
阅读更多...
【Scikit-learn Preprocessing 预处理】

【Scikit-learn Preprocessing 预处理】

均值&#xff1a; 方差&#xff1a;s才是方差&#xff0c;s^2是标准差 概率论中方差用来度量随机变量和其数学期望&#xff08;即均值&#xff09;之间的偏离程度 标准化&#xff1a; 方法一&#xff1a;使用sklearn.preprocessing.scale()函数 方法说…
阅读更多...
Vue框架入门学习(四)——Vue2初识

Vue框架入门学习(四)——Vue2初识

文章目录六、Vue21.基本结构2.App.vue3.Axios组件通信六、Vue2 1.基本结构 文件的相对位置 一个基本的Vue文件分为三层&#xff0c;html的模板层&#xff0c;组件层&#xff0c;渲染层 也可以省略之前所有的js渲染&#xff0c;用vue做渲染 新建一个Child.vue 然后将Child.v…
阅读更多...
【感知模型】

【感知模型】

定义 假设输入空间(特征向量)为X⊆Rn&#xff0c;输出空间为Y{-1, 1}。输入x∈X表示实例的特征向量&#xff0c;对应于输入空间的点&#xff1b;输出y∈Y表示示例的类别。由输入空间到输出空间的函数为 f(x)sign(wx b) &#xff08;1&a…
阅读更多...
Vue框架入门学习(五)——Vue-cli

Vue框架入门学习(五)——Vue-cli

文章目录七、Vue-cli1.环境搭建2.实例2.1 表单2.2 delete操作3.Vuex七、Vue-cli 1.环境搭建 首先安装vue-cli 安装成功的话&#xff0c;输入vue就可以弹出菜单 用vue list可以查看vue-cli的功能&#xff0c;像热更新和编译等等 然后开始构建一个项目&#xff0c;并且在此处…
阅读更多...
VS Sln图标空白修复办法

VS Sln图标空白修复办法

环境&#xff1a;Win10,VS2017,曾经安装并卸载过VS2015之前安装了两个版本的VisualStudio&#xff0c;卸载一个后&#xff0c;就出现了图标空白问题&#xff0c;重新设置默认打开程序也没有作用&#xff0c;经摸索解决办法如下。&#xff08;1&#xff09;在注册表里查找.sln &…
阅读更多...
最新文章

Copyright @ 2022~2023