一:v-cloak、v-text、v-html
<div id="app">
{{msg}} //插值表达式会出现闪烁问题
</div>
[v-clock]{
display:none; // 解决插值表达式的闪烁问题
}
<p v-clock>{{msg}}</p>
var vm=new Vue({
el :'#app',
data:{
msg: '123'
}
})
注意:插值表达式有闪烁问题,而v-text没有闪烁问题的
<p v-cloak>++++++{{msg}------</p>
<p v-text="msg">==========</p>
注意:v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符,
不会把整个元素的内容都清空
<h1>我是v-html指令</h1>
<div v-html="msg">121212</div> 注意和v-text的细微区别
data:{
msg: '<h1>我是v-html指令</h1>'
}
二:v-bind 绑定属性
v-bind是vue中提供的一个用于绑定属性的指令
<input type="button" value="按钮" title="myTitle">
这样是不行的,得告诉他myTitle是个变量
v-bind:title="myTitle" v-bind:title="myTitle+'123'"
简写形式: :title
三:v-on 绑定事件
<input type="button" value="按钮" v-on:click="alert">
@click="click"
四:跑马灯效果实现
<div id="app">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
</div>
var vm=new Vue({
el: '#app',
data:{
msg:'我是最好的,相信自己,加油'
intervalId:null //在data上定义,定时器id
}
methods:{
lang(){
console.log(this.msg); 验证是否获得msg
if(this.intervalId!=null) return;
this.inertalId=setInterval(()=>{ //定时器
var start=this.msg.substring(0,1);
var end=this.msg.substring(1);
this.msg=end+start;
},400)
}
stop(){ //停止定时器
clearInterval(this.intervalId);
this.intervalId=null; 为了让它停止后还能运行,就要设置为null,
否则会一直return
}
}
})
重点:this的指向问题
分析:
1:给【浪起来】按钮绑定个点击事件 v-on
2:在按钮的事件处理函数中,写相关的业务逻辑代码:拿到msg字符串,然后调用字符串的substring来进行字符串
的截取操作,把第一个字符截取出来,放到最后一个位置即可;
3:为了实现点击下按钮,自动截取的功能,需要把2步骤中的代码,放到一个定时器中去
注意:在vue实例中,如果想要获取data上的数据,或者想要调用methods中的方法,必须通过this.属性名或
this.方法名来进行访问,这里的this,就表示我们new出来的vm实例对象
五:事件修饰符
.stop 阻止事件冒泡
<div class="inner" @click="divHandler">
<input type="button" value="点击" @click.stop="btnHandler">
</div>
.prevent 阻止默认行为
<div class="inner" @click="divHandler">
<a href="www.baidu.com" @click.prevent="linkClick">点击</a>
</div>
.capture 实现捕获触发事件的机制
<div class="inner" @click.capture="divHandler">
<input type="button" value="点击" @click="btnHandler">
</div>
.self 实现只有点击当前元素的时候,才会触发事件处理函数
<div class="inner" @click.self="divHandler">
<input type="button" value="点击" @click="btnHandler">
</div>
注意:.stop和.self的区别 stop是全部阻止, self只阻止指定的
六:v-model 实现双向数据绑定
v-bind只能实现数据的单向绑定,从M自动绑定到V,无法实现数据的双向绑定
<input type="text" v-bind:value="msg" style="width:100%">
使用v-model指令可以实现表单元素和Model中数据的双向数据绑定
注意:v-model只能运用在 表单元素中
input(radio,text,address, email) select checkbox textarea
<input type="text" style="width:100%" v-model="msg">
七:Vue中使用样式
使用class样式
1:数组
<h1 v-bind:class="['thin','italic']"></h1>
2:数组中使用三元表达式
<h1 v-bind:class="['thin','italic',flag?'active':'']"></h1>
3:数组中嵌套对象
<h1 v-bind:class="['thin','italic',{'active':flag}]"></h1>
4:直接使用对象
<h1 v-bind:class="{thin:true,italic:true,active:false}"></h1>
八:使用style样式(内联样式)
1:直接在元素上通过 :style形式,书写样式对象
<h1 v-bind:style="{color:'red','font-weight':200}"></h1>
2:将样式对象,定义到data中,并直接引用到:style中
<h1 v-bind:style="styleObj"></h1>
data:{
styleObj:{color:'red','font-weight':200}
}
3:在:style中通过数组,引用多个data上的样式对象
<h1 v-bind:style="[styleObj1,styleObj2]"></h1>
data:{
styleObj1:{color:'red','font-weight':200}
styleObj2:{color:'red','font-weight':200}
}
九:v-for key属性
迭代数组 迭代对象 迭代数字
<p v-for="item in items">{{item}}</p>
data:{
return{
id:'',
name:''
list:[1,2,3,4,5,6]
}
}
<p v-for="i in 10">这是{{i}}</p>
迭代对象中的属性
<div v-for="(val,key,index) in userInfo">{{val}}---{{key}}---{{index}}</div>
注意:在组件中使用v-for时,key值是必须的、
要注意的点,当实现添加功能时,在data的return中,name:'',id:''
报错:Avoid using primitive value as key,use string| number value instead
循环要指定个 :key="item",绑定item 报错,改为 :key="item.id" 因为id是唯一的,且为number类型
注意:key绑定的不能为对象,必须是string或number类型的
Vue.js基础总结(一)
猜你喜欢
转载自blog.csdn.net/a3060858469/article/details/80626109
今日推荐
周排行