接着上篇文章
一、有关VUE语法的相干进修(vue-cli 版本3.0.4)
{{}}:大胡子语法、插值语句
<div>{{content}}</div>
内置指令
- 插值指令
运用该指令举行标签中内容的替代区分
<span style="margin-left:40px"> v-text只是将content中的信息全以文本的体式格局显现 </span><br> <span style="margin-left:40px"> v-html只是将content中的信息举行衬着的体式格局显现 </span><br>
v-html中假如存在标签就会衬着出来
//content:"<a href="#">跳转</a>" v-text <sapn v-text="content"></span> //经由衬着后 <span></span> v-html <span v-html="content"></span>
掌握指令(MD中代码指令标识须要前后换行,不然有BUG)
v-if v-else-if v-else //v-if是经由过程掌握元素增加删除完成显现隐蔽 <div v-if="bool1">tmo</div> <div v-else-if="bool2">jack</div> <div v-else="bool3">lily</div> v-show //v-show是经由过程掌握元素的dispaly属性掌握显现隐蔽 <div v-show="bool">jhon</div>
属性指令
- 经由过程该指令能够绑定元素的属性
情势:v-bind:”属性名”=”模子变量”
//v-bind <div v-bind:class="myClass">kid</div> //简写 <div :class="myClass">kid</div>
事宜绑定指令
情势:v-on:”事宜名”=”方法名()” 此处的括号可加可不加
<div v-on:click="myMethod()"></div> //简写 <div @click="myMethod()"></div> //绑定的事宜内里的括号能够写也能够不写,本人引荐照样写
修饰符(官网另有很多修饰符)
情势:v-on:”事宜名”.”修饰符”=”方法名()”
<form v-on:submit.prevent="mySubmit()"></form>
v-for
-经由过程轮回遍历数组,天生多个雷同列表项
- v-model
- 侦听属性
- 盘算属性
备注
//指令当中许可运用表达式 <div v-bind:style="'margin-top:'+num+'px'"></div>
- 组件
- 路由
- 过渡动画
- 自定义指令