Vue的使用总结（一）

最新推荐文章于 2024-08-02 17:54:22 发布

交大小萝卜

最新推荐文章于 2024-08-02 17:54:22 发布

阅读量241

点赞数 2

文章标签： vue.js 前端框架前端

本文链接：https://blog.csdn.net/m0_49799219/article/details/129393778

版权

Vue基础

文章目录

一、如何创建vue模板？

1.head中需要引入vue.js配置文件

  <script src="vue.js"> </script>

2.在body中需要创建容器<div>

body>
    <!-- 创建容器 -->
    <div id="box">
        <h3>你好，{{name}}</h3>
      
    </div>

3.创建vue对象

<script>
        new Vue({
            el:"#box",
            data:{
                name:"djtu",
                url:"http://www.baidu.com",
                hello:"bye",
     
            } 
             methods：{
              
            }          
        })
    </script>

(1)el：指定容器

(2)data：为指定插值语法中内容赋值

(3) methods：可以实现事件的具体功能

二、模板语法

1.插值语法

（1）语法格式:{{js表达式}} 例如：{{name}}

（2）插值语法只能用于标签体中

（3）需要在data中给js表达式传入数据

（4）若data中出现重复的js表达式，展现的数据不同但要在容器中同时展示，例如name ：“djtu” ,name:"大连交通"，解决办法是在data中声明一个类，把其中一个js表达式存放在这个类里，通过类名.js表达式名来调用。例如data：{school：{name：“大连交通”}} ，插值语法{{school.name}}

2.动态绑定

（1）语法格式：v-bind 简写：例如

<a :href="url" :x="hello">点我去{{school.name}}学习</a>

（2）动态绑定用于解析标签

（3）需要从data中获取数据例如：hello：“wyx”

（4）示例代码如下：

<!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>
    <script src="vue.js"> </script>
</head>
<body>
    <!-- 定义容器 -->
    <div id="box">
        <!-- 插值语法一般都用在标签体里-->
        <h3>你好，{{name}}</h3>
        <!-- 动态绑定解析标签，被绑定的成为js表达式，需要从data中获取数据-->
        <a :href="url" :x="hello">点我去{{school.name}}学习</a>
    </div>
    <!-- 创建vue对象 -->
    <script>
        new Vue({
            el:"#box",
            data:{
                name:"djtu",
                url:"http://www.baidu.com",
                hello:"bye",
                school:{
                    name:"百度"
                }
            }            
        })
    </script>
</body>
</html>

3.数据绑定

（1）单向数据绑定：v-bind：简写 “：” data修改，则view修改

（2）双向数据绑定：v-model ：data与view同时变化，用于表单类标签（带value的）例如：input，select等

（3）示例代码：

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 创建容器 -->
    <div id="box">
        <!-- 单向数据绑定v-bind：数据修改，view改变，view改变，data不变 -->
        单向数据绑定：<input type="text" :value="name"><br>
        <!-- 双向数据绑定v-model：data与view双向改变 ，只能用于表单类元素（带有value值的）-->
        双向数据绑定：<input type="text" v-model="qq">
    </div>
    <!-- 创建vue对象 -->
    <script>
        new Vue({
            el:"#box",
            data:{
              name:"djtu",
              qq:"大连交通"
            }
        })
    </script>
</body>
</html>

三、el与data的两种写法

1.el：（1）常规：声明在vue实例内部：el：“#容器名”

（2）在vue实例外指定容器：vm.$mount("#容器名")

<script>
        const v=new Vue({
       
         // el：“#box”
        })
        console.log(v)
        // 指定容器
        v.$mount("#box")
    </script>

2.data：（1）对象式：格式data：{}

（2）函数式：格式 data：function（）{

return{

}

<script>
        const v=new Vue({
            // 对象式
            // data:{
            //     name:"djtu"
            // }
            data:function(){
                return{
                    name:'大连交通'
                }
            }//函数式，组件必须用函数式，“：function可以省略”
        })
  
    </script>

打印语句：console.log（对象）

四、理解MVVM模型

1.（1)model:视图

