前言:
作为后端转前端程序员,一直都不会Vue 只会用jQuery,说来惭愧,最近项目写完了 抽空学习了Vue,大爱!把最近的学习总结一下 。
v-cloak ----解决页面刷新 显示插值
[v-cloak]{
display: none;
}
<div id="app" v-cloak></div>
v-text ----插值的另一种写法
v-html----可加入标签
v-if---- 为true时显示,反之隐藏
v-show ----为true时显示,反之隐藏
v-if 与 v-show的区别:v-if是删除,添加的过程 比较消耗内存,而v-show 是隐藏和显示的过程.相当于jQuery 的 display:none/block
v-bind 缩写: ----动态绑定属性
用法: :class :style
v-on 缩写 @ ----绑定事件
<div id="app" @click="test">
用法: @click=“test” @keyup=“tests”
对应methods中写逻辑
methods:{
test:()=>{
console.log('点击了div');
},
tests:(e)=>{
console.log(e);
}
},
click中又提供 其他扩展方法
@click.stop 阻止冒泡事件
@click.prevent 阻止默认事件 (常用在a链接)
@click.once 只执行一次
v-model ----数据双向绑定
<input type="text" v-model="n1"/>
n1 始终 等于 input 输入框的value
常用在:购物车结算、计算器、无需刷新页面即可刷新数据
待更新…