vuejs的初步使用
程序员文章站
2024-01-14 09:24:04
...
vue的构成
指令(操作dom元素)
组件(vue实例中的属性)
mustauch 语法糖 {{ }} 模板语法 支持js语法
模板语法 window中的一些方法不能用 alert console.log
if要以三元运算表达式使用
方法要使用匿名函数(模板语法中只能使用一句语句) (使用定义好的函数要写在methods属性中)
指令:
v-
循环渲染 v-for
v-for= "item in arr"//arr为组件data中的属性
{{ item }}//数组中的内容
展示v-for中的索引
v-for = "(item,key) in arr"
{{ key }}
对象的v-for最多可以有三个参数
v-for = "(item,key,value) in obj"
item:obj的值
key:obj的属性值
value:循环时的 i 值
v-for 出现嵌套使用时,两个v-for的(item,key,value)命名可以一样,因为它们是相互独立的,外面的v-for的值不会进入里面的v-for中
<u>v-for 可以循环数字或字符</u>
v-for 底层:
function v-for(arg){
//把arg处理成数组
for(var i =0;i<data.length;i++){
}
}
条件渲染
v-if 操作的dom元素的是否存在 true/false
v-if = '"f" 单路分支
<p v-if = "f">多路分支
true
</p>
<p v-else-if = "boolean">
v-else-if
</p>
<p v-else>
false
</p>
v-show 操作的dom元素的display属性 true/false
v-if vs v-show
性能:
如果条件为假,v-show有较高的初始渲染开销
如果频繁的进行切换 v-show有较高的初始渲染开销
v-if有更高的初始渲染开销