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

第一个Vue实例"/>

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

❤️