Vue 基础精讲

2019-01-14 来源: JayveeWong 发布在  https://www.cnblogs.com/wjw1014/p/10267186.html

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 实例在某一个时间点会自动执行的函数。

生命周期图示

  

使用生命周期函数

<!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>

  

beforeUpdate & updated 生命周期

 <!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",
             data:{
                 test:"hello world",
             },
             // 使用模板
             template:"<div>{{test}}</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')
             },
             beforeUpdate:function(){
                 console.log('beforeUpdate')
             },
             updated:function(){
                 console.log('updated')
             }

         })
     </script>

 </body>

 </html>

beforeUpdate & updated

  

  生命周期函数并不放在 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>

  

计算属性,方法和侦听器

计算属性  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>

  

计算方法  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>

  

侦听器  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>

  

计算属性的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中的样式绑定

  点击标签(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>

  

  

方法二

<!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>

  

  

方式三

<!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 中的条件渲染

<!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>

  

每一个循环项上,带一个唯一的 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>

  

对数组的操作函数

  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>

  

  

<!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>

  

项目代码已整理打包进GitHub

腰都直不起来了,有点辛苦,不过挺充实的!

相关文章