（2）view：数据

（3）view-model：vue实例（vm表示）

2.数据代理（Object.defineProperty就是将某一属性添加到某个对象中去）

（1）Vue的数据代理利用了Object.defineProperty（需要添加的对象，属性，value）

（2） enumerable:true,//控制属性可以枚举

writable:true, //控制属性可以在console修改并更新对象

configurable:true, //控制属性可以在console删除并更新对象

（3）get和set方法

get：当在console读取属性时（属性为...点击即为读取），get函数就会被调用，且返回值就是a该属性的值

set：当在console中修改属性时（例如person.age=30）,set函数就会被调用

(4)数据劫持：vm中的_data里面包含的类似于数据代理的属性，他表示的是数据劫持，目的是为了实现响应式，数据改变时，随即将画面进行渲染。

<!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>、
    <!-- 引入vue -->
    <script src="vue.js"></script>
</head>
<body>
    <script>
        let number=18
        let person={
            name:"wyx",
            school:"djtu"
        }
        // 把属性打印出来，age与其他属性颜色不同，表示不可以被枚举
        Object.defineProperty(person,"age",{
            // value:18,
            // enumerable:true,//控制属性可以枚举
            // writable:true, //控制属性可以在console修改并更新对象
            // configurable:true,  //控制属性可以在console删除并更新对象

            //当有人读取age时(在console中age为...点击即为读取)，get函数就会被调用，且返回值就是age的值
            get:function(){
                return number
                
            },
            //当有人修改age时（即在console中通过person.age=30即为修改）,set函数就会被调用
            set:function(value){
                console.log("有人修改age属性，修改为"+value)
                number=value
            }
            
        })
        console.log(person)
        console.log(Object.keys(person))
    </script>
</body>
</html>

五、事件处理

1.指令都是v-开头的，v-on表示事件绑定，例如：v-on:click=“message” 简写形式：@click=“message”

