2022-8-27 第一组 (≥▽≤) 学习笔记

1.Vue

1.Vue

vue是JavaScript的一个框架——【JavaScript的库】

Vue的创建

<div id="app">
        <!-- 插值表达式 -->
        <!-- <h1>{{msg}}</h1>{{ msg }} -->
        {{user.msg}} ---{{user.name}} --- {{user.password}}
        <hr>
        {{lists[1]}}
        <hr>
        {{users[0].name}}---{{users[0].age}}
        <hr>
        {{msg.substring(0,4)}}
    </div>
    <script src="vue.js"></script>
    <script>
        // 1.创建vue的实例
        const app = new Vue({
            // el是用来给Vue实例一个作用域
            el:"#app",
            // data是定义数据
            data:{
                // 用来给Vue定义一些相关的数据
                msg:"欢迎使用vue",
                // 用来给Vue定义对象
                user:{
                    msg:"hello vue",
                    name:"admin",
                    password:"123456"
                },
                // 用来给Vue定义数组
                lists:['北京','上海','广州','深圳','杭州'],
                // 用来给Vue定义对象的数组
                users:[{name:"小强",age:"25"},{name:"小虎",age:"18"}],
            },

        })
    </script>

【Vue2的小bug】——

插值闪烁
- ```
        <h1>{{msg}}</h1>
```
- 网速较慢时可能后加载出来

解决办法

        <h1 v-text="msg"></h1>
        <h1 v-html="aaa"></h1>

事件

事件的定义——【v-on:click , @click】

        <input type="button" value="通过vue事件来改变年龄+1" v-on:click="addage">
        <span>年龄:{{age}}</span>
        <input type="button" value="通过vue事件来改变年龄-1" @click="subage">

事件里的函数执行

	//定义函数
	methods:{
                addage:function(){
                    // this代表的是整个Vue实例
                    this.age++;
                },
                subage:function(){
                    if(this.age>0){
                        this.age--;
                    }
                }
            }

面试题

v-if与v-show的区别

v-if直接操作DOM，底层
v-show是通过css控制DOM元素

属性的绑定

【v-bind：或者：】

<div id="ad">
    <--!获取元素-->
        <img v-bind:src="src"  alt="" :title="t" @click="ddd()">
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: "#ad",
            data: {
                src: "../2022-8-26/14.png",
                a: 1
            },
            methods: {
                ddd() {
                    if (this.a == 1) {
                        this.src="../2022-8-26/142.jpeg"
                        this.a=2
                    }else if(this.a==2){
                        this.src="../2022-8-26/18.jpeg"
                        this.a=3;
                    }else{
                        this.src="../2022-8-26/14.png"
                        this.a=1
                    }
                },
            }
        })
    </script>

遍历

v-for写在哪一个标签里，就会生成多个对应的标签
在使用v-for时候：一定要加key用来给vue内部提供重用和排序的唯一的值

		<ul>
            <li v-for="(value,index) in user">
                {{index}}---{{value}}
            </li>
        </ul>

双向绑定

双向绑定：

HTML部分发生变化，Vue实例中对应的属性也会发生变化
Vue中发生变化，HTML中同样发生变化

    <div id="ad">
        <input type="text" v-model="message">
        <hr>
        <!-- <span>{{message}}</span> -->
        <hr>
        <button @click="changevalue">通过改变js中message的值改变文本框的值</button>
        <hr>
        <input type="radio" name="gender" v-model="gender" value="m">男
        <input type="radio" name="gender" v-model="gender" value="w">女
        <hr>
        <input type="checkbox" v-model="hobby" checked value="a">A
        <input type="checkbox" v-model="hobby" checked value="b">B
        <input type="checkbox" v-model="hobby" checked value="c">C
        <button @click="show">发</button>
        <hr>
        <select v-model="address">
            <option value="x" >x</option>
            <option value="y" >y</option>
            <option value="z" >z</option>
        </select>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: "#ad",
            data: {
                message: null,
                gender:"w",
                hobby:[],
                address:"x"
            },
            methods: {
                changevalue(){
                    this.message=prompt();
                },
                show(){
                    alert(this.address)
                }
            }
        })
    </script>