01-helloVuejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<h1>{{name}}</h1>
</div>
<!--../拉竖线找目录-->
<script src="../../js/vue.js"></script>
<script>
//let(变量) const(常量)
const vm = new Vue({
el: '#app',
data: {
message: '你好啊, vue',
name: '我是bingo!!!'
}
})
</script>
</body>
</html>
02-vue列表展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="movie in movies">{{movie}}</li>
</ul>
</div>
<!--../拉竖线找目录-->
<script src="../../js/vue.js"></script>
<script>
//let(变量) const(常量)
const vm = new Vue({
el: '#app',
data: {
message: '你好啊, vue',
movies: ['加勒比海盗','海贼王','柯南','功夫']
}
})
</script>
</body>
</html>
03-vue案例计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h3>当前计数: {{counter}}</h3>
<!-- <button v-on:click="counter++">+</button>-->
<!-- <button v-on:click="counter--">-</button>-->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<!--../拉竖线找目录-->
<script src="../../js/vue.js"></script>
<script>
//let(变量) const(常量)
let vm = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
add: function (){
console.log('add被执行');
this.counter++
},
sub: function () {
console.log('sub被执行');
this.counter--
}
},
created: function (){//网络请求数据, 渲染dom
console.log('created() is excuting...');
},
mounted: function () {
console.log('mounted() is excuting...');
}
})
</script>
</body>
</html>
04-vue-template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="../../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'hello bingo'
}
})
</script>
</body>
</html>