2.事件绑定都需要在methods中实现,例如上述例子，message(）{

alert（“欢迎学习”） //alert弹出提示信息

}

3.message（event）中默认传入了一个事件对象event，可写可不写

其中有两个个api：

（1）event.target：返回事件绑定的标签及内容例如:<button>点我提示信息</button>

（2）event.target.value:检测所输入的值

4.被事件绑定的表达式可以带括号，并且可以传入参数。

5.案例：

   <div id="box">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 指令都是v-开头，绑定点击事件v-on 简写@-->
        <button v-on:click="message">点我提示信息</button>
        <!-- 传参数需要加小括号 -->
        <button v-on:click="message2(66,$event)">点我提示信息2</button>
    </div>
    <script>
        // 创建vue实例
        const vm=new Vue({
            // 指定容器
            el:"#box",
            data:{
                name:"djtu"
            },
            methods:{
                // 默认传入了个事件对象event
                message(){
                    console.log(event.target)
                    alert("你好")
                   
                },
                message2(number,event){
                    console.log(number,event)
                    alert("再见")
                   
                }
            }
            
        })
    </script>

六、事件修饰符

1.我们在对应的绑定事件后面可以加入事件修饰符来控制事件触发

2.（1）prevent：阻止默认事件发生，例如：实现我们点击链接，弹出提示信息，不跳转链接。

（2）stop：阻止冒泡事件发生，例如：在嵌套环境下，外层和里层同时绑定一个事件，触发事件后，同时触发两个事件，我们可以利用stop，阻止外层事件发生。

（3）once：事件只能触发一次，当我们点击按钮弹出提示信息后，再点击按钮，就不会弹出提示信息。

（4）可以多次对同一个事件使用不同的修饰符，例如：@click.prevent.stop 先阻止默认事件，再停止冒泡。

（5）引入class可以加样式style

<!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>
    <script src="vue.js"> </script>
    <style>
        .demo1{
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="box">
        <!-- 引入class可以加样式style -->
        <!-- 点击链接后出现对话框提示信息，然后跳转 -->
        <!-- prevent阻止默认事件，点击后阻止 跳转 -->
         <!-- stop阻止冒泡，使提示信息只显示一次 -->
        <!-- once事件只触发一次（常用），当点击按钮触发提示信息，当再次点击时不会再显示提示信息 -->
        <!-- 修饰符可以连续写，例如先阻止默认事件，再停止冒泡，例如：@click.prevent.stop -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">进入教务系统</a>
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
        <button @click.once="showInfo">点击</button>
    </div>
    <script>
        const vm=new Vue({
            el:"#box",
            methods:{
                showInfo(){
                    alert("同学你好")
                    
                }
            }
        })
    </script>
</body>
</html>

七、键盘事件

1.@keyup：点击按键后，松开按键才可以触发事件（常用）

@keydown：点击按键后，不松开就触发了事件

2.Vue常用的按键别名：

回车：enter

删除：delete

退出：esc

空格：space

换行：tab 必须配合（keydown）使用

上：up

下：down

左：left

右：right

ctrl，alt，meta:系统修饰键，如果配合keyup使用必须配合其他键位一起使用例如：ctrl+y 当 y 松开后事件触发，如果配合keydown使用，则按下按键后，立即触发。

3.如果需要固定的两个或两个以上按键才能触发，例如ctrl+y才能触发事件，可以写成：@keyup.ctrl.y=“show”

<div id="box">
        <!-- Vue常用的按键别名：
        回车：enter
        删除：delete
        退出：esc
        空格：space
        换行：tab 必须配合（keydown）使用
        上：up
        下：down
        左：left
        右：right
        ctrl，alt，meta:系统修饰键，如果配合keyup使用必须配合其他键位一起使用 例如：ctrl+y 当y松开后事件触发，
                                如果配合keydown使用，则按下按键后，立即触发
        -->
        <!-- 绑定键盘事件@keyup：按下按键，松开键子才会触发事件
                        @keydown：按下按键，即可触发事件 -->
        <!-- 如果需要固定按键才能触发，例如ctrl + y才能触发事件，则可以写成：@keyup.ctrl.y="show" -->
        <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="show
        ">
    </div>
    <script>
        const vm=new Vue({
            el:"#box",
            methods:{
                // e.target.value检测到输入框的值
                show(e){
                    // keyCode代表按键编码
                    // console.log(e.keyCode)
                    // 如果按下回车，console中就会返回当前输入框的值
                    // if(e.keyCode!==13) return
                   console.log(e.target.value)
                }
            }
        })
    </script>

4.姓名案例：

（1）利用插值语法实现：

    <div id="box">
     姓:<input type="text" v-model:value="firstN"><br>
     名:<input type="text" v-model:value="lastN"><br>
     全名：{{firstN}}-{{lastN}}
     <!-- slice（0,3）截取前三位字符 -->
    </div>
    <script>
        const vm=new Vue({
            el:"#box",
            data:{
                firstN:"张",
                lastN:"三"
            }
        })
    </script>

（2）利用methods实现

 <div id="box">
     姓:<input type="text" v-model:value="firstN"><br>
     名:<input type="text" v-model:value="lastN"><br>
     全名：<span>{{fullName()}}</span>
     <!-- 把fullName()函数中的返回值传到插值语法中,在模板中调用方法 -->
    </div>
    <script>
        const vm=new Vue({
            el:"#box",
            data:{
                firstN:"张",
                lastN:"三"
            },
            // this指的是vue实例对象
            methods:{
                fullName(){
                    return this.firstN.slice(0,3)+'-'+this.lastN
                    
                }
            }
        })
    </script>

总结：（1）把函数放在插值语法中，返回的是方法中的返回值，在模板中调用方法

（2）this在vm中使用一般指的是vue实例对象