欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue 基础精讲

程序员文章站 2022-04-11 18:45:09
...

Vue 基础精讲

Vue 官方文档:https://cn.vuejs.org/v2/guide/


 VUE 实例

  每个组件都是一个 vue 的实例。

  一个 vue 项目是由实例组成的。

  vue 实例上有很多的实例属性和方法。

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>vue 实例</title>
     <!-- 引入库文件 -->
     <script src="./vue.js"></script>
 </head>
 
 <body>
     <div id="root">
         <!-- <div v-on:click="handleClick"> {{message}}</div> -->
         <div @click="handleClick"> {{message}}</div>
         <item></item>
     </div>
 
 
     <script>
 
         Vue.component('item',{
             template:"<div>hello item !</div>"
         })
 
         // vue 实例 ,根实例
         var vm = new Vue({
             // 接管dom标签
             el: '#root',
             // 数据绑定
             data: {
                 message: 'Hello World'
             },
             // 方法
             methods:{
                 handleClick:function(){
                     alert("ok")
                 }
             },
         })
 
     </script>
 
 </body>
 
 </html>

  Vue 基础精讲

利用浏览器控制台展示实例内容

  Vue 基础精讲

  “$” 符号开始的变量都是vue实例属性或者方法。

 Vue 实例的生命周期钩子

  生命周期函数就是 vue 实例在某一个时间点会自动执行的函数。

生命周期图示

  Vue 基础精讲

使用生命周期函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue 实例生命周期函数</title>
    <!-- 引入库文件 -->
    <script src="./vue.js"></script>
</head>

<body>
    
    <div id="app"></div>

    <script>
        // 生命周期函数就是 vue 实例在某一个时间点会自动执行的函数
        var vm = new Vue({
            el:"#app",
            // 使用模板
            template:"<div>hello world</div>",
            beforeCreate:function(){
                console.log('beforeCreate')
            },
            created:function(){
                console.log('created')
            },
            beforeMount:function(){
                console.log(this.$el)
                console.log('beforeMount')
            },
            mounted:function(){
                console.log(this.$el)
                console.log('mounted')
            },
            beforeDestroy:function(){
                console.log('beforeDestroy')
            },
            destroyed:function(){
                console.log('destroyed')
            }

        })
    </script>

</body>

</html>

  Vue 基础精讲

beforeUpdate & updated 生命周期

 

 

  Vue 基础精讲

  生命周期函数并不放在 methods 函数中。

Vue 的模板语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Vue的模板语法 </title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 差值表达式 -->
        <!-- {{name}} -->
        <div>{{name+' 同志'}}</div>
        <!-- v-text 将数据变量显示在页面上 -->
        <div v-text="name+' 同学'"></div>
        <!-- 将div中 innerHTML 的值与数据变量name进行绑定,会渲染html标签 -->
        <div v-html="name+' 先生'"></div>

    </div>

    <script>

        var vm = new Vue({
            el: "#app",
            data: {
                name: "<h1>王佳伟</h1>"
            }
        })

    </script>
</body>

</html>

  Vue 基础精讲

计算属性,方法和侦听器

计算属性  computed

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>计算属性方法侦听器</title>
     <script src="./vue.js"></script>
 </head>
 
 <body>
 
     <div id="app">
 
         {{fullName}}
         {{age}}
     </div>
 
     <script>
         var vm = new Vue({
             el: "#app",
             data: {
                 firstName: "Jayvee",
                 lastName: "Wong",
                 age: 28
             },
             // 计算属性
             // 内置缓存的
             // 在计算之后,如果firstName和lastName没有改变,则不再去计算,提高性能.
             // 如果依赖的值,发生变话,计算属性扈重新计算一次.
             computed: {
                 // 姓名合并输出
                 fullName: function () {
                     console.log("计算了一次")
                     return this.firstName + " " + this.lastName
                 }
             }
         })
     </script>
 
 </body>
 
 </html>

  Vue 基础精讲

计算方法  methods

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性方法侦听器</title>
    <script src="./vue.js"></script>
</head>

