Vue-基础核心（二）

小沐沐吖

发布于 2022-09-09 16:32:20

1K0

发布于 2022-09-09 16:32:20

文章被收录于专栏：小沐沐吖小沐沐吖

10、绑定样式

class样式： :class="xxx" xxx可以是字符串、对象、数组

字符串写法适用于：类名不确定，需要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

style样式： :style="{fongSize: xxx}"其中xxx是动态值 :style="[a,b]"其中a、b是样式对象

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>绑定样式</title>
    <script src="../js/vue.js"></script>
    <style>
        .a1{
            height: 100px;
            width: 100px;
            border: 1px solid black;
        }
        .a2{
            background-color: saddlebrown;
        }
        .a3{
            background-color: skyblue;
        }
        .a4{
            background-color: black;
        }
        .a5{
            border-style: double;
        }
        .a6{
            border-color: yellowgreen;
        }
        .a7{
           border-width: 10px;
        }
    </style>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <!-- 绑定class样式 -- 字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="a1" :class="mood" @click="changeClass">{{name}}</div>
        <br>

        <!-- 绑定class样式 -- 数组写法，适用于：要绑定的样式个数、名字都不确定 -->
        <div class="a1" :class="classArr">{{name}}</div>
        <!-- 绑定class样式 -- 对象写法，适用于：要绑定的样式个数、名字都确定，但要动态决定要不要 -->
        <div class="a1" :class="classObj">{{name}}</div>

        <!-- 绑定style样式 -- 对象写法 -->
        <div class="a1" :style="styleObj">{{name}}</div>
        <!-- 绑定style样式 -- 数组写法 -->
        <div class="a1" :style="[styleObj,styleObj2]">{{name}}</div>

    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                name: '尚硅谷',
                mood: 'a2',
                classArr: ['a5','a6','a7'],
                classObj: {
                    a5: false,
                    a6: false
                },
                styleObj: {
                    fontSize: '40px',
                },
                styleObj2: {
                    fontSize: '40px',
                    backgroundColor: 'red'
                }
            },
            methods: {
                changeClass(){
                    const arr = ['a2','a3','a4'];
                    const index = Math.floor(Math.random()*3);
                    this.mood = arr[index];
                }
            }
        })
    </script>
</body>
</html>

HTML

复制

11、条件渲染

v-if

写法：

v-if="表达式"
v-else-if="表达式"
v-else="表达式"

适用于：切换频率低的场景

特点：不展示的DOM元素直接被移除

注意：

v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”

v-show

写法：v-show="表达式"

适用于：切换频率较高的场景

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

备注

使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h2>当前的n值是{{n}}</h2>
        <button @click="n++">点我n++</button>
        <!-- v-show -->
        <!-- <h2 v-show="false">欢迎来到{{school}}</h2> -->
        <!-- <h2 v-show="1 === 1">欢迎来到{{school}}</h2> -->
        <!-- <h2 v-show="isShow">欢迎来到{{school}}</h2> -->

        <!-- v-if -->
        <!-- <h2 v-if="isShow">欢迎来到{{school}}</h2> -->

        <!-- 高频率切换 -->
        <div v-show="n == 0">Angular</div>
        <div v-show="n == 1">React</div>
        <div v-show="n == 2">Vue</div>
        <!-- 低频率切换 -->
        <div v-if="n == 0">Angular</div>
        <div v-else-if="n == 1">React</div>
        <div v-else-if="n == 2">Vue</div>
        <div v-else>Vue3</div>

        <template v-if="n == 1">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </template>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                school: '尚硅谷',
                isShow: true,
                n: 0
            }
        })
    </script>
</body>
</html>

HTML

复制

12、列表渲染

1.基本列表

v-for指令

