a标签 vue 动态点击_vue基础那点事
vue-day01
1.vue的介紹
作者介紹 框架的介紹
2.vue官網(wǎng)
https://cn.vuejs.org/
3.vue的優(yōu)點(diǎn)
易用，靈活，高效
4.庫與框架區(qū)別
庫：只具有某一種功能
框架：具備完整的功能 ? bootstrap ? element-ui
5.開發(fā)環(huán)境與生產(chǎn)環(huán)境
開發(fā)環(huán)境地址:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>生產(chǎn)環(huán)境地址:<script src="https://cdn.jsdelivr.net/npm/vue">script>6.vue特點(diǎn)
數(shù)據(jù)驅(qū)動(dòng) ?組件化 ? 單頁面應(yīng)用
7.vue中指令(text)
v-text:與原生的innerText一致，只識(shí)別字符串
v-html:與原生的innerHTML一致，可以識(shí)別標(biāo)簽
8.vue中指令與插值的使用
插值表達(dá)式后面的內(nèi)容會(huì)展示
通過指令綁定元素之間的內(nèi)容不會(huì)顯示
9.vue中指令(if)
v-if ?v-else-if ? v-else ? ?如果......否則......
10.vue中的指令(show)
兩者區(qū)別:
1.v-if是動(dòng)態(tài)的向dom樹中添加、刪除元素
?v-show通過設(shè)置css樣式來實(shí)現(xiàn)
2.v-if是真實(shí)創(chuàng)建其具有惰性，如果初始值是false則不會(huì)渲染,同時(shí)也不會(huì)被緩存
?v-show:無論初始值是否真假都會(huì)先渲染
總結(jié):如果需要頻繁切換需要用v-show
11.vue中的方法使用(v-on)
let vm = new Vue({ ? ? el:'#app', ? ? data:{ ? ? ? ? name:'宏超' ? ? }, ? ?// 所有的方法存放在methods中 ? ? methods: { ? ? ? ? say(name){ ? ? ? ? ? alert('hi,'+name) ? ? ? ? }, ? ? ? ? say2(){ ? ? ? ? ? ? console.log(this) ? ? ? ? ? ?console.log('hi,'+this.name) ? ? ? ? } ? ? }, })直接使用 {{say2()}} 調(diào)用<body> ? ?<div id="app"> ? ? ? ? ? ?<div @click = 'alertName'>點(diǎn)擊實(shí)現(xiàn)效果div> ? ? ? ? ? ?<div @click = 'alertName2("褚陽森")'>點(diǎn)擊實(shí)現(xiàn)效果div> ? ? ? ? ? ?<div @click = 'num++'>點(diǎn)擊實(shí)現(xiàn)效果div> ? ? ? ? ? {{num}} ? ?div>body><script src="./vue.js">script><script> ? ?let vm = new Vue({ ? ? ? ?el:'#app', ? ? ? ?data:{ ? ? ? ? ? ?name:'志寶', ? ? ? ? ? ?num:0 ? ? ? }, ? ? ? ?methods: { ? ? ? ? ? ?alertName(){ ? ? ? ? ? ? ? ?alert(this.name) ? ? ? ? ? }, ? ? ? ? ? ?alertName2(name){ ? ? ? ? ? ? ? ?alert(name) ? ? ? ? ? } ? ? ? }, ? })script>注意：v-on:click='方法名' ? ?可以簡寫為:@click='方法名'
? ? ? ?1.綁定事件的另種方式：a.直接寫方法名 ? b.直接寫表達(dá)式(一般常用簡單的表達(dá)式)
12.v-for(數(shù)組)
<body> ? ?<div id="app"> ? ? ? ?<span v-for='item in arr'>{{item}}span> ? ? ? ?<p v-for='(item,index) in arr'>{{index}}-----{{item}}p> ? ?div>body><script src="./vue.js">script><script> ? ?let vm = new Vue({ ? ? ? ?el:'#app', ? ? ? ?data:{ ? ? ? ? ? arr:['蘋果','香蕉','橘子','榴蓮'] ? ? ? }, ? ? ? ?methods: { ? ? ? ? ? ? ? ? }, ? })script>注意點(diǎn): ? v-for ?循環(huán)數(shù)組可以傳遞2個(gè)參數(shù)，第一個(gè)是數(shù)組的每一項(xiàng)，第二個(gè)是數(shù)組的索引
13.v-for(對(duì)象)
<body> ? ?<div id="app"> ? ? ? ?<span v-for='item in objs'>{{item}}span> ? ? ? ?<p v-for='(value,key,index) in objs'>{{key}}-----{{value}}-------{{index}}p> ? ?div>body><script src="./vue.js">script><script> ? ?let vm = new Vue({ ? ? ? ?el:'#app', ? ? ? ?data:{ ? ? ? ? ?objs:{ ? ? ? ? ? ? ?'水果':'蘋果，香蕉，橘子', ? ? ? ? ? ? ?'蔬菜':'小白菜，土豆，芹菜' ? ? ? ? } ? ? ? }, ? ? ? ?methods: { ? ? ? ? ? ? ? ? }, ? })script>注意：循環(huán)對(duì)象的時(shí)候，傳遞三個(gè)參數(shù)，分別代表value，key,index 位置不可以更換
14.v-bind綁定屬性
<body> ? ?<div id="app"> ? ? ? ? ? ? ? ?<a v-bind:href="href" v-bind:title="title" v-bind:msg='msg'>點(diǎn)擊跳轉(zhuǎn)a> ? ? ? ?<a :href="href" :title="title" ?:msg='msg'>點(diǎn)擊跳轉(zhuǎn)a> ? ? ? ? ? ?div>body><script src="./vue.js">script><script> ? ?let vm = new Vue({ ? ? ? ?el: '#app', ? ? ? ?data: { ? ? ? ? ? ?href:'https://www.baidu.com', ? ? ? ? ? ?title:'我是標(biāo)題1111', ? ? ? ? ? ?msg:'hello' ? ? ? }, ? ? ? ?methods: { ? ? ? }, ? })script>注意：v-bind: 可以簡寫為 ?:title:'abc'
15.動(dòng)態(tài)綁定樣式class
<body> ? ?<div id="app"> ? ? ? ? ? ? ?<div class="box">我是普通樣式渲染div> ? ? ? ? ? ?<div :class="className">我是第一種樣式渲染div> ? ? ? ? ? ?<div :class="objClass">我是第二種樣式渲染div> ? ? ? ? ? ?<div :class="[1==1?'blue':'yellow']">我是第三種樣式渲染div> ? ? ? ? ? ?<div :class='"yellow " + font'>我是第四種樣式渲染div> ? ? ?<div :class='"yellow " + "font"'>我是第四種樣式渲染div> ? ? ? ? ?div>body><script src="./vue.js">script><script> ? ?let vm = new Vue({ ? ? ? ?el: '#app', ? ? ? ?data: { ? ? ? ? ? className:'pink', ? ? ? ? ? objClass:{ ? ? ? ? ? ? ? ?'orange':true, ? ? ? ? ? ? ? ?'font':true, ? ? ? ? ? }, ? ? ? ? ? font:'font' ? ? ? }, ? ? ? ?methods: { ? ? ? ? ? ? ? ? }, ? })script>注意：普通情況用第一種和普通綁定即可，如果后期需要?jiǎng)討B(tài)添加那么就需要用到第四種
15.動(dòng)態(tài)綁定style
我是通過style來設(shè)置的我是第二種通過style綁定我是第三種通過style綁定注意：如果需要綁定多個(gè)樣式，需要用對(duì)象的方式，如果需要綁定多個(gè)類名，需要用數(shù)組的方式
-----------------------------------這是分割線--------------------------------
簡單選項(xiàng)卡操作：
DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Documenttitle>
????<style>
????????.title?{
????????????width:?100px;
????????????height:?30px;???
????????????border:?1px?solid?#000;
????????????float:?left;
????????}
????????.clear{
????????????clear:?both;
????????}
????????.box?{
????????????width:?304px;
????????????height:?100px;
????????????border:?1px?solid?#bfc;
????????????font-size:?30px;
????????????text-align:?center;???????????
????????}
????????.pink{
????????????color:?pink;????????????
????????}
????????.green{
????????????color:?green;????????
????????}
????????.red{
????????????color:?red;????????????
????????}
????style>
head>
<body>
????<div?id="app">
????????<div?:class="[title,item.color]"??@click?=?"isShow(index)"??v-for="(item,index)?in?list">{{item.tag}}div>
????????<div?class="clear">div>
????????<div?:class='"box?"?+item.color?'?v-if?=?"item.show"?v-for?=?"(item,index)?in?list">{{item.content}}div>
????div>
body>
<script?src="../vue.js">script>
<script>
????let?vm?=?new?Vue({
????????el:?"#app",
????????data:{
????????????title:"title",
????????????list:[
????????????????{tag:"選項(xiàng)卡一",content:"內(nèi)容一",show:true,color:"pink"},
????????????????{tag:"選項(xiàng)卡二",content:"內(nèi)容二",show:false,color:"green"},
????????????????{tag:"選項(xiàng)卡三",content:"內(nèi)容三",show:false,color:"red"}
????????????]
????????},
????????methods:{
????????????isShow(index){
????????????????for(let?i?=?0;i<this.list.length;i++){
????????????????????this.list[i].show?=?false;
????????????????}
????????????????this.list[index].show?=?true;
????????????}
????????}
????})
script>
html>
總結(jié)
以上是生活随笔為你收集整理的a标签 vue 动态点击_vue基础那点事的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 轩逸车联网功能怎么用_北斗已建设完成，那
- 下一篇： html5倒计时秒杀怎么做,vue 设