第二章 Vue基础语法

最新推荐文章于 2024-05-28 17:27:23 发布

qiandfeng

最新推荐文章于 2024-05-28 17:27:23 发布

阅读量174

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/shuati2000/article/details/125493394

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第二章 Vue基础语法

1.Vue中应用和组件的基础概念
2.理解Vue中的生命周期函数
3.常用的模板语法
4.数据、方法、计算属性和侦听器
5.样式绑定语法
6.条件渲染
7.循环列表渲染
8.事件绑定
9.双向绑定的使用

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>

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");

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");

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

5.样式绑定语法

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

 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");

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");

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");

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");

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");