一、Hello World
"Hello Wolrd是所有开发心中的光"。
1.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>
1.2 使用vue.js实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>
<script>
// var dom = document.getElementById("app");
// dom.innerHTML = "Hello World!"
var app = new Vue({
el: "#app",
data: {
content: "Hello World"
}
})
</script>
</body>
</html>
二、开发TodoList（v-model、v-for、v-on）
2.1 v-for
使用v-for循环list里的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TodoList</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" />
<button>提交</button>
<ul>
<li v-for="item in list ">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
list:['第一课的内容','第二课的内容']
}
})
</script>
</body>
</html>
需求：在输入框里输入内容，添加到列表
image.png
2.2 v-on
v-on主要用于绑定事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TodoList</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" />
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in list ">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
list:['第一课的内容','第二课的内容']
},
methods:{
handleBtnClick:function(){
alert('click')
}
}
})
</script>
</body>
</html>
在上面的代码中，给button绑定了一个handleBtnClick的方法，在methods里定义该方法，并补充逻辑。
2.3 v-model
v-model指数据的双向绑定。
举个栗子：
<input type="text" v-model="inputValue" />
与
data:{
list:[],
inputValue:''
},
当input框里inputValue改变时，data里inputValue值跟着改变。
测试：
image.png
可以明显看出，当input框没有值的时候，inputValue为空字符串。
image.png
当有值时，inputValue跟着改变。
针对2.1的需求，结合v-on与v-model可以实现：
当点击提交时，将data里inputValue的值赋给list，再用v-for循环。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TodoList</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue" />
<button v-on:click="handleBtnClick">提交</button>
<ul>
<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设计模式
model，view，viewmodel
面向数据进行编程，不涉及dom。
四、使用组件改造TodoList
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TodoList</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue" />
<button v-on:click="handleBtnClick">提交</button>
<ul>
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</ul>
</div>
<script>
Vue.component("TodoItem",{
props:['content'],
template:"<li>{{content}}</li>"
})
var app = new Vue({
el:"#app",
data:{
list:[],
inputValue:''
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue);
this.inputValue = ''
}
},
})
</script>
</body>
</html>
Vue.component定义的是一个全局组件。
在模板里，需要用两个花括号接收变量。
定义局部组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TodoList</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue" />
<button v-on:click="handleBtnClick">提交</button>
<ul>
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</ul>
</div>
<script>
// Vue.component("TodoItem",{
// props:['content'],
// template:"<li>{{content}}</li>"
// })
//定义一个局部组件
var TodoItem = {
props:['content'],
template:"<li>{{content}}</li>"
}
var app = new Vue({
el:"#app",
//注册组件
components:{
TodoItem:TodoItem
},
data:{
list:[],
inputValue:''
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue);
this.inputValue = ''
}
},
})
</script>
</body>
</html>
五、简单的组件间传值
子组件向父组件传值：
子组件通过$emit触发父组件的状态，向上一层触发事件，上一层监听到子组件触发时，进行业务逻辑。
六、复习小结
v-on 可以简写为@
v-bind: 可以简写为:
网友评论