vue基础知识
Posted 史潇倩
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue基础知识相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.color{
color: red;
}
.style{
font-style: italic;
}
.size{
font-size: 20px;
}
.weight{
font-weight: bold;
}
</style>
</head>
<body>
<div id="app">
<!-- v-clock 解决闪烁 -->
<div v-clock>{{clockData}}</div>
<div v-text="msg">111</div>
<div v-html="msg">111</div>
<!-- v-bind 绑定属性，缩写: -->
<p :title="titleMsg || \'this is my title\'">show me</p>
<!-- v-on 绑定事件，缩写@ -->
<button @click="clickTest">click me</button>
<!-- 事件修饰符 -->
<!-- .stop 阻止冒泡 -->
<div @click="clickFa">
<div @click.stop="clickTest">
<button @click="clickChild">stop child</button>
<p>father2</p>
</div>
<p>father1</p>
</div>
<!-- .prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="clickTest">aaa</a>
<!-- .capture 实现捕获 -->
<div @click.capture="clickFa">
<button @click="clickChild">prevent child</button>
<p>father</p>
</div>
<!-- .self 只点击当前元素才触发
并不会对冒泡有实质影响，只是加了.self的那一层只有点击自己时才会触发
-->
<div @click="clickFa">
<div @click.self="clickTest">
<button @click="clickChild">self child</button>
<p>father2</p>
</div>
<p>father1</p>
</div>
<!-- .once 只触发一次 -->
<a href="http://www.baidu.com" @click.prevent.once="clickTest">aaaOnce</a><br />
<!-- v-model 双向绑定 -->
<!-- 不是双向数据流，只是语法糖 -->
单向绑定<input type="text" :value="inpMsg">
双向绑定<input type="text" v-model="inpMsg">
<!-- class -->
<p :class="[\'color\',\'size\',{\'weight\':flag}]">show class</p>
<p :class="classObj">show class</p>
<!-- style -->
<p :style="styleObj1">show style</p>
<p :style="[styleObj1,styleObj2]">show style</p>
<!-- v-for -->
<ul>
<li v-for="(item,index) in list">{{index}} - {{item}}</li>
<li v-for="(val,key,i) in obj">{{key}} : {{val}} -- {{i}}</li>
<li v-for="count in 4">{{count}}</li>
</ul>
<!-- key 唯一标识符 -->
<p>
<span>val</span>
<input type="text" v-model="name">
</p>
<button @click="add">ADD</button>
<ul>
<li v-for="item in valList" :key="item.id"><input type="checkbox">{{item.id}} - {{item.name}}</li>
</ul>
<!-- v-if(会操作dom)/v-show -->
<button @click="change">change flag</button>
<p v-show="flag">v-show</p>
<p v-if="flag">v-if</p>
<!-- computed -->
<p>{{fulldata}}</p>
</div>
<script>
var vm = new Vue({
el:\'#app\',
data:{
clockData:\'123333\',
msg:\'<h1>222</h1>\',
titleMsg:\'title\',
inpMsg:\'input value\',
flag:false,
classObj:{color:true,style:true,size:true,weight:true},
styleObj1:{color:\'red\',\'font-size\':\'20px\'},
styleObj2:{\'font-weight\':\'bold\'},
list:[2,4,6,8,10],
obj:{a:1,b:2,c:3},
id:3,
name:\'\',
valList:[
{id:1,name:\'qq\'},
{id:2,name:\'cc\'},
{id:3,name:\'sxq\'},
]
},
methods: {
clickTest(){console.log(\'click\')},
clickFa(){console.log(\'Fa\')},
clickChild(){console.log(\'child\')},
add(){this.valList.unshift({id:++this.id,name:this.name})},
change(){this.flag=!this.flag}
},
// 1. 一对多
watch:{
flag:{ // 此写法可以在渲染完成后，就触发一次
handler(newData,oldData){
console.log(newData,oldData,\'newData,oldData--\')
},
immediate:true
},
// 或
// \'flag\'(newData,oldData){
// console.log(newData,oldData,\'newData,oldData--\')
// }
},
// 1. 表达更清晰
// 2. 缓存
// 3. 多对一
computed:{
\'fulldata\'(){
return this.id + \'---\' + this.name;
}
}
})
</script>
</body>
</html>以上是关于vue基础知识的主要内容，如果未能解决你的问题，请参考以下文章