Vue的基础知识

Vue介绍

vue分为两个版本，开发版本development和生产版本production 开发版本：vue.js 里，有注释，有空格，有换行等，并且有提示，尤其是错误提示生产版本：vue.js 被压缩成立一行，所有不必要的注释、空格、换行等，都被删除，而且删除了所有的提示，目的是为了减小项目体积，是打开页面更快，项目上线时用。

使用Vue

<!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>
        <!-- 1.引入Vue -->
        <script src="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <!-- 2.新建#app -->
        <div id="app">
            <!-- 6.双大括号展示数据 -->
            <button @click="count++">Count is:{{count}}</button>
        </div>
        <script>
            // 3.导入createApp
            const { createApp } = Vue;//ES6对象的解构赋值
            createApp({
                data() {//ES6对象的解构赋值（函数）
                    return {
                        count: 0, //4.创建数据
                    };
                },
            }).mount('#app');//5.挂载到#app上

            /* Vue.createApp({
            data:function(){
                return{
                    count:0
                }
            }
        }).mount('#app') */
        </script>
    </body>
</html>

文本插值

<!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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <p>{{msg}}</p>
            <!-- 最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)： -->
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        msg: "Hello,World",
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

js中的数据展示在界面上，相当于原生js中的innerText方法

原始HTML

双大括号将会将数据插值为纯文本，而不是 HTML。若想插入 HTML，你需要使用v-html 指令：

<!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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <p>我会{{msg}}</p>
            <p>我会 <span v-html="msg">{{msg}}</span>了</p>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        msg: "<strong>Vue</strong>",
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

本指令相当于原生js中的innerHTML

Attribute 绑定

<!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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
        <img v-bind:src="imgUrl" alt="">
        <img :src="imgUrl" alt="">
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        imgUrl:'1.png'
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

v-bind 来修改标签属性，简写用:即可。

布尔型 Attribute

布尔型 attribute 依据true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。

<!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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
        <audio src="" :controls="ctl"></audio>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        ctl:true //false
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

同时绑定多个Attribute

<!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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <div v-bind="obj">asd</div>
            <div :="obj">简写成冒号也可以</div>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        obj: {
                            id: "textId",
                            class: "textClass", //注意：class名在js中要写成className，在这里用class或className都可以
                            title: "我是title",
                        },
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

使用 JavaScript 表达式

<!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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <p>number:{{num+1}}</p>
            <p>小命本次考试{{scoreNum<60?'不及格':'及格'}}</p>
            <!-- 这里必须是表达式 -->
            <!-- 反转字符串 -->
            <p :id="`list-${id}`">{{message.split('').reverse().join('')}}</p>
            
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        num:0,
                        scoreNum:59,
                        message:'Hello,World',
                        id:1
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

注意： 每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码（语句不可以。）

调用函数

可以在绑定的表达式中调用函数，但是非常不建议如此做，可以使用Math或Data等全局暴露的函数。

<p>生成一个随机数{{Math.random()}}</p>

计算属性

<!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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <p>{{reverseStr}}</p>
            <ul>
                <li>{{text.split("").reverse().join("")}}</li>
                <li>{{text.split("").reverse().join("")}}</li>
                <!-- 上面两行，同样的功能计算两次，消耗性能，并且导致HTML代码臃肿，下面计算属性更优 -->
                <li>{{reverseStr}}</li>
                <li>{{reverseStr}}</li>
                <li>{{reverseStr}}</li>
                <li>{{reverseStr}}</li>
            </ul>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        text: "Hello,world",
                    };
                },
                computed: {
                    reverseStr() {  // 这里一定要指定this.text，this指的是当前实例，可以理解为data里的数据
                        return this.text.split("").reverse().join("");
                    },
                },
            }).mount("#app");
        </script>
    </body>
</html>

事件处理

