Vue一些需要记住的指令/属性
<div id="app">
<p>{{count}}</p>
<!--count在v-once那行中只会渲染改变一次。-->
<p v-once>{{count}}</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
count: 0
},
</script>
- v-html：可以解析变量中的html代码块，如：
<div id="app">
<p v-html="url"></p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
url:'<a href="http://www.baidu.com">百度一下</a>',
},
</script>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message:'haha'
},
</script>
<div id="app">
<a v-bind:href="url"></a>
<img v-bind:src="imgUrl">
</div>
<script>
const app = new Vue({
el: '#app',
data: {
url:'http://www.baidu.com'
imgUrl:'https://i0.hdslb.com/bfs/sycp/creative_img/202108/e9420839c81a40a9cf40280acb2bed46.jpg'
},
</script>
<div id="app">
<h1>{{fullName}}</h1>
<h1>{{fullName2}}</h1>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
firstName:'Eva',
LastName:'Green'
},
methods:{
},
// 计算属性，多次调用，只需要调用一次，因为内部有缓存，所以比Medthod性能更高
computed:{
fullName:function(){
return this.firstName+' '+this.LastName
},
fullName2:{
set:function(names){
const name=names.split(' ')
this.firstName=name[0]
this.LastName=name[1]
},
get:function(){
return this.firstName+' '+this.LastName
}
}
}
})
</script>
<div id="app">
<!-- 没有参数不用加（） -->
<button type="button" v-on:click="increment">{{counter}}</button>
<!-- 水果糖，有参数 -->
<button type="button" @click="increment('haha',12)">{{counter}}</button>
<!-- 手动获取浏览器自动获取的event参数 -->
<button type="button" @click="increment(12,$event)">{{counter}}</button>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
counter:0
},
methods:{
increment(e,event){
this.counter++
console.log('ee',e,event)
}
}
})
</script>
<div id="app">
<!-- 没有参数不用加（） -->
<button type="button" v-on:click="increment">{{counter}}</button>
<!-- 水果糖，有参数 -->
<button type="button" @click="increment('haha',12)">{{counter}}</button>
<!-- 手动获取浏览器自动获取的event参数 -->
<button type="button" @click="increment(12,$event)">{{counter}}</button>
<div @click="divClick">haha
<!-- .stop修饰符的使用，点击button时只响应btnClick -->
<button type="button" @click.stop="btnClick">{{counter2}}</button>
<!-- .once修饰符的使用，只触发一次 -->
<button type="button" @click.once="btnClick">{{counter2}}</button>
</div>
<form action="baidu" method="">
<!-- .prevent修饰符的使用，阻住默认事件的发生，这里会默认跳转action -->
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
counter:0,
counter2:0,
},
methods:{
increment(e,event){
this.counter++
console.log('ee',e,event)
},
divClick(){
console.log('divClick')
},
btnClick(){
console.log('btnClick')
},
submitClick(){
console.log('submitClick')
}
}
})
</script>
<div id="app">
<!-- v-show对比V-if的区别是它的实质是改变组件样式来实现，实际上还是存在，只是style:disable改变了 -->
<button v-show="isShow" @click="changShow">1</button>
</div>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
isShow:true
},
methods:{
changShow(){
this.isShow=false
}
}
})
</script>
<div id="app">
<!-- 遍历数组 -->
<ul>
<li v-for="(item,index) in movies">No {{index+1}} is {{item.name}}</li>
</ul>
<br>
<!-- 遍历对象 -->
<ul>
<li v-for="(value,key) in movies[0]">the movie's {{key}} is {{value}}</li>
</ul>
<button @click="changeList" type="button">数组改变</button>
<h1 @click="sum(1,2,3,4,5,6,7,8,9)">sum</h1>
<input type="text" name="" v-model="message" />{{message}}
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">
const app=new Vue({
el:'#app',
data:{
message:'你好',
movies:[
{
name:'银翼杀手',
time:120,
score:9.5
},
{
name:'星球大战',
time:110,
score:7.5
},
{
name:'霍比特人',
time:100,
score:8.5
}
]
},
methods:{
changeList(){
const movie1={
name:'指环王',
time:200,
score:9.9
},
const movie2={
name:'蝙蝠侠',
time:130,
score:9.8
},const movie3={
name:'汉尼拔',
time:140,
score:9.7
}
this.movies[0].time=12//不能响应式
this.movies.shift()//删除最前面的元素
this.movies.pop()//删除最后面的元素
this.movies.unshift(movie2)//最前面添加元素，可以一次加多个元素
this.movies.push(movie1)//后面添加元素，可以一次加多个元素
},
sum(...num){
//这样的参数表示可以接受任意数量参数，而存储在num数组中
console.log('num',num)
}
}
})
</script>