用于展示列表数据
语法：v-for="(item,index) in items" :key="index"
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}--{{p.id}}
            </li>
        </ul>

        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value,k) in car">
                {{k}}-{{value}}
            </li>
        </ul>

        <!-- 遍历字符串 -->
        <h2>遍历字符串</h2>
        <ul>
            <li v-for="(char,index) in hello" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>

        <!-- 遍历指定次数 -->
        <h2>遍历指定次数</h2>
        <ul>
            <li v-for="(number,index) in 6" :key="index">
                {{number}}-{{index}}
            </li>
        </ul>

    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                persons:[
                    {id:'001',name: '张三',age: 18},
                    {id:'002',name: '李四',age: 19},
                    {id:'003',name: '五五',age: 12}
                ],
                car: {
                    name: 'Q7',
                    price: '70万',
                    color: "黑色"
                },
                hello: 'hello'
            }
        })
    </script>
</body>
</html>

HTML

复制

2.key的原理

面试题：react、 vue中的key有什么作用? （key的内部原理）

虚拟DOM中key的作用

key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟D随后Vue进行【新虚拟DOM】【虚拟DOM】的差异比较

对比规则

（1）旧虚拟DOM中找到了与新虚拟DOM相同的key

若虚拟DOM中内容没变,直接使用之前的真实DOM !
若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

（2）旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM,随后渲染到到页面
用index作为key可能会引发的问题

若对数据进行:逆序添加、逆序朋除等破坏顺序操作，会产生没有必要的真实DOM更新==>界面效果没问题,但效率低
如果结构中还包含输入类的DOM，会产生错误DOM更新==>界面有问题

开发中如何选择key?
最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值
如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>key的原理</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <button @click.once="add">添加一个老刘放在最上面</button>
        <ul>
            <!-- key作用：给节点做标识 -->
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
        </ul>
        <ul>
            <!-- key作用：给节点做标识 -->
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                persons:[
                    {id:'001',name: '张三',age: 18},
                    {id:'002',name: '李四',age: 19},
                    {id:'003',name: '五五',age: 20}
                ]
            },
            methods: {
                add(){
                    const p  = {id:'004',name: '老刘',age: 18};
                    this.persons.unshift(p);
                }
            },
        })
    </script>
</body>
</html>

HTML

复制

1-index作为key

2-id作为key

3.列表过滤

<!DOCTYPE html>
<html lang="zh">
<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>列表过滤</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) in filPersons" :key="index">
                {{p.name}}-{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;

        // 用watch实现
        // const vm = new Vue({
        //     // 绑定容器
        //     el: '#root',
        //     // 存储数据
        //     data: {
        //         keyWord: '',
        //         persons:[
        //             {id:'001',name: '周冬雨',age: 18,sex: '女'},
        //             {id:'002',name: '马冬梅',age: 19,sex: '女'},
        //             {id:'003',name: '周杰伦',age: 12,sex: '男'},
        //             {id:'003',name: '温兆伦',age: 12,sex: '男'},
        //         ],
        //         filPersons: []
        //     },
        //     watch: {
        //         // 监听keyWord
        //         keyWord: {
        //             // 初始化执行一次
        //             immediate: true,
        //             handler(val){
        //                 this.filPersons = this.persons.filter((p)=>{
        //                     return p.name.indexOf(val) != -1;
        //                 });
        //             }
        //         }
        //     }
        // })

        new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                keyWord: '',
                persons:[
                    {id:'001',name: '周冬雨',age: 18,sex: '女'},
                    {id:'002',name: '马冬梅',age: 20,sex: '女'},
                    {id:'003',name: '周杰伦',age: 19,sex: '男'},
                    {id:'003',name: '温兆伦',age: 21,sex: '男'},
                ]
            },
            computed:{
                filPersons(){
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) != -1;
                    });
                }
            }
        })
    </script>
</body>
</html>

HTML

复制

4.列表排序

<!DOCTYPE html>
<html lang="zh">
<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>列表排序</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(p,index) in filPersons" :key="index">
                {{p.name}}-{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                keyWord: '',
                sortType: 0,// 0 原顺序 1 降序 2 升序
                persons:[
                    {id:'001',name: '周冬雨',age: 18,sex: '女'},
                    {id:'002',name: '马冬梅',age: 20,sex: '女'},
                    {id:'003',name: '周杰伦',age: 19,sex: '男'},
                    {id:'003',name: '温兆伦',age: 21,sex: '男'},
                ]
            },
            computed:{
                filPersons(){
                    const arr = this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) != -1;
                    });
                    // 判断一下是否需要排序
                    if (this.sortType) {
                        arr.sort((p1,p2)=>{
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        });
                    };
                    return arr;
                },
            }
        })
    </script>
