学习Vue基础总结（2）

礼礼礼礼礼礼

已于 2024-09-13 22:16:52 修改

阅读量458

点赞数 19

文章标签：前端 javascript html

于 2024-09-10 23:11:18 首次发布

本文链接：https://blog.csdn.net/2301_81117102/article/details/142111438

版权

1. 事件目标：

event.target 属性指向触发事件的元素。

(1)阻止默认行为:event.preventDefault()

某些事件（如链接的点击事件）具有默认行为（如导航到新页面）。可以使用 event.preventDefault() 方法来阻止这些默认行为。

(2)阻止事件冒泡:event.stopPropagation()

当事件在 DOM 树中传播时，它首先发生在最内层的元素上，然后向外层元素传播（称为冒泡）。使用 event.stopPropagation() 方法可以阻止事件进一步冒泡

2.双向数据绑定:v-model

双向数据绑定:页面数据发生变化,脚本数据发生变化, 脚本数据发生变化，同时页面数据也发生变化。类似于数据同步.

3.绑定文本与HTML:v-text 和 v-html

(1)v-text 指令用于绑定纯文本,v-html 指令用于绑定 HTML 代码。

(2)v-text 指令的优先级高于 v-html,因此如果同时使用这两个指令,v-text 将会覆盖 v-html。

(3)v-text 指令会将数据解释为纯文本,并将其作为textContent 设置到元素上。

(4)v-html 指令会将数据解释为 HTML 代码，并将其作为 innerHTML 设置到元素上。

<body>
    <div id="app">
        <p v-text="link1">
        </p>
        <p v-html="link2">
        </p>
    </div>
    <script>
        const {createApp}=Vue
        createApp({
            data() {
                return {
                    link1: '<a href="https://www.baidu.com">百度</a>',
                    link2:' <a href="https://www.163.com">网易</a>'
                }
            },
        }).mount('#app')
    </script>
</body>

4.绑定class与style:

(1):class 指令用于动态绑定 class 名。

(2):style 指令用于动态绑定 style 样式。

(3):class 指令可以绑定一个对象，对象的属性名将作为 class 名，属性值决定是否添加 class。

(4):style 指令可以绑定一个对象，对象的属性名将作为 style 名，属性值决定 style 的值。

<style>
        .btn1{
            width: 100px;
            height: 100px;
            font-size: 16px;
            color: #999;
        }
        .btn2{
            background-color:aquamarine;
            border-left: solid 1px #ccc;
            border-right: solid 2px #666;
            border-top: solid 1px #ccc;
            border-bottom: solid 2px #666;
        }
    </style>
</head>
<body>
    <div id="app">
        <button type="button" :class="classname1">绑定样式</button>
       <button type="button" :class={btn1:btn1_choose,btn2:btn2_choose}>绑定对象样式</button>
        <button type="button" :class="[classname1,classname2]">绑定数组样式</button>
        <button type="button" :class="[btn1_choose?'btn1':'',btn2_choose?'btn2':'']">绑定数组样式中含逻辑运算</button>
<hr>
        style绑定样式<br>
        <button type="button" :style="style1">绑定样式</button>
    </div>
    <script>
        const {createApp}=Vue
        createApp({
            data() {
                return {
                    classname1: "btn1",
                    classname2: "btn2",
                    btn1_choose: true,
                    btn2_choose: false,
                    style1:{width:'100px',  height:'30px',  backgroundColor:'red',  color:'green',  border:'1px solid black'}  
                }
            },
        }).mount('#app')
    </script>
</body>

5.条件渲染:v-if 、v-else 和 v-show

(1)v-if 指令用于条件渲染元素。

(2)v-else 指令表示 v-if 指令的否定情况。

(3)v-else会找离他最近的v-if。

