Vuejs入门教程之Vue生命周期,数据,手动挂载,指

本博文是在原教程的基础上加上实例,并尝试说明的更详细。

(十)Vue实例的生命周期

如图:(我自己翻译的中文版,英文版请查看本博文顶部的,第一个链接)

Vuejs入门教程之Vue生命周期,数据,手动挂载,指

(八)传入的数据绑定

先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么

①obj的值的变化,将影响Vue实例中的值的变化;

②相反一样;

③可以在Vue实例外面操纵obj,一样对Vue实例有影响;

④获取obj.a的值(假如他有这个属性),可以通过Vue实例(例如变量vm),vm.a这样的形式来获取(他们是等价的,也是绑定的);

⑤后续添加的数值是无效的

例如:

<div> {{a}} </div> <button>+1</button> <script> var obj = {a: 1} var vm = new Vue({ el: '#app', data: obj }) function add() { //vm.a++; obj.a++; } </script>

add函数中两条语句效果是等价的,都可以让显示的值+1

但若将代码改成这样:

var obj = {b: 1} var vm = new Vue({ el: '#app', data: obj }) function add() { obj.a = 1; }

那么在点击按钮后,并不会显示值(没有绑定)。

注意:即使修改为vm.a=1也是无效的

准确的说,在Vue实例创建后,添加新的属性到实例上,是不会触发视图更新的。

在以上情况下,obj.a === vm.a ,注意,a之前没有data。

函数:

function test() { if (vm.a === obj.a) { console.log("vm.a === obj.a"); } }

其判断条件是true

(九)Vue实例暴露的接口

在上一篇中,提到vm.a=obj.a这个;然而我们并没有获取全部的data这个属性;

而Vue提供了几个暴露的接口:

接口(假设实例为vm)   效果

vm.$data                 是vm的data属性

vm.$el                     是vm的el属性所指向的dom结点

vm.$watch               示例:

vm.$watch(“a”,function(newVal, oldVal){})

当data里的a变化时,会触发回调函数

更多的可以查看

搜索 $ 作为关键词来查看。

(十一)$mount()手动挂载

当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;

假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。例如:

<div> {{a}} </div> <button>挂载</button> <script> var obj = {a: 1} var vm = new Vue({ data: obj }) function test() { vm.$mount("#app"); }

初始,显示的是{{a}}

当点击按钮后,变成了1

(十二)用Vue的v-for写一个表格

<!DOCTYPE html> <html> <head> <title>Vue</title> <script src="https://www.jb51.net/article/vue.js"></script> </head> <body> <div> <button>点击挂载表格</button> </div> <style> table { border-collapse: collapse; border-spacing: 0; border-left: 1px solid #888; border-top: 1px solid #888; background: #efefef; } th, td { border-right: 1px solid #888; border-bottom: 1px solid #888; padding: 5px 15px; } th { font-weight: bold; background: #ccc; } </style> <script> var obj = { grid: [ {id: "ID", name: "名字", description: "描述", clickButton: "点击事件"}, {id: "1", name: "a", description: "amorous", clickButton: "点击弹窗"}, {id: "2", name: "b", description: "beautiful", clickButton: "点击弹窗"}, {id: "3", name: "c", description: "clever", clickButton: "点击弹窗"}, {id: "4", name: "d", description: "delicious", clickButton: "点击弹窗"}, ] } var vm = new Vue({ data: obj, template: '<table><tr v-for="row in grid">' + '<td>{{row.id}}</td>' + '<td>{{row.name}}</td>' + '<td>{{row.description}}</td>' + '<td><button v-on:click="alert($index)">{{row.clickButton}}</button></td>' + '</tr></table>', methods: { alert: function (index) { alert("该行是第" + index + "行") } } }) function load() { vm.$mount("#app"); } </script> </body> </html>

(十三)数据绑定:

html标签的纯文本显示/被当做html标签处理;

插值单次更新;

①使用两个大括号时,假如字符串内容是html标签,那么不会被转义,而是正常显示;

②使用三个打括号时,字符串内的html标签会被直接转义,

例如:

<div> {{html}} </div> <script> var vm = new Vue({ el:"#app", data: { html:"<span>span</span>" } }) </script>

屏幕上显示内容是:

<span>span</span> 

如果是三个大括号包含变量名:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wypxsy.html