看图后续会总结所有内容->xmind第4点
Vue基础入门.png
基本指令
v-text , {[插值表达式}} / v-html / v-bind:名称="..." / v-on: 事件绑定
区别类:
v-text: 没有闪烁问题,会覆盖内容
{{ msg }}
闪烁问题,但是不会覆盖标签其它内容(相当于js=>fetch模板语法 +=string) 可以 配合
[v-claok]{display:none}绑定类:
属性绑定v-bind=>data和事件绑定v-on=>methods
v-html可以渲染data里的html标签内容
image.png
image.png
image.png p2
p3 - -v-bind:名称="属性名" 属性名可以是表达式
image.png
image.png
image.png
v-on:事件绑定 =>methods / click
click.png
对于js获取dom
image.png
事件绑定错误写法methods.png
鼠标覆盖,悬停mouseover
image.png
<div id="app">
<input type="button" name="true" value="确定" @click="getalert"/>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
},methods:{
getalert(){alert("you catch me")}
}
})
</script>
//案例总结
**注意**调用方法或属性多需要 - - vue中 - - this指向
image.png
跑马灯:练习1
前p5总结
<div id="app">
<input type="button" name="true" value="确定弹alert" @click="getalert"/>
<input type="button" name="true" value="start" @click="start"/>
<input type="button" name="true" value="stop" @click="stop"/>
<h4>{{msg}}</h4>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
msg:"this is a paoma ligt",
a:null
},methods:{
getalert(){alert("you catch me")},
start(){
var _this=this
if(this.a!=null) return
this.a=setInterval(function(){
var first_str=_this.msg.substring(0,1)
var end=_this.msg.substring(1)
_this.msg=end+first_str
},199)
},
stop(){clearInterval(this.a),this.a=null}
}
})
</script>
用HBX的时候它会有友情提示
image.png
事件修饰符p7
.stop只想要那个,就修饰那个
image.png
.prevent 看标签的默认行为
image.png
capture先触发外层事件,在触发内层事件
image.png
image.png
从外到里
self
只有点击了自己才触发,其余的冒泡和捕获都不执行
image.png
image.png
once
只触发一次第二次可以去往百度
image.png
区别
image.png
stop.png
self就是指本身.png
双向数据绑定v-model -- p8
挂载到window上就可以用this.png
image.png
比较bind
数据只能M到V不能V到M所以要用VM
image.png
image.png
V-model 双向绑定
image.png
v-model 计算器_练习2:
<div id="app">
<input type="text" name="" id="" v-model="msg[0]" />
<select v-model="opt">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="text" name="" id="" v-model="msg[1]" />
<input type="button" name="" id="" value="计算" @click="clclu"/>
<span id="">
{{zhi}}
</span>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
msg:["0","0"],
opt:"-",
zhi:"0"
},methods:{
clclu(){
this.zhi=eval(parseInt(this.msg[0])+this.opt+parseInt(this.msg[1]))
}
}
})
</script>
class
样式绑定.png
可以使用对象形式
<h4 :class="classObj" v-cloak >{{msg}}</h4>
classObj:{
color:true ,italic:true,active:true
}
内联样式绑定:
image.png
p12
v-for
遍历数组,遍历对象,遍历数组对象,迭代数字
image.png
image.png
image.png
数组索引值
image.png
是一样的
image.png
循环对象
image.png
迭代对象其实从1开始
image.png
代码截图记录:
指定key唯一标识.png
image.png
image.png
image.png
key
image.png
image.png
key=item.id.png
以上key指定必须为字符串或number才可以不可以用对象
image.png
如果不加key的item.id则会刷新内容,原本选择id=3的元素,当unshift完之后checkbox勾选的是2的
注意对象传值this({对象问题})
image.png
v-show 和 v-if
@click="flag=!flag"
v-if="flag"
v-show="flag"
data:{
flag:true
}
两者的区别就是 v-if 每次都会删除创建 v-show 有较高的初始渲染消耗,一个元素频繁的切换就用if
网友评论