vue——day01
1.插值表达式
v-cloak：能够解决插值表达式闪烁的问题
<p v-cloak>{{ msg }}</p>
v-text：会覆盖元素中原本的内容,但是插值表达式 只会替换自己的这个占位符,不会把整个元素的内容清空
<h3 v-text="msg">======</h3>
v-html：可以转化为html页面的形式展示
<h3 v-html="msg2"></h3>
data:{
msg2:'<h1>h1标签</h1>'
}
v-bind：是vue中用于绑定属性的指令
<!--mytitle相当于一个表达式，后面可以跟其他表达式-->
<input type="button" value="button" v-bind:title="mytitle + '123'">
<input type="button" value="我是一个按钮" :title="mytitle + '123'">
data:{
mytitle:'自定义title'
}
v-model：双向绑定
<div id="app">
<h3>{{msg}}</h3>
<input type="text" v-model="msg" style="width: 100%">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'vue学习之路。。。。'
}
})
</script>
注意：v-model只能用于表单元素
v-on： vue中，提供v-on指令进行事件绑定
<input type="button" value="鼠标点击事件" v-on:click="show">
<input type="button" value="鼠标移入事件" v-on:mouseover="show">
<input type="button" value="鼠标移入事件" @:mouseover="show">
v-for：迭代普通数组
1.迭代普通数组：
<div id="app">
<p v-for="(item,i) in list">索引值是：{{ i }}，元素是：{{item}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
list:[9,8,7,6,5]
}
})
</script>
2.迭代对象数组：
<div id="app">
<p v-for="(item,i) in list">元素id：{{ item.id }}，名字是：{{item.name}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
list:[
{id: 1, name: "张三"},
{id: 2, name: "李四"},
{id: 3, name: "王五"},
{id: 4, name: "赵六"},
]
}
})
</script>
3.迭代数字
<!-- v-for循环，count从1开始 -->
<div id="app">
<p v-for="count in 10">这是第{{count}}次循环</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{}
})
</script>
4.迭代对象：
<div id="app">
<p v-for="(key,value,i) in user">元素key：{{ key }}，值value是：{{ value }}，元素下标：{{i}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
user: {
id:1,
name:"张三",
sex:'男'
}
}
})
</script>
v-if /v-show:
<!-- v-if的特点:每次都会重新删除或创建元素-->
<!-- v-show的特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none 样式-->
<div id="app">
<input type="button" value="点点点" @click="run">
<!-- v-if有较高的切换性能消耗 -->
<h3 v-if="flag">这事v-if控制的show</h3>
<!-- v-show有较高的初始渲染消耗-->
<!-- 如果元素涉及到频繁的切换,最好不要使用v-if, 而是推荐使用v-show -->
<!--如果元素可能永远也不会被显示出来被用户看到,则推荐使用v-if-->
<h3 v-show="flag">这事v-show控制的</h3>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
flag: true
},
methods:{
run(){
this.flag = !this.flag
}
}
})
</script>
2.事件修饰符
.stop 阻止冒泡
<!-- .stop 阻止冒泡 -->
<input type="button" value="事件修饰符" @click.stop="one">
.prevent 阻止默认事件
<!-- .prevent 阻止默认事件 -->
<a href="https://www.baidu.com" @click.prevent="three">去百度</a>
.self实现只有点击当前元素时候,才会触发事件处理函数
.once只触发一次事件处理函数
<!-- .self实现只有点击当前元素时候,才会触发事件处理函数 -->
<!-- .self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为-->
<div class="bcg" @click.self="two">
<input type="button" value="事件修饰符" @click="one">
<!-- .once只触发一次事件处理函数 -->
<a href="https://www.baidu.com" @click.once="three">去百度</a>
</div>
3.vm实例属性
el：指定控制的区域
data：是个对象，控制区域内要用到的数据
methods：是个对象，自定义方法
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'学习vue'
},
methods:{
one(){
console.log("触发了按钮的点击事件")
},
two(){
console.log("触发了背景颜色事件")
},
three(){
console.log("触发了链接点击事件")
}
}
})
</script>
注意：在vm实例中，如果访问data里面的数据，或者要访问methdos方法，必须带有this
<script>
var vm = new Vue({
el:'#app',
data:{
flag: true
},
methods:{
run(){
this.flag = !this.flag
}
}
})
</script>