<body>

    <div id="app">

        <!-- 计算属性 -->
        <!-- {{ fullName }} -->

        <!-- 计算方法 -->
        {{ fullName() }}

        {{age}}
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "Jayvee",
                lastName: "Wong",
                age: 28
            },

            // 计算属性
            // 内置缓存的
            // 在计算之后,如果firstName和lastName没有改变,则不再去计算,提高性能.
            // 如果依赖的值,发生变话,计算属性扈重新计算一次.
            // computed: {
            //     // 姓名合并输出
            //     fullName: function () {
            //         console.log("计算了一次")
            //         return this.firstName + " " + this.lastName
            //     }
            // }

            // 计算方法
            // 不如计算属性好.没有缓存机制
            methods:{
                fullName:function(){
                    console.log("计算了一次")
                    return this.firstName + " " + this.lastName
                }
            },


        })
    </script>

</body>

</html>

   Vue 基础精讲

侦听器  watch

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性方法侦听器</title>
    <script src="./vue.js"></script>
</head>

<body>

    <div id="app">

        <!-- 计算属性 -->
        <!-- {{ fullName }} -->

        <!-- 计算方法 -->
        <!-- {{ fullName() }} -->

        {{ fullName }}

        {{age}}
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "Jayvee",
                lastName: "Wong",
                fullName:"Jayvee Wong",
                age: 28
            },

            // 侦听器
            watch:{
                firstName:function(){
                    console.log("计算了一次")
                    this.fullName=this.firstName + " " + this.lastName
                },
                lastName:function(){
                    console.log("计算了一次")
                    this.fullName=this.firstName + " " + this.lastName
                }
            }

            // 计算属性
            // 内置缓存的
            // 在计算之后,如果firstName和lastName没有改变,则不再去计算,提高性能.
            // 如果依赖的值,发生变话,计算属性扈重新计算一次.
            // computed: {
            //     // 姓名合并输出
            //     fullName: function () {
            //         console.log("计算了一次")
            //         return this.firstName + " " + this.lastName
            //     }
            // }

            // 计算方法
            // 不如计算属性好.没有缓存机制
            // methods:{
            //     fullName:function(){
            //         console.log("计算了一次")
            //         return this.firstName + " " + this.lastName
            //     }
            // },


        })
    </script>

</body>

</html>

   Vue 基础精讲

计算属性的setter和getter 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性的setter和getter</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        {{fullName}}
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "Jayvee",
                lastName: "Wong",
            },
            // 计算属性
            computed: {
                fullName: {
                    // 获取
                    get: function () {
                        return this.firstName + " " + this.lastName
                    },
                    // 设置
                    set: function (value) {
                        var arr = value.split(" ")
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                        console.log(value)
                    }
                }
            }
        })
    </script>
</body>

</html>

  Vue 基础精讲

Vue中的样式绑定

  点击标签(div),实现标签内数据颜色变红,再次点击变回原色。

方式一  class的对象绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的样式绑定</title>
    <script src="./vue.js"></script>
    <style>
        .activated{
            color: red;
        }
    </style>
</head>
<body>

    <div id="app">
        <div @click="handleDivClick"
            :class="{activated: isActivated}"
        >
        hello world
        </div>
    </div>

    <script>
    
        var vm = new Vue({
            el:"#app",
            data:{
                isActivated:false,
            },
            methods:{
                handleDivClick:function(){
                    this.isActivated= !this.isActivated
                }
            }
        })
    
    </script>

</body>
</html>

  Vue 基础精讲

  Vue 基础精讲

方法二  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的样式绑定</title>
    <script src="./vue.js"></script>
    <style>
        .activated {
            color: red;
        }
    </style>
</head>

<body>

    <div id="app">

        <!-- class的对象绑定 -->
        <!-- <div @click="handleDivClick"
            :class="{activated: isActivated}"
        > -->


        <div @click="handleDivClick" :class="[activated,activatedOne]">
            hello world
        </div>
    </div>

    <script>

        var vm = new Vue({
            el: "#app",
            data: {
                // class对象绑定
                // isActivated: false,
                activated: "",
                activatedOne:"activated-one",
            },

            methods: {
                handleDivClick: function () {
                    // if (this.activated == "activated") {
                    //     this.activated == ""
                    // }else{
                    //     this.activated = "activated"
                    // }
                    this.activated = this.activated === "activated"?"":"activated"
                }
            }

            // class对象绑定
            // methods:{
            //     handleDivClick:function(){
            //         this.isActivated= !this.isActivated
            //     }
            // }
        })

    </script>

</body>

</html>

   Vue 基础精讲

  Vue 基础精讲

方式三

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的样式绑定</title>
    <script src="./vue.js"></script>
    <!-- <style>
        .activated {
            color: red;
        }
    </style> -->
