【Vue】解剖你的第一个Vue实例

Vue实例

new出一个Vue实例是一切的开端：

var app = new Vue({
	// el
	// data
	// methods
	// hook methods ...
});

<div id="app">
    <h2>{{name}}的年龄是{{age}}</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: "#app",
		data: {
			name: "Alice",
			age: 12
		},
		methods: {
			inc() {
				this.age++;
			},
			dec() {
	            this.age--;
	        }
		}
	});
</script>

 

元素（el）

el即element的缩写，用于选出页面中的一个元素。

在选出的这个元素外部，Vue的所有特性是无法使用的。换句话说，这个Vue实例的作用域即这个元素内部。

 

数据（data）

数据是一个对象，这很容易看出来。

Vue实例中数据是与视图渲染的内容双向绑定的。即这里的数据改变，视图重新渲染；视图内容被改变，这里的数据同步更新。

 

方法（methods）

这其实是一个方法集合，可声明多个方法。

无论是数据，还是方法，作用域都是 el 所选出的元素内部。

 

生命周期函数（created）

每个Vue实例都是有生命周期的。生命周期函数是一种监听函数（钩子函数），不同的生命周期函数在Vue的实例的不同生命周期阶段被触发。

其实最常用的生命周期函数只有一个：created。

它对应的生命周期是Vue实例的创建，因此常常被用于数据的初始化。

<div id="app">
    <h2>{{msg}}</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: "#app",
		data: {
			msg: ""
		},
		// 生命周期函数，常用于数据的初始化
		created() {
			// this即Vue实例（箭头函数的this不指向Vue实例，因此不可使用）
			this.msg = "Hello!Im created";
			console.log(this);
		}
	});
</script>

 

计算函数（computed）

简单的说，就是把Vue的数据在Vue中进行处理后再渲染到页面上。

下面这个例子非常典型，把毫秒值的生日数据，先转换为了yyyy-MM-dd格式然后再渲染到页面。

<div id="app">
    <h2>你的生日是{{birth}}</h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            birthday: 2439062123201
        },
        computed: {
            birth() {
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDay();
            }
        }
    });
</script>

 

监控函数（watch）

能够监控简单属性的变化，也能监控对象属性的变化（要开启深度监控）。

watch的应用场景是，根据所监控的视图中的数据的变化，做出相应的响应。

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            // 简单属性
            msg: "Loli Suki~",
            // 对象属性
            loli: {
                name: "Alice",
                age: 12
            }
        },
        watch: {
            // 监控简单属性（方法名与属性名同名即可）
            msg(newValue, oldValue) {
                console.log("新值" + newValue);
                console.log("旧值" + oldValue);
            },
            // 监控对象属性（需要开启深度监控，写法也有点奇怪）
            loli: {
                deep: true,
                handler(obj) {
                    console.log(obj.name);
                    console.log(obg.age);
                }
            }
        }
    });
</script>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

❤️