第二章 Vue起步
一、 课程学习方法
Vue官网：https://cn.vuejs.org/
二、 hello world
1. 输出Hello World
(1). 原生JS
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
<script>
var dom = document.getElementById('app');
dom.innerHTML = "hello world"
</script>
</body>
</html>
(2). Vue
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<!--引入vue-->
<script src="./vue.js"></script>
</head>
<body>
<!--通过{{}}使用dada中的数据-->
<div id="app">{{content}}</div>
<script>
var app = new Vue({
//挂载点，只处理此挂载点下的dom内容
el: '#app',
//定义一些数据
data: {
content: 'hello world'
}
})
</script>
</body>
</html>
2. 定时修改内容
(1). 原生JS
var dom = document.getElementById('app');
dom.innerHTML = "hello world"
setTimeout(function() {
dom.innerHTML = "bye world"
}, 2000)
(2). Vue.js
var app = new Vue({
el: '#app',
data: {
content: 'hello world'
}
})
setTimeout(function() {
app.$data.content = 'bye world'
}, 2000)
三、开发TodoList(v-model、v-for、v-on)
1. 一个网址
2.我的TodoList
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>TodoList</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!--v-model: 双向显示-->
<input type="text" v-model="inputValue"/>
<!--v-on: 绑定事件-->
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!--v-for: 循环显示-->
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
list: [],
inputValue: ''
},
methods: {
handleBtnClick: function() {
this.list.push(this.inputValue);
this.inputValue="";
}
}
})
</script>
</body>
</html>
四、MVVM模式
五、前端组件化
组件就是页面的一部分
方便维护
六、使用组件改造TodoList
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>TodoList</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!--v-model: 双向显示-->
<input type="text" v-model="inputValue"/>
<!--v-on: 绑定事件-->
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!--v-bind:属性绑定-->
<todo-item2 v-bind:content="item" v-for="item in list"></todo-item2>
</ul>
</div>
<script>
// 注册一个全局组件，可直接使用
Vue.component("TodoItem", {
props: ['content'],
template: "<li>{{content}}</li>"
})
// 注册一个局部组件
var TodoItem2 = {
props: ['content'],
template: "<li>{{content}}</li>"
}
var app = new Vue({
el: '#app',
// 通过components使用局部组件
components: {
TodoItem2: TodoItem2
},
data: {
list: [],
inputValue: ''
},
methods: {
handleBtnClick: function() {
this.list.push(this.inputValue);
this.inputValue="";
}
}
})
</script>
</body>
</html>
七、简单的组件间传值
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>TodoList</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!--v-model: 双向绑定-->
<input type="text" v-model="inputValue"/>
<!--v-on: 绑定事件-->
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!--v-bind:属性绑定,:为简写-->
<todo-item v-bind:content="item"
:index="index"
v-for="(item, index) in list"
@delete="handleItemDelete">
</todo-item>
</ul>
</div>
<script>
// 注册一个全局组件，可直接使用
Vue.component("TodoItem2", {
props: ['content'],
template: "<li>{{content}}</li>"
})
// 注册一个局部组件
var TodoItem = {
props: ['content', 'index'],
//@是v-on的简写
template: "<li @click='handleItemClick'>{{content}}</li>",
methods: {
handleItemClick: function() {
//提交一个事件
this.$emit('delete',this.index);
}
}
}
var app = new Vue({
el: '#app',
// 通过components使用局部组件
components: {
TodoItem: TodoItem
},
data: {
list: [],
inputValue: ''
},
methods: {
handleBtnClick: function() {
this.list.push(this.inputValue);
this.inputValue="";
},
handleItemDelete: function(index) {
this.list.splice(index, 1);
}
}
})
</script>
</body>
</html>