</body>
</html>

HTML

复制

5.更新时的一个问题

<!DOCTYPE html>
<html lang="zh">
<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>更新时的一个问题</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <button @click="updateMei">更新马冬梅的信息</button>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                persons:[
                    {id:'001',name: '周冬雨',age: 18,sex: '女'},
                    {id:'002',name: '马冬梅',age: 20,sex: '女'},
                    {id:'003',name: '周杰伦',age: 19,sex: '男'},
                    {id:'003',name: '温兆伦',age: 21,sex: '男'},
                ]
            },
            methods: {
                updateMei(){
                    // this.persons[1].name = '马老师'; // 奏效
                    // this.persons[1].age = 50; // 奏效
                    // this.persons[1].sex = '男'; // 奏效
                    // this.persons[1] = {id:'002',name: '马老师',age: 50,sex: '男'} // 不奏效
                    this.persons.splice(0,1,{id:'002',name: '马老师',age: 50,sex: '男'})
                }
            }
        })
    </script>
</body>
</html>

HTML

复制

6.Vue监测数据改变的原理-对象

<!DOCTYPE html>
<html lang="zh">
<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>Vue监测数据改变的原理</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h1>学校名称：{{schoolName}}</h1>
        <h1>学校地址：{{address}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                schoolName: '尚硅谷',
                address: '北京',
                student:{
                    name: 'Tom',
                    age: 18
                }
            }
        })
    </script>
</body>
</html>

HTML

复制

7.模拟一个数据检测

<!DOCTYPE html>
<html lang="zh">
<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>模拟一个数据检测</title>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h1>学校名称：{{schoolName}}</h1>
        <h1>学校地址：{{address}}</h1>
    </div>
    <script>
        let data = {
            schoolName: '尚硅谷',
            address: '北京',
        };
        // 创建一个监视的实例对象，用于监视data中属性的变化
        const obs = new Observer(data);
        console.log(obs);

        // 准备一个vm实例
        let vm = {};
        vm._data = data = obs;
        function Observer(obj) {
            // 汇总对象中所有的属性形成一个数组
            const keys = Object.keys(obj);
            // 遍历
            keys.forEach((k)=>{
                Object.defineProperty(this,k,{
                    get(){
                        return obj[k];
                    },
                    set(val){
                        console.log(`${k}被改了，我要去解析模板，生成虚拟DOM....我要开始忙了`);
                        obj[k] = val;
                    }
                })
            });
        }
    </script>
</body>
</html>

HTML

复制

8.Vue.set的使用

<!DOCTYPE html>
<html lang="zh">
<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>Vue监测数据改变的原理</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h1>学校信息</h1>
        <h1>学校名称：{{school.schoolName}}</h1>
        <h1>学校地址：{{school.address}}</h1>
        <h1>校长：{{school.leader}}</h1>
        <hr>
        <h1>学生信息</h1>
        <button @click="addSex">添加一个性别属性，默认值：男</button>
        <h2>学生姓名：{{student.name}}</h2>
        <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
        <h2>学生姓名：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f, index) in student.friends" :key="index">
                {{f.name}} --- {{f.age}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                school:{
                    schoolName: '尚硅谷',
                    address: '北京'
                },
                student:{
                    name: 'Tom',
                    // age: '男',
                    age: {
                        rAge: 40,
                        sAge: 22
                    },
                    friends: [
                        {name: 'jack',age: 35},
                        {name: 'jerry',age: 20}
                    ]
                }
            },
            methods: {
                addSex(){
                    // Vue.set(this._data.student,'sex','男');
                    this.$set(this.student,'sex','男');
                }
            }
        });
        // 添加响应式的属性
        // Vue.set(vm._data.student,'sex','男');
        // vm.$set(vm.student,'sex','男');
    </script>
