VUE框架簡單基礎
阿新 • • 發佈：2017-11-16
基礎 eth www 嘻嘻 例子 bsp item baidu spa
一個構建用戶界面的框架
通過指令，來給DOM元素賦值或者其他操作。
簡單的指令及其作用：
在HTML標簽中顯示數據：
--> {{}}
--> v-text
--> v-html
這三條指令都是給HTML具體標簽填充內容，可以是文本，也可以是其他標簽
-------------------
--> v-if
--> v-else
這兩條命令配合使用，如果變量為true，則插入if所在的標簽，否則就插入else所在的標簽。
-------------------
--> v-show
如果變量為true則顯示v-show所在的標簽，否則隱藏v-show所在的標簽，即添加屬性display: none;
註意和v-if的區別：一個是插入/刪除標簽的操作，一個是顯示/隱藏標簽的操作（標簽一直都存在）
-------------------
--> v-for 循環數組或者對象{}
--> v-bind 綁定標簽的屬性，隨時修改
--> v-on 為標簽綁定事件
例子:
<head>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{v1}}</p>
<p v-text="v1"></p>
<p v-html="v2"></p>
<p v-if="v3">哈哈哈</p>
<p v-else="v3">嗚嗚嗚</p>
<p v-show="v3">嘻嘻嘻</p>
<a v-bind:href="url">{{url}}</a>
<input type="button" v-on:click="showtest"/>
</div>
<div id="fTest">
<ul>
<li v-for="item in d1">
{{item}}
</li>
</ul>
<ul>
<li v-for="(item,index) in d1">
{{index}},{{item}}
</li>
</ul>
<ul>
<li v-for="(val,key) in d2">
{{key}},{{val}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
v1:"哈嘍",
v2:"<a>hello</a>",
v3:true，
url:"http://www.baidu.com"
},
methods:{
showtest: function(){
alert(123)
}
}
})
var f = new Vue({
el:"#fTest",
data:{
d1:[11,22,33,44],
d2:{‘name‘:‘egon‘,‘age‘:23,‘weight‘:45,‘height‘:180}
}
})
<script>
</body>
VUE框架簡單基礎