• 第二章 Vue基础语法

    第二章 Vue基础语法

    1.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">
    <script src="https://unpkg.com/vue@next"></script>
    <title>Vue中应用和组件的基础概念</title>
</head>
<body>
    <div id="root"></div>
</body>

<script>
    // createApp表示创建一个Vue应用，存储到app变量中
    // 传入的参数表示，这个应用最外层的组件，应该如何显示
    // mvvm设计模式，m -> model数据 v -> 视图 vm -> viewModel 视图数据连接层
    const app = Vue.createApp({
        data(){
            return{
                context:"hello world",
            }
        },
        template:"<div>{{context}}</div>"
    });
    // vm代表的就是vue应用的根组件
    const vm = app.mount("#root");
</script>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    2.理解Vue中的生命周期函数

    生命周期函数：在某一时刻自动执行的函数
    可分为以下函数：
    beforeCreate()：在实例生成之前会自动执行的函数
    created()：在实例生成之后会自动执行的函数
    beforeMount()：在组件渲染到页面之前立即执行的函数
    mounted：在组件渲染到页面之后立即执行的函数
    beforeUpdate()：当data中的数据发生变化时会自动执行的函数
    updated()：当data中的数据发生变化，同时页面完成更新后，会自动执行的函数
    beforeUnmount()：当Vue应用生效时，自动执行的函数
    unmounted()：当Vue应用生效时，且DOM完全销毁之后，自动执行的函数

    3.常用的模板语法

        // 1.{{}}插值表达式
    // 2.v-html
    // 3.v-bind <=> :
    // 4.v-once
    // 5.v-if
    // 6.v-on <=> @
    Vue.createApp({
        data(){
            return{
                message:"hello world",
                html:"<strong>hello world</strong>",
                show:true
            }
        },
        methods:{
            handle(){
                alert("alert");
            }
        },
        template:`
        <div>{{message}}</div>
        <div v-html='html'></div>
        <div v-on:click="handle" v-bind:title="message">{{message}}</div>
        <div v-if="show">{{message}}</div>
        `
    }).mount("#root");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    4.数据、方法、计算属性和侦听器

    数据：Vue中的数据对象
    方法：
    1.不仅可以在事件中使用，还可以在插值表达式中使用
    2.当页面重新渲染，才会重新计算
    计算属性：当数据属性发生改变，才会重新开始计算
    侦听器：用于侦听数据的变化

    const app = Vue.createApp({
        data(){
            return{
                message:"hello world",
                count:1,
                price:5
            }
        },
        watch:{
            price(current,prev){
                console.log(current,prev);
            }
        },
        computed:{
            totle(){
                return Date.now() + this.count;
            }
        },
        methods:{
            handle(){
                console.log("hello",this.message);
            },
            formatString(string){
                return string.toUpperCase();
            },
            getTotle(){
                return Date.now() + this.count;
            }
        },

        template:`
        <div @click="handle">{{formatString(message)}}</div>
        <div>{{getTotle()}}</div>
        <div>{{totle}}</div>
        ` 
    });
    const vm = app.mount("#root");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    computed和methods都能实现的一个功能，建议使用computed，因为有缓存
    computed和watcher都能实现的一个功能，建议使用computed，因为更简洁

    5.样式绑定语法

     <style>
        .red{
            color:red;
        }
        .green{
            color: green;
        }
        .blue{
            color: blue;
        }
    </style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
     const app = Vue.createApp({
        data(){
            return{
                classString:"red",
                classObject:{
                    red:true,
                    green:true
                },
                classArray:['red','green',{blue:true}],

                styleString:"color:red",
                styleObject:{
                    color:'orange',
                    background:'red'
                }

            }
        },

        template:`
        <div :class="classArray">Hello World</div>

        <div :style="styleObject">hand</div>
        <demo :class ="classArray"/>
        `
       
    });

    app.component('demo',{
        template:`
        <div :class="$attrs.class">demo1</div>
        <div :class="$attrs.class">demo2</div>
        `
    })

    const vm = app.mount("#root");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    6.条件渲染

    注意：
    v-if通过控制DOM元素存在与否
    v-show通过控制style样式

    const app = Vue.createApp({
        data(){
            return{
               show:false,
               conditionOne:false,
               conditionTwo:false
            }
        },

        template:`
            <div v-if="show">Hello World</div>
            <div v-if="conditionOne">if</div>
            <div v-else-if="conditionTwo">else if</div>
            <div v-else>else</div>
            <div v-show="show">Hello World</div>
        `
       
    });

    const vm = app.mount("#root");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    7.循环列表渲染

    const app = Vue.createApp({
        data(){
            return{
              listArray:['xiaofeng','zhangsan','lisi'],
              listObjec:{
                name:"xiaofeng",
                age:22,
              }
            }
        },

        methods:{
            // 1.使用数组变更函数：push,pop,shift,unshift,splice,sort,reverse
            // 2.直接替换数组
            // 3.直接更新数组内容
            handleAdd(){   
                // 往列表最后添加一个元素
                // this.listArray.push('wangwu');
                // 删除列表最后一个元素
                // this.listArray.pop();
                // 删除列表第一个元素
                // this.listArray.shift();
                // 往列表的头部新增一个元素
                // this.listArray.unshift("hello");
               
                // this.listArray = ['小风','张三','李四'];

                // this.listArray[0] = "小风";
                this.listObjec.sex = "man"
            },
        },

        template:`
           <div v-for="(item,index) in listArray" :key = "index">
                {{item}} -- {{index}}
            </div>

            <br/>
            <template v-for="(value,key,index) in listObjec" :key = "index">
                <div v-if="key != 'age'">
                    {{value}} -- {{key}}
                </div>
            </template>

            <button @click = "handleAdd">新增</button>
        `
    });
    const vm = app.mount("#root");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    8.事件绑定

    注意： 事件是冒泡的

    事件修饰符：stop,prevent,capture,self,once,passive
    按键修饰符：enter,tab,delete,esc,up,down,left,right
    鼠标修饰符：left,right,moddle
    精确修饰符：exact

    const app = Vue.createApp({
        data(){
            return{
                count:0
            }
        },

        methods:{
            handleBtn(){
                console.log(event.target);
                this.count += 1;
            },

            handleBtn1(){
                alert('handleBtn1');
            },

            handleInput(){
                console.log('keydown');
            }
        },

        template:`
          <div @click.self = "handleBtn">
            {{count}}
            <button @click="handleBtn1()">事件修饰符</button>
          </div>

          <input @keydown.delete="handleInput"/>按键修饰符

          <div @click.middle = "handleBtn1">鼠标修饰符</div>

          <div @click.ctrl.exact = "handleBtn1">精确修饰符</div>
            `
    });
    const vm = app.mount("#root");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    9.双向绑定的使用

    1.input
    2.textarea
    3.checkbox
    4.radio
    5.select
    6.自定义checkbox
    7.修饰符：lazy,number,trim

        const app = Vue.createApp({

        data(){
            return{
                message:"hello world",
                checkboxTest:[],
                radioTest:'',
                selectContext:[],
                options:[
                    {text:'A',value:'A'},
                    {text:'B',value:'B'},
                    {text:'C',value:'C'},
                ],
                diycheckboxTest:'hello',
                lazyTest:'xiaofeng',
                numberTest:'',
                trimTest:'  hello   '
            }
        },

        methods:{
           
        },

        template:`
            <div>
                {{message}}
                <input v-model="message" />
                <textarea v-model="message" />
                <br/>
            </div>
            <br/>
            <div>
                {{checkboxTest}}
                游戏<input type="checkbox" v-model = "checkboxTest" value="game"/>
                运动<input type="checkbox" v-model = "checkboxTest" value="sport"/>
                阅读<input type="checkbox" v-model = "checkboxTest" value="read"/>
            </div>

            <div>
                {{radioTest}}
                游戏<input type="radio" v-model = "radioTest" value="game"/>
                运动<input type="radio" v-model = "radioTest" value="sport"/>
                阅读<input type="radio" v-model = "radioTest" value="read"/>
            </div>

            <div>
                {{selectContext}}
                <select v-model = "selectContext" multiple>
                    <option disable value = ''>请选择</option>
                    <option v-for="item in options" :value="item.value">{{item.text}}</option>
                </select>
            </div>

            <div>
                {{diycheckboxTest}}
                游戏<input type="checkbox" v-model = "diycheckboxTest" true-value='hello' false-value='world'/>
            </div>

            <div>
                {{lazyTest}}
                <input v-model.lazy="lazyTest"/>
            </div>

            <div>
                {{typeof(numberTest)}}
                <input v-model.number="numberTest"/>
            </div>

            <div>
                {{trimTest}}
                <input v-model.trim="trimTest"/>
            </div>
            `
       
    });
    const vm = app.mount("#root");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
  • 相关阅读:
    c++ 栈和栈的应用（图解）
    上班用Python采集热搜榜，堪称摸鱼神器
    基于中文金融知识的 LLaMA 系微调模型的智能问答系统：LLaMA大模型训练微调推理等详细教学
    spring7:总结56
    1997-2020年31省进出口总额
    tensorflow中的常见方法
    FastDFS基础学习(三)之使用FastDFS
    javascript 进阶教程（01）
    【吃瓜之旅】第五章吃瓜学习
    R语言数学建模（三）—— 模型工作流
  • 原文地址：https://blog.csdn.net/shuati2000/article/details/125493394