Vue实战项目开发--vue基础精讲

野性酷女 2022-05-23 11:57 444阅读 0赞

### 项目的源代码在GitHub上：[点击查看][Link 1] ###

### Vue实例 ###

vue的每一个组件都是一个实例，该实例对应着很多属性和方法。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>Vue实例</title>
    	<script src="./vue.js"></script>
    </head>
    <body>
    	<div id="root">
    		<div @click="handleClick">
    			{
       {message}}
    		</div>
    	</div>
    
    	<script>
    		var vm = new Vue({
    			el: '#root',
    			data: {
    			    message: 'hello world'
    			},
    			methods: {
                    handleClick: function () {
    					alert("hello")
                    }
    			}
    		})
    	</script>
    </body>
    </html>

### Vue实例的生命周期钩子 ###

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

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>Vue实例生命周期函数</title>
    	<script src="./vue.js"></script>
    </head>
    <body>
    	<div id="app"></div>
    
    	<script>
    		//生命周期函数就是vue实例在某一个时间点自动执行的函数
    		var vm = new Vue({
    			el: "#app",
    			template: "<div>{
       {test}}</div>",
    			data: {
    			    test: "hello world"
    			},
    			beforeCreate: function () {
    				console.log("boforeCreate");
                },
    			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>

![20180607173717360][]

### Vue的模板语法 ###

插值：

文本： \{ \{\}\}    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

原始HTML：v-html    双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

操作纯文本：v-text    它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。

注意：这些模板语法v-XXX后面的内容都是js表达式

具体查看vue官方文档：[模板语法][Link 2]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue模板语法</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div>{
       {name}}</div>
            <div v-text="name"></div>
            <div v-html="name"></div>
        </div>
    
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    name: "<h1>Dell</h1>"
                }
            })
        </script>
    </body>
    </html>

### 计算属性，方法和侦听器 ###

可以通过三种方法实现属性的运算：计算属性、方法和侦听器，如果一个功能可以通过计算属性和watch实现，选用计算属性是最简单的。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性，方法，侦听器</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
           {
       { fullName }} {
       { age }}
        </div>
    
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    firstName: "Dell",
                    lastName: "Lee",
                    fullName: "Dell lee",
                    age: 28
                },
                watch: {
                    firstName: function(){
                        console.log("计算了一次");
                        this.fullName = this.firstName + " " + this.lastName;
                    },
                    lastName: function(){
                        console.log("计算了一次");
                        this.fullName = this.firstName + " " + this.lastName;
                    }
                }
                // fullName方法，没有缓存，页面只要重新渲染，这个函数就会重新执行一次
                // methods: {
                //    fullName: function () {
                //        return this.firstName + " " + this.lastName;
                //    }
                // },
                
                // 计算属性,计算属性有缓存的概念
                // computed:{
                //    fullName: function () {
                //        console.log("计算了一次");
                //        return this.firstName + " " + this.lastName;
                //    }
                // }
    
            })
        </script>
    </body>
    </html>

### 计算属性的setter和getter ###

当改变了firstName和lastName时，set起作用，同时会重新计算fullName的值，页面中的fullName也会发生变化

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <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: "Dell",
                    lastName: "Lee"
                },
                computed: {
                    fullName: {
                        get: function () {
                            return this.firstName + " " + this.lastName
                        },
                        set: function (value) {
                            var arr = value.split(" ");
                            this.firstName = arr[0];
                            this.lastName = arr[1];
                        }
                    }
                }
            })
        </script>
    </body>
    </html>

### Vue中的样式绑定 ###

*  class对象绑定
 *  calss数组方式绑定
 *  style内联绑定
 *  style数组方式绑定

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的样式绑定</title>
        <script src="./vue.js"></script>
        <style>
            .activated{ color: red}
        </style>
    </head>
    <body>
        
        <div id="app">
            <div  @click="handleDivClick"
                  :calss="{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>

这里只上传了一个绑定样式，另外三种可以在我的GitHub上看到

### Vue中的条件渲染 ###

v-if与v-show的区别：

*  手段：   
    v-if是动态的向DOM树内添加或者删除DOM元素；   
    v-show是通过设置DOM元素的display样式属性控制显隐； 
 *  编译过程：   
    v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；   
    v-show只是简单的基于css切换； 
 *  编译条件：   
    v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);   
    v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留； 
 *  性能消耗：   
    v-if有更高的切换消耗；   
    v-show有更高的初始渲染消耗； 
 *  使用场景：   
    v-if适合运营条件不大可能改变；   
    v-show适合频繁切换。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的条件渲染1</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-if="show" data-test="v-if">{
       {message}}</div>
            <div v-else>Bye World</div>
            <div v-show="show" data-test="v-show">{
       {message}}</div>
        </div>
    
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    show: false,
                    message: "Hello World"
                }
            })
        </script>
    </body>
    </html>

### Vue中的列表渲染 ###

不能通过数组的下标来改变对应的内容，页面不会发生对应的改变，只能通过push pop shift unshift splice sort reverse这7个方法来操作。(还可以直接操作数组的引用来改变内容)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的列表渲染</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-for="(item, index) of list"
                 :key="item.id"
            >
                {
       {index}}------{
       {item.text}}
            </div>
        </div>
    
        <script>
            // push pop shift unshift splice sort reverse
            var vm = new Vue({
                el: "#app",
                data: {
                    list: [{
                        id: "1346401",
                        text: "hello"
                    }, {
                        id: "1346402",
                        text: "dell"
                    }, {
                        id: "1346403",
                        text: "lee"
                    },
                    ]
                }
            })
        </script>
    </body>
    </html>

遍历对象

不能直接动态的添加新的属性（vm.userInfo.address = "beijing",这样添加新的属性，数据发生变化了，页面却不会变化），只能修改引用，重新改变整个对象

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的列表渲染</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: "Dell",
                        age: 28,
                        gender: "male",
                        salary: "secret"
                    }
                }
            })
        </script>
    </body>
    </html>

### Vue中的set方法 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的列表渲染</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: "Dell",
                        age: 28,
                        gender: "male",
                        salary: "secret"
                    }
                }
            })
        </script>
    </body>
    </html>

*  Vue全局方法set来添加对象userInfo新的属性     Vue.set(vm.userInfo, "address","beijing")
 *  通过实例的实例方法$set来添加对象userInfo新的属性    vm.$set( vm.userInfo, "address", "beijing")

如果是数组动态添加数据，也是可以用push pop shift unshift splice sort reverse这七种变异方法和引用新的数组来实现，同时也可以使用set方法来完成，也是可以通过Vue全局方法set和实例vm的$set方法来改变。(这里就不多赘述了)

[Link 1]: https://github.com/HZhen/Vue-project
[20180607173717360]: /images/20220523/0e5cc6e8b3434d889ddacdd2ca4aa662.png
[Link 2]: https://vuejs.bootcss.com/v2/guide/syntax.html