NTL01 这个是 Vue.js 的 列表渲染 ,我简单地理一下这个过程,方便理解吧 😃

首先我们看上图的那一行代码,意思是循环迭代绑定的数据对象里面的 tags 字段的数组,tag 代表当前的数组元素,tag.inputting 就是这个元素对象对应 inputting 字段的内容。
这一块对应 这一行 调用 new Vue() 时候传入的对象的 data 字段里的 tags:
let app = new Vue({
el,
data: {
text: "",
tags: [],
loading: false,
show: false
},
methods: {
submitTran,
nbnhhsh() {
let text = this.text;
app.show = !!text;
if (text) {
_guess(text, data => {
if (data.error) {
app.error = data.error;
} else {
app.error = null;
app.tags = data;
}
});
}
}
}
});
这里 new 返回了一个绑定了变量 el 对应 DOM 元素的 Vue 实例,这里赋值给了变量 app。
Vue 设计了一种机制,在这里大概就是,app 和上面说的 data 字段传进去的数据对象是一种绑定的关系,你通过 app 这个 Vue 实例对象修改某个属性的话,会触发 Vue 的重新渲染,然后对应渲染出 DOM 元素展示。
理解了这一层背景之后,你可以在 methods 这里指定的 nbnhhsh() 方法里面看到 app.tags = data 这一层的设定。
自然,tag.inputting 就是从这个 data 里面来了。