(4)v-show 指令用于条件渲染元素，不同的是它会始终渲染元素，只是简单地切换元素的 display 样式

 <body>
    <div id="app">
        <p>
            <a href="#" v-if="user.username=='admin'">编辑</a>
        </p>
        <p>
            <a href="#" v-if="user.username=='admin'">编辑</a>
            <a href="#" v-if="user.username!='admin'">详情</a>
        </p>
        <p>
            <a href="#" v-show="user.username=='admin'">编辑</a>
            <a href="#" v-show="user.username!='admin'">详情</a>
        </p>
        <p>
            <button type="button" @click="change">测i换成GUEST </button>{{user.username}}
        </p>
    </div>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    user: {
                        username: 'zhangmingli'
                    }
                }
            },
            methods: {
                change() {
                    if (this.user.username == 'admin') {
                        this.user.username = 'GUEST'
                        event.target.innerText = '切换成ADMIN'
                    } else {
                        this.user.username = 'admin'
                        event.target.innerText = '切换成GUEST'
                    }
                }
            },
        }).mount('#app')
    </script>
</body>

6.列表渲染:v-for

(1)v-for 指令用于遍历数组或对象，根据数据渲染元素或模板块。

(2)v-for 指令需要使用 item in items 的形式，其中 items 是源数据数组或对象,item 是数组或对象的当前项。

(3)v-for 指令也可以与 v-if 一起使用，即先过滤数据，再渲染。

<body>
    <div id="app">
        <ul>
            <li v-for="(u,index) in user">
                {{index}}-{{u.id}}-{{u.name}}-{{u.age}}
            </li>       
        </ul>
    </div>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    user: [
                        { id: 1, name: 'ZhaoWei', age: 25 },
                        { id: 2, name: 'WeiWei', age: 25 },
                        { id: 3, name: 'ZhaoZhao', age: 25 },
                    ]
                }
            }
        }).mount('#app')
    </script>
</body>

7.计算属性:computed

(1)computed 选项用于创建计算属性。

(2)computed 选项返回一个函数，函数的返回值将会是计算属性的值。

(3)computed 选项的 getter 函数会在读取属性值时调用，而 setter 函数会在写入属性值时调用。

       <div id="app">
        姓: <input type="text" v-model="firstName1">
        名: <input type="text" v-model="lastName1">
        姓名: <input type="text" v-model="username1"><br>
        姓: <input type="text" v-model="firstName2">
        名: <input type="text" v-model="lastName2">
        姓名: <input type="text" v-model="username2"><br>
    </div>
    <script>
        const {createApp}=Vue
        createApp({
            data() {
                return {
                    firstName1: '',
                    lastName1: '',
                    firstName2: '',
                    lastName2: '',
                }
            },
            computed:{
                username1(){
                    return this.firstName1 +''+this.lastName1
                },
                username2:{
                    get(){
                         return this.firstName2 +''+ this.lastName2
                        },
                    set(val){
                        let arr=val.split('')
                        this.firstName2=arr[0]
                        this.lastName2=arr[1]
                    }
                }
            }
        }).mount('#app')

8.监视属性:watch

(1)watch 选项用于观察数据的变化。

(3)回调函数会在属性值变化时调用，并传入新值和旧值。

(4)watch 选项可以观察单个属性，也可以观察多个属性。

   <body>
    <div id="app">
        姓: <input type="text" v-model="firstName">
        名: <input type="text" v-model="lastName">
        姓名: <input type="text" v-model="userName"><br>
    </div>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    firstName: '',
                    lastName: '',
                    userName: ''
                }
            },
            watch:{
                userName(newVal,oldVal){//新数据，老数据
                    if(newVal!=''){
                        let strArr=newVal.split("");
                        this.lastName=strArr[0];
                        this.firstName=strArr[1];
                    }else{
                        this.lastName='';
                        this.firstName='';
                    }
                }
            }
        }).mount('#app')
    </script>
</body>

1.ref 用于创建一个响应式的数据引用对象，它通常用于基本数据类型（如字符串、数字等），但在 Vue 3 中也可以用于对象或数组，尽管对于复合类型数据，ref 返回的对象有一个 .value 属性，用于访问或修改其内部值。

2.reactive 用于创建一个响应式的对象或数组。与 ref 不同，reactive 返回的对象可以直接访问和修改其属性，而无需通过 .value 属性。这使得它更适合于处理复杂的数据结构，如对象或数组。

3.computed 用于创建计算属性，它可以根据其他响应式数据源的值来计算和返回新值。它可以帮助我们在不重新渲染组件的情况下，根据数据变化自动更新相关的视图。