</body>
</html>

HTML

复制

9.Vue监测数据改变的原理-数组

<!DOCTYPE html>
<html lang="zh">
<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>Vue监测数据改变的原理-数组</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h1>学校信息</h1>
        <h1>学校名称：{{school.schoolName}}</h1>
        <h1>学校地址：{{school.address}}</h1>
        <h1>校长：{{school.leader}}</h1>
        <hr>
        <h1>学生信息</h1>
        <button @click="addSex">添加一个性别属性，默认值：男</button>
        <h2>学生姓名：{{student.name}}</h2>
        <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
        <h2>学生姓名：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f, index) in student.friends" :key="index">
                {{f.name}} --- {{f.age}}
            </li>
        </ul>
        <h2>爱好</h2>
        <ul>
            <li v-for="(h, index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                school:{
                    schoolName: '尚硅谷',
                    address: '北京',
                },
                student:{
                    name: 'Tom',
                    // age: '男',
                    age: {
                        rAge: 40,
                        sAge: 22
                    },
                    friends: [
                        {name: 'jack',age: 35},
                        {name: 'jerry',age: 20}
                    ],
                    hobby: ['吃饭','睡觉','打豆豆']
                }
            },
            methods: {
                addSex(){
                    // Vue.set(this._data.student,'sex','男');
                    this.$set(this.student,'sex','男');
                }
            }
        });
        // 添加响应式的属性
        // Vue.set(vm._data.student,'sex','男');
        // vm.$set(vm.student,'sex','男');
    </script>
</body>
</html>

HTML

复制

10.总结Vue数据监测

vue监视数据的原理：vue会监视data中所有层次的数据

如何监测对象中的数据?

对象中后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API
- Vue.set(target.propertyName/index,value）
- vm.$set(target,propertyName/index.value)

如何监测数组中的数据?

通过包裹数组更新元素的方法实现,本质就是做了两件事

调用原生对应的方法对数组进行更新
重新解析模板，进而更新页面

在Vue修改数组中的某个元素一定要用如下方法

使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
Vue.set() 或 vm.$set()

特别注意

Vue.set() 或 vm.$set() 不能给vm 或 vm的根数据对象添加属性！！

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>总结Vue数据监测</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄+1岁</button><br>
        <button @click="addSex">添加一个性别属性，默认值：男</button><br>
        <button @click="student.sex = '未知'">修改性别</button><br>
        <button @click="addFriend">在列表首位添加一个朋友</button><br>
        <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br>
        <button @click="addHobby">添加一个爱好</button><br>
        <button @click="updateHobby">修改第一个爱好为：开车</button><br>
        <button @click="removeEat">过滤掉爱好中的第一个：吃饭</button><br>
        <h2>学生姓名：{{student.name}}</h2>
        <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
        <h2>学生年龄：{{student.age}}</h2>
        <h2>爱好</h2>
        <ul>
            <li v-for="(h, index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f, index) in student.friends" :key="index">
                {{f.name}} --- {{f.age}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                student:{
                    name: 'Tom',
                    // age: '男',
                    age: 18,
                    friends: [
                        {name: 'jack',age: 35},
                        {name: 'jerry',age: 20}
                    ],
                    hobby: ['吃饭','睡觉','打豆豆']
                }
            },
            methods: {
                addSex(){
                    // Vue.set(this.student,'sex','男');
                    this.$set(this.student,'sex','男');
                },
                addFriend(){
                    this.student.friends.unshift({name:'沐沐',age: 18});
                },
                updateFirstFriendName(){
                    this.student.friends[0].name = '张三';
                    this.student.friends[0].age = 5;
                },
                addHobby(){
                    this.student.hobby.push('学习');
                },
                updateHobby(){
                    // this.student.hobby.splice(0,1,'开车');
                    // Vue.set(this.student.hobby,0,'开车');
                    this.$set(this.student.hobby,0,'开车');
                },
                removeEat(){
                    this.student.hobby = this.student.hobby.filter((h)=>{
                        return h !== '吃饭';
                    })
                }
            }
        })
    </script>
