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:09 千里长安街阅读(170) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· js拓展-Dom与事件，字符串，数组方法，object对象，作用域

· 使用Vue实现数据的模糊匹配

· Vue 入门。

· Vue.js

· vue基础

阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端

公告

昵称：千里长安街
园龄： 2年10个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

文章分类

工作日志(1)

千里长安街

Vue的基础知识

Vue介绍

使用Vue

文本插值

原始HTML

Attribute 绑定

布尔型 Attribute

同时绑定多个Attribute

使用 JavaScript 表达式

调用函数

计算属性

事件处理

计算属性VS计算方法

条件渲染

列表渲染

v-for循环对象

表单输入绑定

表单输入绑定

复选框

数据的双向绑定

单选按钮

选择器

多选

修饰符

.lazy

.number

.trim

生命周期

watch 侦听器

Vue中的DOM操作

公告

搜索

常用链接

随笔分类

随笔档案

文章分类

阅读排行榜

千里长安街

Vue的基础知识

Vue介绍

使用Vue

文本插值

原始HTML

Attribute 绑定

布尔型 Attribute

同时绑定多个Attribute

使用 JavaScript 表达式

调用函数

计算属性

事件处理

计算属性VS计算方法

条件渲染

列表渲染

v-for循环 对象

表单输入绑定

表单输入绑定

复选框

数据的双向绑定

单选按钮

选择器

多选

修饰符

.lazy

.number

.trim

生命周期

watch 侦听器

Vue中的DOM操作

公告

搜索

常用链接

随笔分类

随笔档案

文章分类

阅读排行榜

v-for循环对象