组件管理：文字和列表显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
</head>
<script src = "../js/vue.js"></script>
<body>
<!-- 文字显示 -->
<div id = "text">
Hello {{message}}
</div>
<!-- 列表显示 -->
<div id = "list">
<ul v-for = "movie in movies">
<li>{{movie}}</li>
</ul>
</div>
<script>
let text = new Vue({
el: '#text',
data: {
message: 'Vue.js'
}
});
let list = new Vue({
el: '#list',
data: {
movies: ['大话西游', '赌圣', '星际穿越'],
}
})
</script>
</body>
</html>
函数：注意是methoda
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue_计数器</title>
</head>
<script src = "../js/vue.js"></script>
<body>
<div id = "jishuqi">
<h1> 当前计数：{{counter}}</h1>
<!-- @语法糖 == v-on: -->
<button @click = "add_counter">+</button>
<button @click = "sub_counter">-</button>
</div>
<script>
let jsq = new Vue({
el: '#jishuqi',
data: {
counter: 0,
},
methods: {
add_counter: function (){
console.log('add执行');
this.counter++;
},
sub_counter: function (){
console.log('sub执行');
this.counter--;
}
}
})
</script>
</body>
</html>