<!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">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<title>Document</title>
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
.yellow{
background-color: yellow;
}
.width{
width:100px;
}
</style>
</head>
<body>
<div id="app">
{{ title }}
<!-- <img v-bind:src="url" :alt=name> -->
<!-- <h4>{{ title }}</h4>
<div :class="[bg_color,width]">123</div>
<div :class="[{red:flag},width]">123</div>
<div :class="[width]" :style="[{width:width1,height:'100px'}, border1 ]">樣式</div>
<div :class="[flag?'red':'']"> 三元表達式 </div>
<div :class="[flag && 'red']"> 與表達式 </div> -->
<!-- 示例，點擊按鈕，更換顏色 -->
<!-- <h4 :class="arr[index]">{{ title }}</h4>
<button v-on:click="handleClick($event)">點擊更換顏色</button>
<button @click="handleClick($event)">點擊更換顏色</button> -->
<!-- v-if 能夠控制顯示和隱藏 -->
<!-- <div class="red" style="width: 50px;height: 50px;" v-if=flag></div>
<div class="green" style="width: 50px;height: 50px;" v-else></div>
<button @click = "hide_show" >{{ text }}</button> -->
<!-- v-if 和 v-else 連着出現，v-elseif -->
<!-- <div class="red" style="width: 50px;height: 50px;" v-if="index===0"></div>
<div class="yellow" style="width: 50px;height: 50px;" v-else-if="index===1"></div>
<div class="green" style="width: 50px;height: 50px;" v-else></div>
<button @click = "handleClick" >{{ text }}</button> -->
<!-- template的使用 -->
<!-- <template v-if="flag">
<div class="red" style="width: 50px;height: 50px;" ></div>
<div class="yellow" style="width: 50px;height: 50px;" ></div>
</template>
<button @click = "hide_show" >{{ text }}</button> -->
<!-- v-show 和 v-if 區別 -->
<!--1、 v-show 控制dom的display 的顯示和隱藏
v-if 控制dom 元素的移除和添加
2、v-if 可以在template使用，v-show 不行
-->
<!-- <template v-show="flag">
<div class="red" style="width: 50px;height: 50px;" v-show="flag"></div>
<div class="yellow" style="width: 50px;height: 50px;" ></div>
</template>
<button @click = "hide_show" >{{ text }}</button> -->
<!-- 列表渲染 -->
<!-- 數組 (item , index_for) in arr_for-->
<!-- <ul>
<li v-for="(item , index_for) in arr_for"> {{ index_for }} === {{ item }} </li>
</ul> -->
<!-- 對象 (value,key,index) in obj -->
<!-- <h4 v-for = "(value,key,index) in obj">{{ index }} === {{ key }} === {{ value }}</h4> -->
<!-- 數字 正數 從1開始-->
<!-- <h4 v-for="item in 10">{{ item }}</h4> -->
<!-- 字符串 -->
<!-- <h4 v-for="item in 'afefefe'">{{ item }}</h4> -->
<!-- :key 裏面的值要唯一，它可以提高性能，例如當反轉的時候，原先是直接操作dom 複製，現在，發現只要是key相等，就會複製key -->
<!-- <ul>
<li v-for=" item in arr_for" :key = "item">{{ item }}</li>
</ul> -->
<!-- 數組對象的便利v-for -->
<!-- <ul>
<li v-for="item in objs " :key="item.id">{{ item.name }}</li>
</ul> -->
<!--key 例子 這裏如果key不設置的話，pwd 的input會複用 usr的input ==============很重要============== -->
<!-- <div v-if="flag">
usr:<input type="text" key="usr">
</div>
<div v-else>
pwd:<input type="password" key="pwd">
</div>
<button @click="handle">點擊切換</button> -->
<!-- 向數組中添加值
1、不能通過索引的方式更改數組，這樣不能渲染
2、不能通過更改長度的方式更改數組，也不能渲染。
必須調用數組的方法去更改數組。
pop shift unshift splice sort reverse push
-->
<!-- <ul>
<li v-for="item in arr_for">{{item}}</li>
</ul> -->
<!-- 對象屬性的更改 -->
<!-- 可以更改，但是不能添加和刪除
添加和刪除要用特定的方法
$set(this.obj, 'salary','1000');
-->
<!-- {{obj}} -->
<!-- <button @click="add">點擊添加</button> -->
<!-- 數據的雙向綁定 v-model就可以實現 -->
<div>
<!-- <input type="text" :value="value" @input="handleInput"> -->
<!-- <input type="text" v-model="value">
<span>{{ value }}</span>
<textarea v-model="content"></textarea>
{{content}}
<input type="checkbox" v-model="checkbox">
{{checkbox}} -->
<!-- 多選 -->
<!-- <label for="html">html</label>
<input type="checkbox" value="a" id="html" v-model="checkboxList">
<label for="js">js</label>
<input type="checkbox" value="js" id="js" v-model="checkboxList">
<label for="css">css</label>
<input type="checkbox" value="css" id="css" v-model="checkboxList">
{{checkboxList}} -->
<!-- 單選 -->
<!-- <label for="html">html</label>
<input type="radio" id="html" value="html" v-model="radio">
<label for="js">js</label>
<input type="radio" id="js" value="js" v-model="radio">
<label for="css">css</label>
<input type="radio" id="css" value="css" v-model="radio">
{{radio}} -->
<!-- 下拉框 單選-->
<select name="" id="" v-model="selected">
<option value="" disabled>請選擇</option>
<option value="html">html</option>
<option value="js">js</option>
<option value="css">css</option>
</select>
{{selected}}
<!-- 下拉框 多選-->
<select name="" id="" v-model="selected_mul" multiple>
<option value="" disabled>請選擇</option>
<option value="html">html</option>
<option value="js">js</option>
<option value="css">css</option>
</select>
{{selected_mul}}
</div>
</div>
<script>
const vm = new Vue({
// el:"#app",
data:{
a:123,
title:"學習vue ",
url:"https://img-blog.csdn.net/20180228100949515?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVpcGVuZzI1MA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70",
name : "圖片",
bg_color: "red",
width:"width",
flag: true,
width1:"200px",
border:"10px solid green",
border1:{
border:"10px solid green"
},
arr:['red','green','yellow'],
index: 0,
text:"隱藏",
arr_for:['html','css','javascript','java','mysql'],
obj:{
name : "費小波",
age : "24",
sex : "男"
},
objs:[
{
name:'a',
id:001
},
{
name:'b',
id:002
},
{
name:'c',
id:003
},
{
name:'d',
id:004
},
],
value:"雙向綁定",
content:"fefeflkej",
checkbox:true,
checkboxList:[],
radio:'',
selected:'',
selected_mul:[]
},
methods: {
handleClick : function(e) {
console.log(e);
this.index ++;
this.index = this.index%3;
},
hide_show : function(){
this.flag = !this.flag;
this.text = this.flag ? "隱藏" : "顯示";
},
handle : function(){
this.flag = !this.flag;
},
add : function(){
// const length = this.arr_for.length;
// this.arr_for[length] = "vue";
// this.arr_for.push('number');
// this.obj.name = "111111";
// this.obj.salary = "1000";
// delete this.obj.name ;
// 這兩種方法都不行，必須用$set
this.$set(this.obj,'salary',10000);
},
handleInput : function(e){
this.value = e.target.value;
}
}
})
vm.$mount('#app');
vm.a = 100;
// console.log("修改後的a:"+vm.a);
// console.log("修改後的html"+vm.$el.innerHTML);
vm.$nextTick( function(){
console.log(vm.$el.innerHTML);
})
</script>
</body>
</html>
