Vue--事件

紫夜✘

已于 2023-02-14 08:03:56 修改

阅读量244

点赞数

分类专栏： javascript 文章标签： vue.js 前端 javascript Powered by 金山文档

于 2023-02-13 15:36:17 首次发布

本文链接：https://blog.csdn.net/Purple_night_/article/details/129002727

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue实例中el属性：代表vue的作用范围，以后在vue的作用范围内才可以使用vue的语法

vue实例中的data属性：用来给vue实例绑定一些相关数据

在使用{{}}进行获取data中的数据时，可以在{{}}中书写表达式，运算符，调用相关的方法，以及逻辑运算

el属性可以书写任意的类选择器，标签选择器等。

事件

事件：发生特定的动作，click，dbclick，blur

事件源：dom元素。

在vue中绑定事件通过v-on指令来完成。v-on:事件名

在v-on:事件名="函数名(参数)"

在vue中事件的函数统一定义在vue实例的methods属性中

在vue定义的事件中，this指的就是当前vue实例。this后面会经常用。

面试题：v-show和v-if

都是用来控制页面元素是否显示

v-show底层是操作css样式display:none

v-if底层操作的DOM元素。

👧什么时候不加双大括号

Vue用Vue不加。

👧v-for遍历

v-model:双向绑定

使用v-model可以实现双向绑定

表单中数据变化导致vue实例data数据变化

vue实例中的data数据变化导致表单元素中数据变化，称之为双向绑定。

一般情况下，用在表单元素下。

@click.stop:阻止事件的冒泡。

@click.prevent:组织标签的默认行为。

@click.self:只有在指定的元素触发才生效。

<input type="text" v-model="msg" @keyup.enter="keyups"> 键盘抬起回车触发该事件

Vue中组件的使用

组件：减少Vue实例对象中的代码量

全局组件：可以在任意的Vue实例的范围内注册

Vue.component("login",{

template:"<div><h1>用户登录</h1></div>"

});

//全局组件注册

//参数一：组件名称

//参数二：组件的配置对象{}

//template:用来书写组建的html代码，在template中必须有且只有一个容器

    <div id="app">
        <login></login>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //全局组件注册
        //参数一：组件名称
        //参数二：组件的配置对象{}
        Vue.component("login",{
            template:"<div><h1>用户登录</h1></div>"
        });
    </script>

局部组件：

  //局部组件的定义
        const login={
            template:"<div><h2>用户登录</h2></div>"
        }

通过模板标签形式注册局部组件

    <div id="app">
        <login></login>
    </div>
    <!--通过模板标签的形式注册局部部件-->
    <template id="loginTemplate">
        <div><h2>用户登录</h2></div>
    </template>
    <script src="js/vue.js"></script>
    <script>
        //局部组件的定义
        let login={
            template:"#loginTemplate",
        }
        const app=new Vue({
            el:"#app",
            data:{},
            components:{
                login
            }

        })
    </script>

路由：

是根据请求的路径按照一定的规则进行请求转发从而帮助我们实现统一的请求管理。

作用：用来在vue中实现组件之间的动态转换。

Axios

Axios是一个基于promise的网络请求库，可以用于浏览器和node.js

异步请求，局部刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <button @click="getDemo">GET</button>
       <button @click="postDemo">POST</button>
       <button @click="axiosDemo">Axios</button>

    </div>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
              Username:"admin",
              password:"123456"
            },
            methods:{
                getDemo(){
                    axios.get("aaa?Username="+this.Username+"&password="+this.password).then(function(response){
                        console.log(response);
                    }).catch(function(err){
                        console.log(err);
                    });
                },
                postDemo(){
                    axios.post("aaa",{
                        Username:this.Username,
                        password:this.password
                    }).then(function(response){
                        console.log(response+"---------------");
                    }).catch(function(err){
                        console.log(err+"********************");
                    })
                },
                axiosDemo(){
                    axios({
                        method:'post',
                        url:'/user/123456',
                        data:{
                            firstName:'Fred',
                            lastName:'Flintstone'
                        }
                    }).then(function(response){

                    }).catch(function(err){
                        
                    });
                }
            }
          
        })
    </script>
</body>
</html>