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

项目的源代码在GitHub上：点击查看Vue实例vue的每一个组件都是一个实例，该实例对应着很多属性和方法。<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><tit

任性的我

9425人浏览 · 2018-06-08 22:29:08

任性的我 · 2018-06-08 22:29:08 发布

项目的源代码在GitHub上：点击查看

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>

Vue的模板语法

插值：

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

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

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

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

具体查看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>{{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数组方式绑定

<!--class对象方式绑定-->
<!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适合频繁切换。

<!--v-if：指令会使div在文档流中移除-->
<!--v-show：指令会使div在css上发生属性变化，实现效果-->
<!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方法来改变。(这里就不多赘述了)

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^