</body>
</html>

HTML

复制

13、收集表单数据

收集表单数据

若<input type="text"/>，则v-model收集的是value值，用户输入的就是value值
若<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值
若<input type="checkbox"/>
- 没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值）
- 配置input的value属性
  - v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值)
  - v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符

lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>收集表单数据</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <form @submit.prevent="demo">
            账户：<input type="text" v-model.trim="userInfo.account"><br><br>
            密码：<input type="password" v-model="userInfo.password"><br><br>
            年龄：<input type="number" v-model.number="userInfo.age"><br><br>
            性别：
                男<input type="radio" name="sex" v-model="userInfo.sex" value="man">
                女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
            <br><br>
            爱好：
                学习<input type="checkbox" name="hobby" value="study" v-model="userInfo.hobby">
                吃饭<input type="checkbox" name="hobby" value="eat" v-model="userInfo.hobby">
                睡觉<input type="checkbox" name="hobby" value="sleep" v-model="userInfo.hobby">
            <br><br>    
            所属校区：
            <select v-model="userInfo.city">
                <option value="0">请选择校区</option>
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">广州</option>
            </select>
            <br><br> 
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea>
            <br><br> 
            <input type="checkbox" v-model="userInfo.agree">
            阅读并接受<a href="#">《用户协议》</a>
            <br><br> 
            <button>提交</button>
        </form>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                userInfo:{
                    account:'',
                    password:'',
                    age:'',
                    sex:'female',
                    hobby: [],
                    city:0,
                    other:'',
                    agree:''
                }
            },
            methods: {
                demo(){
                    console.log(JSON.stringify(this.userInfo));
                }
            },
        })
    </script>
</body>
</html>

HTML

复制

14、过滤器

定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理）

语法

注册过滤器:Vue.filter(name,callback)或new Vue{filters:{}
使用过滤器:{{ xxx│过滤器名}}或v-bind:属性=“xxx|过滤器名"

备注

过滤器也可以接收额外参数、多个过滤器也可以串联
并没有改变原本的数据,是产生新的对应的数据

<!DOCTYPE html>
<html lang="zh">
<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>过滤器</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <!-- 引入dayjs -->
    <script src="../js/dayjs.min.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <h3>现在是：{{time}}</h3>
        <!-- 计算属性实现 -->
        <h3>格式化后的时间：{{fmtTime}}</h3>
        <!-- methods实现 -->
        <h3>格式化后的时间：{{getFmtTime()}}</h3>
        <!-- 过滤器实现 -->
        <h3>格式化后的时间：{{time | timeFormater}}</h3>
        <!-- 过滤器实现 (传参) + 多过滤器-->
        <h3>格式化后的时间：{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h3>

        <h3 :x="msg | mySlice">沐沐</h3>
    </div>
    <div id="root2">
        <h2>{{msg | mySlice}}</h2>
    </div>
    <script>
        Vue.config.productionTip = false;
        // 全局过滤器
        Vue.filter('mySlice',function (value) {
            return value.slice(0,4)
        })
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                time:1656496654590,
                msg:'你好，小沐沐吖'
            },
            // 方法
            methods: {
                getFmtTime(){
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            // 属性计算
            computed: {
                fmtTime(){
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            // 过滤器 - 局部
            filters: {
                timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){
                    return dayjs(value).format(str)
                },
                // mySlice(value){
                //     return value.slice(0,4)
                // }
            }
        })

        new Vue({
            el:"#root2",
            data:{
                msg:'hello，小沐沐吖'
            }
        })
    </script>
</body>
</html>

HTML

复制

15、内置指令

1.v-text指令

我们学过的指令

v-bind : 单向绑定解析表达式,可简写为:xXX
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听,可简写为@
v-if : 条件渲染(动态控制节点是否存存在)
v-else : 条件渲染（动态控制节点是否存存在)
v-show : 条件渲染(动态控制节点是否展示)

v-text指令

作用：向其所在节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，插值语法{{xx}}不会

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>1-v-text指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <div>你好，{{username}}</div>
        <div v-text="username"></div>
        <div v-text="str"></div>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                username:'小沐沐吖',
                str:'<h3>你好呀</h3>'
            }
        })
    </script>
