<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>data:數據對象</title>
</head>
<style>
.titlecolor{
background-color: red;
width: 300px;
}
.titlecolor3{
background-color: red;
width: 900px;
}
.leftcentont{
margin-left: 100px;
}
</style>
<body>
<a href="https://cn.vuejs.org/"><h2>vue.js官網學習</h2></a>
<!-- 1. 關於對象、數組取值{{}}-->
<h2 class="titlecolor">1. 關於取值{{}}</h2>
<div id="qvzhi" class="leftcentont">
{{message}}
<h4>{{school.name}} {{school.mobiel}}</h4>
<u1>
<li>{{campus[0]}}</li>
<li>{{campus[3]}}</li>
</u1>
</div>
<!-- 2. v-text,v-model指令的使用-->
<h2 class="titlecolor">2. v-text指令的使用</h2>
<div id="zhiling" class="leftcentont">
<!-- v-text 替換原有的字符串-->
<!-- v-html html代碼插入-->
<h5 v-text="info">毛毛蟲</h5><h5 v-text="message" style="color: cornflowerblue">毛毛蟲</h5>
<h5>毛毛蟲被替換了</h5>
<h2 v-html="content"></h2><h2 v-text="content"></h2>
<input type="text" v-model="message"/>
</div>
<!--3.事件綁定v-on（@）標籤,指令不需要寫on，如onclick爲@click或v-on:click-->
<h2 class="titlecolor3">3. 事件綁定 v-on或@標籤,指令不需要寫on，如onclick爲@click或v-on:click</h2>
<div id="shijian" class="leftcentont">
<input type="button" value="綁定事件" v-on:click="doit"/>
<input type="button" value="綁定事件" @click="doet"/>
{{food}}
<br/>
<input type="button" value="炒飯事件" @click="changgfood"/>
<br/>
</div>
<!--4. v-if操作domv-show操作樣式(隱藏標籤),v-bind設置屬性-->
<h2 class="titlecolor3">4. v-if操作domv-show操作樣式(隱藏標籤),v-bind設置屬性</h2>
<div id="vif" >
<input type="button" value="改變顯示" @click="changeshow"/>
<p v-if="isShow">v-if標籤顯示隱藏</p>
<br/>
<img v-bind:src="imgSrc" v-bind:title="ti" v-bind:style="styled" />
</div>
<!--5. v-for 循環-->
<h2 class="titlecolor">5. v-for 循環</h2>
<div id="vfor" >
<ul>
<li v-for="(i,index) in arr">
{{index+1}} {{i}}
</li>
</ul>
<span v-for="(item,index) in company" v-bind:title="item.name" @click="shanchu(index)">
{{item.name}}
</span>
<br/>
<input type="button" value="點擊增加" @click="add('確定要增加嗎')"/>
<input type="button" value="點擊移除" @click="remove('確定要刪除嗎')"/>
</div>
<!--開發環境,生產環境爲https://cdn.jsdelivr.net/npm/vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app1 = new Vue({
el:"#qvzhi",
data:{
message:"你好，寫什麼是什麼",
school:{
name:"毛毛",
mobile:"400-400-4000"
},
campus:["天府一街","天府二街","天府三街","天府四街","天府五街"]
}
})
var app2 = new Vue({
el:"#zhiling",
data:{
message:"藍色增加了",
info:"全棧工程師——",
content:"<a href = 'https://www.baidu.com'>百度</a>"
}
})
var app3 = new Vue({
el:"#shijian",
data:{
food:"炒飯"
},
methods:{
doit:function () {
alert("v-on事件綁定！");
},
doet:function () {
alert("@事件綁定！");
},
changgfood:function () {
this.food +="好喫！！！"
}
}
})
var app4 = new Vue({
el:"#vif",
data:{
isShow:false,
imgSrc:"http://s.momocdn.com/static/w5/img/website/item1.jpg?20141105",
ti:"這個是標題",
styled:"height: 100px;width:200px"
},
methods: {
changeshow:function () {
this.isShow = !this.isShow;<!--"!"是取反-->
}
}
})
var app5 = new Vue({
el:"#vfor",
data:{
arr:["北京","上海","深圳","成都"],
company:[
{name:"極光通訊"},
{name:"上海財經"},
{name:"深圳華爲"},
{name:"成都微米"},
{name:"←"},
{name:"點擊刪除"}
]
},
methods:{
add:function (parameter) {
alert(parameter);
this.company.push({name:"杭州阿里巴巴"});
},
remove:function (parameter) {
alert(parameter);
this.company.shift();
},
shanchu:function (index) {
this.company.splice(index,1)
}
}
})
</script>
</body>
</html>
vue.js基本功能的使用
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章