渲染的範圍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>狂神說Java</p>
<!--view層 模板-->
<div id="app">
<span v-bind:title="message">滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊!</span>
</div>
<p>狂神說Java</p>
<p>狂神說Java</p>
<div id="app1">
<span v-bind:title="message1">hello</span>
</div>
<p>狂神說Java</p>
<div id="app2">
{{message2}}
</div>
</body>
<!--匯入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app", //繫結元素element
data: {
message: "hello,vue"
},
el: "#app1", //繫結元素element
data: {
message1: "hello"
},
el: "#app2", //繫結元素element
data: {
message2: "hello123"
}
})
</script>
</html>
<!-- 1。匯入js 2.繫結 3.取出資料 4.渲染 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>狂神說Java</p>
<!--view層 模板-->
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>
</div>
</body>
<!--匯入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
type: "A"
}
})
</script>
</html>
3-v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>狂神說Java</p>
<!--view層 模板-->
<div id="app">
<li v-for="item in items">
姓名:{{item.name}},年齡:{{item.age}}
</li>
</div>
</body>
<!--匯入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{name: "zhangsan", age: 12},
{name: "lisi", age: 10},
{name: "wangwu", age: 16}
]
}
})
</script>
</html>
4-clink
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>狂神說Java</p>
<!--view層 模板-->
<div id="app">
<button v-on:click="sayDog">Click Me</button>
<button v-on:click="sayHi">Click Me</button>
</div>
</body>
<!--匯入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "你點我幹嘛?",
dog:"別狗叫"
},
methods: {
//方法必須繫結在Vue的Methods物件中,v-on:事件
sayHi: (function (event) {
alert(this.message)
}),
sayDog: (function (event) {
alert(this.dog)
}),
}
})
</script>
</html>
5-message
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>狂神說Java</p>
<!--view層 模板-->
<div id="app">
<input type="text" v-model="message">{{message}}
</div>
</body>
<!--匯入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "你點我幹嘛?"
},
})
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>狂神說Java132</p>
<!--view層 模板-->
<div id="app">
<input type="radio" name="sex" value="男" v-model="qinjiang"> 男
<input type="radio" name="sex" value="女" v-model="qinjiang"> 女
<h1>{{qinjiang}}</h1>
</div>
</body>
<!--匯入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
qinjiang: ''
},
})
</script>
</html>
6-select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view層 模板-->
<div id="app">
下拉框:
<select v-model="selected">
<option value="" disabled>-請選擇-</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>value:{{selected}}</p>
</div>
</body>
<!--匯入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
selected: "A" //不填也行
}
})
</script>
</html>
7-v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view層 模板-->
<div id="app">
<qinjiang v-for="item in items" v-bind:qin="item"></qinjiang>
</div>
</body>
<!--匯入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.component("qinjiang",{
props: ['qin'],
template: '<li>{{qin}}</li>'
})
var vm = new Vue({
el: "#app",
data: {
items: ['Java','Python','Php',"C++"]
}
})
</script>
</html>
7-zujian
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>狂神說Java</p>
<!--view層 模板-->
<div id="app">
<ikun></ikun>
<li>hello</li>
</div>
</body>
<!--匯入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.component("ikun",{
template:'<li>hello</li>'
});
var vm = new Vue({
el: "#app" //繫結元素element
})
</script>
</html>
<!-- 1。匯入js 2.繫結 3.取出資料 4.渲染 -->