</body>
</html>

HTML

复制

2.v-html指令

作用:向指定节点中渲染包含html结构的内容与插值语法的区别

v-html会替换掉节点中所有的内容,{{xx}}则不会
v-html可以识别htm1结构

严重注意: v-html有安全性问题!!!!

在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
一定要在可信的内容上使用v-html，永不要用在用户提交的内容上!

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2-v-html指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <div>你好，{{username}}</div>
        <div v-html="str"></div>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                username:'小沐沐吖',
                str:'<h3>你好呀</h3>'
            }
        })
    </script>
</body>
</html>

HTML

复制

3.v-cloak指令

v-cloak指令（没有值）

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

配合的css：

[v-cloack]{
    display: none;
}

CSS

复制

<!DOCTYPE html>
<html lang="zh">
<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>3-v-cloak指令</title>
    <style>
        /* 解决网速慢时页面展示出{{xxx}}的问题 */
        [v-cloack]{
            display: none;
        }
    </style>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h2 v-cloak>{{schoolName}}</h2>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                schoolName:'梅洛天庭'
            }
        })
    </script>
</body>
</html>

HTML

复制

4.v-once指令

v-once所在节点在初次动态渲染后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4-v-once指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 v-once>初始化的n值是：{{n}}</h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n++</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                n:1
            }
        })
    </script>
</body>
</html>

HTML

复制

5.v-pre指令

跳过其所在节点的编译过程
可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>5-v-pre指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 v-pre>Vue其实很简单</h2>
        <h2 v-pre>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n++</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                n:1
            }
        })
    </script>
</body>
</html>

HTML

复制

16、自定义指令

1.自定义指令

定义语法

局部指令
new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} } HTML 复制
全局指令
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数) HTML 复制

配置对象中常用的3个回调

bind：指令与元素成功绑定时调用
inserted：指令所在元素被插入页面时调用
update：指令所在模板结构被重新解析时调用

备注：

指令定义时不加v-，但使用时要加v-；
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>1-自定义指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>{{schoolName}}</h2>
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
        <!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span></h2> -->
        <button @click="n++">点我n++</button>
        <hr/>
        <input type="text" v-fbind:value="n">
    </div>
    <div id="root2">
        <input type="text" v-fbind:value="n">
    </div>
    <script>
        Vue.config.productionTip = false;
        // 定义全局指令
        Vue.directive('fbind',{
                    // 指令与元素成功绑定时
                    bind(element,binding){
                        console.log("bind");
                        element.value = binding.value;
                    },
                    // 指令所在元素被插入页面时
                    inserted(element,binding){
                        console.log("inserted");
                        element.focus();
                    },
                    // 指令所在的模板重新解析时
                    update(element,binding){
                        console.log("update");
                        element.value = binding.value;
                    }
                })
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                schoolName:'梅洛天庭',
                n:1
            },
            directives: {
                /*
                    big函数何时被调用？
                        1.指令与元素成功绑定时；
                        2.指令所在的模板重新解析时
                */
                // 'big-number'(element,binding){
                //     console.log("big");
                //     element.innerText = binding.value * 10;
                // },
                big(element,binding){
                    console.log(this); // 注意此处的this指向Window
                    console.log("big");
                    element.innerText = binding.value * 10;
                },
                // fbind:{
                //     // 指令与元素成功绑定时
                //     bind(element,binding){
                //         console.log("bind");
                //         element.value = binding.value;
                //     },
                //     // 指令所在元素被插入页面时
                //     inserted(element,binding){
                //         console.log("inserted");
                //         element.focus();
                //     },
                //     // 指令所在的模板重新解析时
                //     update(element,binding){
                //         console.log("update");
                //         element.value = binding.value;
                //     }
                // }
            }
        })
        new Vue({
            el: '#root2',
            data:{
                n:1
            }
        })
    </script>
