<!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>vue基礎1</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<h1>{{msg}}</h1>
<button type="button" @click="changeEvent">修改msg</button>
<button type="button" @click="changeEvent2">修改msg</button>
<template style="display: none;">
<h1 v-show="1>2">hhdhfd</h1>
</template>
<br/>
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br/>
<span>Picked: {{ picked }}</span>
<br/>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" >
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br/>
<span>Checked names: {{ checkedNames }}</span>
<br/>
<select v-model="selected">
<option disabled value="">請選擇</option>
<option
v-for="option in options"
:value="option.value"
>{{option.text}}</option>
</select>
<br/>
<span>selected option: {{ selected }}</span>
<br/>
<select v-model="selectedDuox" multiple>
<option disabled value="">請選擇</option>
<option
v-for="option in options"
:value="option.value"
>{{option.text}}</option>
</select>
<br/>
<span>selectedDuox option: {{ selectedDuox }}</span>
<br/>
<input
type="checkbox"
v-model="toggle"
:true-value="a"
:false-value="b"
>
<br/>
<span>toggle option: {{ toggle }}</span>
<br/>
<!--在組合標籤中比如table,不通過動態組件來渲染模板的情況下會發生模板渲染錯位的問題 -->
<table>
<test></test>
</table>
<br/>
<!-- 用動態組件引入test -->
<table>
<tr is="test"></tr>
</table>
</div>
<script>
var test={
template:`
<tr><td>{{list[0]}}</td></tr>
`,
data:function(){
return{
list:["html","css","js"]
}
}
}
let app=new Vue({
el:'#app',
components:{test},
data:{
msg:'nihao',
picked:"one",
checkedNames:['Jack'],
selected:"AAA",
options:[
{text:'One',value:"AAA"},
{text:'Two',value:"BBB"},
{text:'Three',value:"CCC"}
],
selectedDuox:["AAA"],
toggle:'iama',
a:"iama",
b:"iamb"
},
methods: {
changeEvent() {
this.msg="hello ni"
},
changeEvent2:()=> { console.log(this)}
},
})
console.log(app)
</script>
</body>
</html>