vue指令问题
挂载点:最外层标签就是vue实例的挂载点,即id或者类对应的
dom节点
模板:指挂载点内部的内容,在实例里使用template标签来构
建
h1标签放在body里面不使用 “template”是一样的效果;
{{msg}}:插值表达式
new Vue({
el:"#root",
template:'<h1>hello {{msg}}</h1>',
data:{
msg:"world" ,
content:"this is content"
}
})
指令:v-text 会转义即会将标签名原样输出
v-html 不会转义,即只会输出标签内的内容不会输出
标签
v-on:click = @click
核心:对数据进行操作,数据改变了页面内容也就随着一起改变
数据决定页面的显示,页面无法左右数据的内容
属性绑定:
模板指令
v-bind:title="title" == :title="title"
<div v-bind:title="title"></div>
<input />
外部的content内容:<div>{{content}}</div>
<input :value="content"/>表示输入框的值就是
content的值,实现了单向数据绑定
但是输入框的值改变时外部的content并没有跟着一起改变。
<input v-modal="content"/>模板指令:当输入框的值
改变时,外部的contnet会跟着一起改变,实现了数据双向绑定
<input v-modal="firstName"/>
<input v-modal="lastName"/>
<div>{{fullName}}</div>
计算属性:当firstName的值没有改变且lastName值也没有改
变时,fullName会使用之前的计算缓存的结果输出,当依赖的
属性lastName或firstName其中一个值改变时 fullName才能改
变
new Vue({
el:"#root",
template:'<h1>hello {{msg}}</h1>',
data:{
firstName:'',
lastName:'',
count:0
},
computed:{//计算属性:
fullName:function(){
return this.firstName+''+this.lastName
},
watch:{//侦听器
fullName:function(){
this.count++
}
}
}
});
指令:
<div v-if="show">hello world</div>
<div v-show="show">hello world</div>
//表示要循环的列表是list:循环后放在item中,每次item的
值不同,:key="index"可以换成:key="item"。
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}</li>
</ul>
<button @click="change"></button>
new Vue({
el:"#root",
data:{
show:true,
list:[1,2,3]
},
methods:{
change:function(){
this.show=!this.show;//控制显示或隐藏
}
}
});
v-if 指令实现的效果是显示或者隐藏,但是实质是当show值
为false时,整个被操作的标签完全删除,当show值为true时
,被操作的整个div又重新生成并显示出来
v-show:指令:也是实现了显示或隐藏,但是
当show值为false时,被操作的标签元素会自动加上一个属性
:display:none。
v-for:指令:当有数据需要循环展示时:就使用该指令输出
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/9316810.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」