模板语法
js表达式
<template>
<h3>模板语法</h3>
<p>{{ msg }}</p>
<p>{{ num+1 }}</p><!--双花括号里面只能是单行且有返回值的运算-->
</template>
<script>
export default{
data(){
return{
msg:"vue语法",
num:10
}
}
}
</script>插入原始Html
<template>
<h3>模板语法</h3>
<p>{{ msg }}</p>
<p>{{ num+1 }}</p>
<p v-html="rawHtml"></p><!--插入原始html需要设置为v-html-->
</template>
<script>
export default{
data(){
return{
msg:"vue语法",
num:10,
rawHtml:"<a href='https://www.baidu.com'>测试链接</a>"
}
}
}
</script>属性绑定
<template>
<div v-bind:id="dynamicId" :class="dynamicClass"></div><!--前面加v-bind:或者直接加:-->
</template>
<script>
export default{
data(){
return{
dynamicClass:"appclass",
dynamicId:"appid"
}
}
}
</script>
<style>
.appclass{
color:red;
font-size:30px;
}
</style>或者直接绑定v-bind为对象
<template>
<div v-bind="objectOfAttrs">测试</div>
</template>
<script>
export default{
data(){
return{
dynamicClass:"appclass",
dynamicId:"appid",
objectOfAttrs:{
id:"appid",
class:"appclass"
}
}
}
}
</script>
<style>
.appclass{
color:red;
font-size:30px;
}
</style>条件渲染
<template>
<h3>条件渲染</h3>
<div v-if="flag">能否看见</div>
<div v-else>上面的看不见就可以看见下面</div>
<div v-if="type=='A'">A</div>
<div v-else-if="type=='B'">B</div>
<div v-else-if="type=='C'">C</div>
<div v-else>not a or b or c</div>
<div v-show="flag">能否看见2</div>
</template>
<script>
export default{
data(){
return {
flag:true,
type:"A"
}
}
}
</script>v-if会真正的创建和销毁，而v-show无论何时都会创建，只是display属性发生了改变
频繁切换使用v-show，否则使用v-if
列表渲染
<template>
<h3>列表渲染</h3>
<p v-for="item in names">{{ item }}</p>
</template>
<script>
export default{
data(){
return{
names:["陈紫阳","李英杰","小菜坤","李一鸣"]
}
}
}
</script><template>
<h3>列表渲染</h3>
<div v-for="(item,index) in result">
<p>{{ index }}</p>
<p>{{ item.id }}</p>
<p>{{ item.username }}</p>
</div>
</template>
<script>
export default{
data(){
return{
result:[
{
"id":100001,
"username":"一号用户"
},
{
"id":100002,
"username":"二号用户"
},
{
"id":100003,
"username":"三号用户"
}
]
}
}
}
</script>遍历对象
<template>
<h3>列表渲染</h3>
<div>
<p v-for="item of userInfo">{{ item }}</p>
</div>
</template>
<script>
export default{
data(){
return{
userInfo:{
name:"tansor",
age:21,
sex:"man"
}
}
}
}
</script><template>
<h3>列表渲染</h3>
<div>
<p v-for="(value,key,index) of userInfo">{{ index }}-{{ key }}-{{ value }}</p>
</div>
</template>
<script>
export default{
data(){
return{
userInfo:{
name:"tansor",
age:21,
sex:"man"
}
}
}
}
</script>通过key管理状态(一般使用table的primary key作为key)
<template>
<h3>列表渲染</h3>
<p v-for="(item,index) in names" :key="index">{{ item }}</p>
</template>
<script>
export default{
data(){
return{
names:["陈紫阳","李英杰","小菜坤","李一鸣"]
}
}
}
</script>事件处理
<template>
<h3>事件处理</h3>
<button @click="addCount">点击按钮</button>
<p>{{ count }}</p>
</template>
<script>
export default{
data(){
return {
count:0,
}
},
methods:{
addCount(){
this.count++//使用data中的变量使用this指向
}
}
}
</script>事件传参
<template>
<h3>事件处理</h3>
<button @click="addCount">点击按钮</button>
<p>{{ count }}</p>
<button @click="testClick(123,$event)">传参</button><!--&event只能写在最后一个参数-->
</template>
<script>
export default{
data(){
return {
count:0,
}
},
methods:{
addCount(e){
e.target.innerHTML="点击按钮"+this.count;
this.count++//使用data中的变量使用this指向
},
testClick(num,e){
console.log(num)
console.log(e)
}
}
}
</script>事件修饰符
阻止默认事件
<template>
<h3>事件修饰符</h3>
<a @click.prevent="clickHandle" href="https://www.baidu.com">阻止测试链接</a>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
clickHandle(e){
console.log("click");
}
}
}
</script>事件冒泡
触发子元素的时间同时也触发了父元素
阻止事件冒泡
<template>
<h3>事件修饰符</h3>
<div @click="clickHandle">
<a @click.prevent="clickHandle" href="https://www.baidu.com">事件冒泡</a>
</div>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
clickHandle(e){
console.log("click");
}
}
}
</script>数组变化侦测
<template>
<h3>数组变化侦听</h3>
<button @click="addListHandle">点击测试</button>
<ul>
<li v-for="(item,index) of names" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default{
data(){
return {
names:["陈紫阳","李英杰","小菜坤","李一鸣"]
}
},
methods:{
addListHandle(){
this.names.push('小一');//会引起UI变化
this.names.concat(['小一','小二']);//不会引起UI变化
this.names=this.names.concat(['小一','小二']);//会引起UI变化
}
}
}
</script>会引起UI变化的数组操作
- push
- pop
- shift
- unshift
- splice
- sort
- reverse
不会引起UI变坏的
- filter
- concat
- slice
计算属性
<template>
<p>{{ showContent }}</p>
<p>{{ showContent2() }}</p>
</template>
<script>
export default{
data(){
return {
info:{
id:100001,
content:"tansor"
}
}
},
computed:{//计算属性，this.info.content不变的话，多次调用不会重复计算
showContent(){
return this.info.content.length>0?'Yes':'No'
}
},
methods:{//此方法，this.info.content不变的话，也会重复计算
showContent2(){
return this.info.content.length>0?'Yes':'No'
}
}
}
</script>