</head>

<body>

    <div id="app">

        <!-- class的对象绑定 -->
        <!-- <div @click="handleDivClick"
            :class="{activated: isActivated}"
        > -->


        <!-- <div @click="handleDivClick" :class="[activated,activatedOne]"> -->
        
        <div :style="styleObj" @click="handleDivClick">    
            hello world
        </div>
    </div>

    <script>

        var vm = new Vue({
            el: "#app",
            data:{
                styleObj:{
                    color:"black"
                }
            },
            methods:{
                handleDivClick:function(){
                    this.styleObj.color = this.styleObj.color==="black"?"red":"black"
                }
            }
            // data: {
            //     // class对象绑定
            //     // isActivated: false,
            //     activated: "",
            //     activatedOne:"activated-one",
            // },

            // methods: {
            //     handleDivClick: function () {
            //         // if (this.activated == "activated") {
            //         //     this.activated == ""
            //         // }else{
            //         //     this.activated = "activated"
            //         // }
            //         this.activated = this.activated === "activated"?"":"activated"
            //     }
            // }

            // class对象绑定
            // methods:{
            //     handleDivClick:function(){
            //         this.isActivated= !this.isActivated
            //     }
            // }
        })

    </script>

</body>

</html>

Vue 基础精讲

  Vue 基础精讲

Vue 中的条件渲染

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的条件渲染</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">

        <!-- 判断 不存在于DOM之上 -->
        <!-- <div v-if="show">{{message}}</div> -->

        <!-- 渲染到界面了,只不过display:none -->
        <!-- <div v-show="show">{{message}}</div> -->

        <!-- if else 必须紧贴在一起用,中间不许有其他标签 -->
        <!-- <div v-if="show === 'a'">this is a</div> -->
        <!-- <div v-else-if="show === 'b'">this is b</div> -->
        <!-- <div v-else>this is others</div> -->

        <div v-if="show">
            <!-- key的作用是为了防止vue复用,清空 -->
            用户名:<input key="username" type="text" name="" id="">
        </div> 
        <div v-else>
            邮箱名:<input key="email" type="email" name="" id="">
        </div> 


    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data:{
                // message:"hello world",
                // show:false,
                // show:"a",
                show:false,
            }
        })
    </script>
</body>

</html>

Vue中的列表渲染

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的列表渲染</title>
    <script src="./vue.js"></script>
</head>

<body>

    <div id="app">
        <div v-for="(item,index) of list">
            {{item}} ------ {{index}}
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [
                    "hello",
                    "jayvee",
                    "nice",
                    "to",
                    "meet",
                    "you",
                ]
            },
        })
    </script>
</body>

</html>

  Vue 基础精讲

每一个循环项上,带一个唯一的 key 值,用来提高性能。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的列表渲染</title>
    <script src="./vue.js"></script>
</head>

<body>

    <div id="app">
        <div v-for="(item,index) of list" :key="item.id">
            {{item.name}} ------ {{index}}
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [
                    {
                        id: "00001",
                        name: "jayvee",
                    },
                    {
                        id: "00002",
                        name: "qing",
                    }, 
                    {
                        id: "00003",
                        name: "anlex",
                    }
                ]
            },
        })
    </script>
</body>

</html>

   Vue 基础精讲

对数组的操作函数

  push  :  向数组中添加一条数据

  pop  :  删除数组最后一条数据

  shift  :  数组的第一项删除掉

  unshift  :  向数组的第一项加点内容

  splice  :  数组截取

  sort  :  对数组进行排序

  reverse  :  对数组进行取反

vue中的set方法 

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>vue中的set方法</title>
     <script src="./vue.js"></script>
 </head>
 <body>
     <div id="app">
         <div v-for="(item,key,index) of userInfo">
             {{item}} -- {{key}}  --  {{index}}
         </div>
     </div>
 
     <script>
         var vm = new Vue({
             el:"#app",
             data:{
                 userInfo:{
                     name:'Jayvee',
                     age:18,
                     gender:'male',
                     salary:'secret',
                 }
             }
         })
     </script>
 
 </body>
 </html>

  Vue 基础精讲

  Vue 基础精讲

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue中的set方法</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="(item,index) of userInfo">
            {{item}} 
        </div>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                userInfo:[1,2,3,4]
            }
        })
    </script>

</body>
</html>

  Vue 基础精讲

 

 

相关标签: Vue