<!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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <p>{{count}}</p>
            <button v-on:click="increment()">+</button>
            <button @:click="increment()">+</button>
            <button @:click="decrement()">-</button>
            <button v-on:click="decrement()">-</button>
            <button @:click="increment(5)">+5</button>
            <button v-on:click="decrement(5)">-5</button>
            
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        count: 0,
                    };
                },
                computed: {
                    //计算属性
                },
                methods: {
                    //计算方法
                    increment(a=1) {
                        this.count+=a;
                    },
                    decrement(a=1){
                        this.count-=a
                    }
                },
            }).mount("#app");
        </script>
    </body>
</html>

计算属性VS计算方法

注意： 计算属性和方法，在结果上确实是相同的，然而不同之处在于计算属性会基于其响应式依赖而被缓存。一个计算属性仅会在其响应式依赖更行时才会被重新计算。

<!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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <input type="number" v-model="count">
            <p>输入的数字乘以2:{{chengYi2}}</p>
            <p>{{methodChengYi2()}}</p>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        count: 0,
                    };
                },
                computed: {
                    chengYi2(){//当数据来源被改变，则计算属性重新计算

                        return this.count*2
                    }
                },
                methods: {
                    methodChengYi2(){//何时调用，何时计算
                        return this.count*2
                    }
                },
            }).mount("#app");
        </script>
    </body>
</html>

条件渲染

<!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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-if="type==='A'">AAAA</li>
                <li v-else-if="type==='B'">BBBB</li>
                <li v-else>CCCC</li>
            </ul>
            <p v-show="seen">现在你看得到我</p>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        type: "A",
                        seen:true
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

列表渲染

<!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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>书名</th>
                        <th>价格</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="book of books" :key="book.id">
                        <!-- key一般是数据库里的数据上的唯一且不重复的主键——即id -->
                        <td>{{book.id}}</td>
                        <td>{{book.name}}</td>
                        <td>{{book.price}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        books: [
                            { id: 0, name: "三体", price: 68 },
                            { id: 1, name: "平凡的世界", price: 89 },
                            { id: 2, name: "三国演义", price: 48 },
                        ],
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

v-for循环对象

<!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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(value,key,index) in obj">
                    {{ index }} {{ key }}:{{ value }}
                </li>
            </ul>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        obj: {
                            name: "xiaoming",
                            age: 20,
                            location: "Beijing",
                        },
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

表单输入绑定

<!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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <!-- <input type="text" :value="text" @input="ipt($event)"> -->
            <input type="text" v-model="text">
            <p>{{text}}</p>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        text: "Hello,World",
                    }
                },
                /* methods:{
                    ipt(event){
                        this.text=event.target.value
                    }
                } */
            }).mount("#app");
        </script>
    </body>
</html>

表单输入绑定

多行文本，即换行符，可以被v-model实时修改数据，此CSS属性可以展示字符串中的换行符

<!DOCTYPE html>
<html>
    <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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <p style="white-space: pre-line;">{{message}}</p>
            <textarea name="" id="" v-model="message"></textarea>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        message:''
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

复选框

数据的单向绑定

<!DOCTYPE html>
<html>
    <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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <label for="ipt">
                <input type="checkbox" id="ipt" :checked="checked">数据单向绑定，data驱动UI，UI不可修改data
                <p>{{checked}}</p>
            </label>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        checked:false
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

数据的双向绑定

<!DOCTYPE html>
<html>
    <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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <label for="ipt">
                <input type="checkbox" id="ipt" v-model="checked">
                <p>{{checked}}</p>
            </label>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        checked:true
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

将多个复选框绑定到同一个数组或集合

<!DOCTYPE html>
<html>
    <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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <h2>选中的人是:{{checkedNames}}</h2>
            <input type="checkbox" v-model="checkedNames" value="Jack">Jack
            <input type="checkbox" v-model="checkedNames" value="John">John
            <input type="checkbox" v-model="checkedNames" value="Mike">Mike
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        checkedNames:[]
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