</body>
</html>

HTML

复制

2.回顾一个DOM操作

<!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>2-回顾一个DOM操作</title>
    <style>
        .demo{
            border-color: orange;
        }
    </style>
</head>
<body>
    <button id="btn">点我创建一个输入框</button>
    <script>
        const btn = document.getElementById("btn");
        btn.onclick = ()=>{
            const input = document.createElement('input');
            input.className = 'demo';
            input.value = 99;
            input.onclick = ()=>{
                alert(1);
            }
            // input.parentElement.style.backgroundColor = 'skyblue'; 报错
            document.body.appendChild(input);
            input.parentElement.style.backgroundColor = 'skyblue';
            input.focus();
            
        }
    </script>
</body>
</html>

HTML

复制

17、生命周期

1.引出生命周期

又名:生命周期回调函数、生命周期函数、生命周期钩子
是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm或组件实例对象。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>1-引出生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h2 v-if="a">你好啊</h2>
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                opacity:1,
                a:''
            },
            methods: {
                // change(){
                //     setInterval(() => {
                //         this.opacity -= 0.01
                //         if(this.opacity <= 0)this.opacity = 1
                //     }, 16);
                // }
            },
            // Vue完成模板的解析并把初始的真实的DOM元素放入页面后（挂载完毕）调用mounted
            mounted () {
                setInterval(() => {
                    this.opacity -= 0.01
                    if(this.opacity <= 0)this.opacity = 1
                }, 16);
            }
        })

        // 通过外部定时器实现 -- 不推荐
        // setInterval(() => {
        //     vm.opacity -= 0.01
        //     if(vm.opacity <= 0){
        //         vm.opacity = 1
        //     }
        // }, 16);
    </script>
</body>
</html>

HTML

复制

2.分析生命周期

<!DOCTYPE html>
<html lang="zh">
<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>2-分析生命周期</title>
<!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // template:`
            //     <div>
            //         <h2>当前的n值是：{{n}}</h2>
            //         <button @click="add">点我n+1</button>
            //     </div>
            // `,
            // 存储数据
            data: {
                n:1
            },
            methods: {
                add(){
                    console.log('add');
                    this.n++;
                },
                bye(){
                    console.log('bye');
                    this.$destroy()
                }
            },
            watch: {
              n(){
                console.log('n变了');
              }  
            },
            // 访问不到data中的数据和methods的方法
            beforeCreate() {
                console.log('beforeCreate');
                // console.log(this);
                // 打断点
                // debugger;
            },
            // 可以访问data中的数据和methods的方法
            created () {
                console.log("created");
                // console.log(this);
            },
            beforeMount () {
                console.log("beforeMount");
            },
            mounted () {
                console.log('mounted');
            },
            beforeUpdate() {
                console.log('beforeUpdate');
            },
            updated () {
                console.log('updated');
            },
            beforeDestroy() {
                console.log('beforeDestroy');
                // this.add();// 只改变虚拟DOM，不会影响真实DOM
            },
            destroyed () {
                console.log('destroyed');
            }
        })
    </script>
</body>
</html>

HTML

复制

3.总结生命周期

Vue-Lifecycle

常用的生命周期钩子

mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁Vue实例

销毁后借助Vue开发者工具看不到任何信息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

<!DOCTYPE html>
<html lang="zh">
<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>3-总结生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        <button @click="opacity = 1">透明度设置为1</button>
        <button @click="stop">点我停止变幻</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            // 绑定容器
            el: '#root',
            // 存储数据
            data: {
                opacity:1,

            },
            methods: {
                stop(){
                    this.$destroy();
                }  
            },
            mounted () {
                this.timer = setInterval(() => {
                    console.log('setInterval');
                    this.opacity -= 0.01
                    if(this.opacity <= 0)this.opacity = 1
                }, 16);
            },
            beforeDestroy() {
                console.log('vm即将驾鹤西游！');
                clearInterval(this.timer);
            },
        })
    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022 年 07 月，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

编程算法

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

vue.js

编程算法

html