VUE学习笔记(1):基础语法

目录:

相关概念:

实例的基本属性:

属性绑定和双向数据绑定:

VUE中的计算属性和侦听器:

v-if,v-show与v-for指令:


相关概念:

挂载点: el属性对应的dom元素。

模版:挂载点内部的所有内容。可以把模版放在Vue实例中定义,作为template属性值

实例:定义挂载点,把定义的数据与模版结合起来生成要展示的内容,再把这个内容放在挂载点中。

v-text=''data'' 转义,原始字符串。 v-html="data" 解析成html。

实例的基本属性:

el:绑定对应的挂载点。

data:定义挂载点中的数据。

tempalte:挂载点中模板的值。(挂载点的模板内容优先选择tempalte)

methods:定义方法,与v-on(v-on:简写@)配合使用绑定到dom上。

 

属性绑定和双向数据绑定:

属性绑定:

v-bind:(简写:)指令,后面跟html属性。

示例:(title=的内容是js表达式)

效果:

双向数据绑定:

v-model指令。后跟示例里面自定义的数据。

示例:

效果:

修改input的值,显示content的div里面的内容随之改变。

VUE中的计算属性和侦听器:

计算属性:

computed属性,里面的某个属性通过其它属性计算而来,调用这个属性时会使用上次的缓存值,如果计算它的其它实现改变,则它的内容从新计算。

示例:

效果:

侦听器:

watch属性,监听某个数据(计算属性也可)的变化,数据一旦发生变化,可在侦听器里实现自己的业务逻辑。

示例:

效果:

v-if,v-show与v-for指令:

v-if和v-show指令:

v-if后面跟数据项,数据项内容为false时指令绑定的dom直接被删除。而v-show指令后跟的数据项为false时在dom节点上添加display:none属性。频繁显示和隐藏dom推荐使用v-show,性能提升。

示例:

效果:

v-for指令:

用来循环显示dom结构,在data中声明数组,用v-for循环显示。配合key使用提升渲染速度。

示例:

效果:

猜你喜欢

转载自blog.csdn.net/qq_35904166/article/details/81169241