单选按钮

<!DOCTYPE html>
<html>
    <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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <h2>选中的人是:{{picked}}</h2>
            <input type="radio" v-model="picked" value="1">男
            <input type="radio" v-model="picked" value="0">女

        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        picked:1
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

选择器

<!DOCTYPE html>
<html>
    <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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <div>Selected: {{ selected }}</div>
            <select v-model="selected">
                <option disabled value="">Please select one</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        selected: "",
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

注意: 如果 v-model 表达式的初始值不匹配任何一个选择项，元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。

多选

<!DOCTYPE html>
<html>
    <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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <div>Selected: {{ selected }}</div>
            <select v-model="selected" multiple>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        selected: []
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

修饰符

.lazy

默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据

.number

如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入
如果该值无法被 parseFloat() 处理，那么将返回原始值。
number 修饰符会在输入框有 type="number" 时自动启用。

.trim

如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符

<!DOCTYPE html>
<html>
    <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="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="message">
            <input type="text" v-model.lazy="message">
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        message:''
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>

生命周期

<!DOCTYPE html>
<html>
    <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="https://unpkg.com/vue@3"></script>
        <style>
            
        </style>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        message:111
                    };
                },
                setup(){
                    console.log('setup');
                },
                beforeCreate(){
                    // this.test()  失败
                    console.log('beforeCreate');
                },
                created(){
                    this.test()     //成功
                    console.log('created');
                },
                beforeMount(){
                    console.log('beforeMount');
                },
                mounted(){
                    this.test()
                    console.log('mounted');
                },
                beforeUpdate(){
                    this.test()
                    console.log('beforeUpdate');
                },
                updated(){
                    console.log('updated');
                },
                beforeUnmount(){
                    console.log('beforeUnmount');
                },
                unmounted(){
                    
                    console.log('unmounted');
                },
                methods:{
                    test(){
                        console.log('test');
                    }
                }

            }).mount("#app");
        </script>
    </body>
</html>

watch 侦听器

<!DOCTYPE html>
<html>
    <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="https://unpkg.com/vue@3"></script>
        <style></style>
    </head>
    <body>
        <div id="app">
            <p>{{message}}</p>
            <input type="text" v-model="message" />
            <!-- name没有被监听（watch），所以name不会有alert -->
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        message: "111",
                        name: "小明",
                    };
                },
                watch: {
                    message() {
                        if (this.message.length > 10) alert("long");
                    },
                },
            }).mount("#app");
        </script>
    </body>
</html>

Vue中的DOM操作

<!DOCTYPE html>
<html>
    <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="https://unpkg.com/vue@3"></script>
        <style>
            #test{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="test" ref="test"></div>
            <button @click="big">变大div</button>
            <input type="text" ref="ipt">
        </div>
        <script>
            const { createApp } = Vue;
            createApp({
                data() {
                    return {
                        
                    };
                },
                methods:{
                    big(){
                        console.log(this.$refs);//对象
                        this.$refs.test.style.width='200px'
                    }
                },
                mounted(){//在mounted之后才会真正的有 $refs
                    console.log(this.$refs);
                    this.$refs.ipt.focus()
                }
            }).mount("#app");
        </script>
    </body>
</html>

posted @ 2022-09-14 20:10 千里长安街阅读(159) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

千里长安街

Vue的基础知识

Vue介绍

使用Vue

文本插值

原始HTML

Attribute 绑定

布尔型 Attribute

同时绑定多个Attribute

使用 JavaScript 表达式

调用函数

计算属性

事件处理

计算属性VS计算方法

条件渲染

列表渲染

v-for循环 对象

表单输入绑定

表单输入绑定

复选框

数据的双向绑定

单选按钮

选择器

多选

修饰符

.lazy

.number

.trim

生命周期

watch 侦听器

Vue中的DOM操作

公告

v-for循环对象