大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

Vue
307
0
0
2022-04-26

Vue姿势解锁

vue的初次使用姿势如下,引入vue.js,开辟一个html DOM,实例化vue.js。

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

(一)简单渲染

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

el: #DOM的id

data:{键名:键值,键名:键值……}

键名就通过{{ 键名 }}渲染进DOM里!

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

(二)bind绑定

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

通过v-bind:属性来绑定,值既可以是数组(假如好多的css),也可以是字符串,数字……

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

相当于style="color: red"

(三)v-if绑定

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

看到显示了嘛

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

空白一片。v-if对选择性显示很有帮助!!!如登陆前后的显示。

(四)v-for

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

语法:v-for=“条目 in 数组”

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

(五)事件监听

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

v-on:click=“方法”

通过methods里的方法名:方法调用

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

(六)双向绑定

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

很简单,v-model=‘名’

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾

发现了嘛?vue数据渲染里,只有v-bind和v-on相似。

牢记这些案例,恭喜!vue渲染您已经掌握了。

交流

大话vue.js数据渲染——谈笑间帮你走出vue的迷雾