Vue之Hello word
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue实现Hello Word</title>
</head>
<body>
<div id="app">
{
{msg}}
</div>
</body>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'Hello Word'
}
})
//两秒之后 更换内容
setTimeout(() => {
vm.$data.msg = 'Hello Vue'
}, 2000)
</script>
</html>
Vue之TodoList
v-model:双向数据绑定
v-for:循环
- item:循环的每一项
- index:索引
- list:循环的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue实现TodoList</title>
</head>
<body>
<div id="app">
<input type="text" v-model='inputValue'>
<button @click='handleClick'>提交</button>
<ul>
<li v-for='item in list'>{
{item}}</li>
</ul>
</div>
</body>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
inputValue: '',
list: [],
},
methods: {
handleClick: function() {
this.list.push(this.inputValue)
}
}
})
</script>
</html>
MVP
- M:数据层
- V:视图层
- P:逻辑层
MVVM
- M:数据层
- V:视图层
- VM:逻辑层
组件
组件:网站区域的某一部分。
全局组件实现todolist
全局组件:Vue.component()
- v-for:循环指令
- v-bind:属性绑定
父子组件传值的方式
- 父组件通过v-bind将属性传值给子组件
- 子组件通过props接收父组件传过来的属性值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TodoList</title>
</head>
<body>
<div id="app">
<!-- v-model:双向数据绑定 -->
<input type="text" v-model="inputValue">
<!-- v-on:事件绑定 简写为@-->
<button @click="handle">提交</button>
<ul>
<!-- v-for:循环 item:循环项 list:循环的数据-->
<todo-list v-for="item in list" v-bind:content="item"></todo-list>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
//注册全局组件
Vue.component('TodoList',{
props:['content'],
template: '<li>{
{content}}</li>'
})
let vm = new Vue({
//el:挂载的元素位置
el:"#app",
//data定义数据
data:{
inputValue: '',
list:[]
},
//methods:定义方法
methods: {
handle: function () {
//点击提交按钮时,将表单的内容添加到数组里面
this.list.push(this.inputValue);
//表单的内容重置为空
this.inputValue=''
}
}
})
</script>
</html>
局部组件实现todolist
局部组件:let TodoList ={} 组件需要注册在实例中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TodoList</title>
</head>
<body>
<div id="app">
<!-- v-model:双向数据绑定 -->
<input type="text" v-model="inputValue">
<!-- v-on:事件绑定 简写为@-->
<button @click="handle">提交</button>
<ul>
<!-- v-for:循环 item:循环项 list:循环的数据-->
<todo-list v-bind:content="item" v-for="item in list"></todo-list>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
let TodoList = {
props:['content'],
template:"<li>{
{content}}</li>"
}
let vm = new Vue({
//el:挂载的元素位置
el:"#app",
//注册局部组件
components:{
TodoList:TodoList
},
//data定义数据
data:{
inputValue: '',
list:[]
},
//methods:定义方法
methods: {
handle: function () {
//点击提交按钮时,将表单的内容添加到数组里面
this.list.push(this.inputValue);
//表单的内容重置为空
this.inputValue=''
}
}
})
</script>
</html>
组件之间的传值
子组件向父组件传值,使用this.$emit(event),父组件正好监听子组件传过来的事件。
父组件向子组件传值使用v-bind绑定属性,并用props接收值
组件之间的传值之todolist
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TodoList</title>
</head>
<body>
<div id="app">
<!-- v-model:双向数据绑定 -->
<input type="text" v-model="inputValue">
<!-- v-on:事件绑定 简写为@-->
<button @click="handle">提交</button>
<ul>
<!-- v-for:循环 item:循环项 list:循环的数据-->
<todo-list v-bind:index="index" v-bind:content="item" v-for="(item,index) in list" @delete="handleBthClick"></todo-list>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
let TodoList = {
props:['content','index'],
template:"<li @click='handleClick'>{
{content}}</li>",
methods: {
handleClick: function (){
//子组件向负组件传值需要使用this.$emit()
this.$emit('delete',this.index)
}
}
}
let vm = new Vue({
//el:挂载的元素位置
el:"#app",
//注册局部组件
components:{
TodoList:TodoList
},
//data定义数据
data:{
inputValue: '',
list:[]
},
//methods:定义方法
methods: {
handle: function () {
//点击提交按钮时,将表单的内容添加到数组里面
this.list.push(this.inputValue);
//表单的内容重置为空
this.inputValue=''
},
handleBthClick:function (index){
// 删除当前的数组成员索引,只删除一项
this.list.splice(index,1)
}
}
})
</script>
</htm
Vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例</title>
</head>
<body>
<div id="app">
<div @click="handleClick">
{
{msg}}
</div>
<item></item>
</div>
</body>
<script src="vue.js"></script>
<script>
//创建一个Vue全局组件
Vue.component('item',{
template:'<div>hello item</div>'
})
let vm = new Vue({
el:"#app",
//data:定义数据
data:{
msg:'hello word'
},
methods:{
handleClick:function (){
alert('hello word')
}
}
})
</script>
</html>
Vue的生命周期
Vue的生命周期也就是Vue实例在某一个时间点自动执行的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue生命周期函数</title>
</head>
<body>
<div id="app">
<div>{
{msg}}</div>
</div>
</body>
<script src='./vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {
el: '#app',
msg: 'hello Vue'
},
//当Vue实例被初始化 ,自动执行下面的两个钩子函数
beforeCreate: function() {
console.log('beforeCreate');
},
created: function() {
console.log('created');
},
//当Vue实例被挂载的时候,自动执行下面两个的构造函数
beforeMount: function() {
console.log('beforeMount');
},
mounted: function() {
console.log('mounted');
},
//当Vue实例被更新的时候 ,自动执行下面的构造函数
beforeUpdate: function() {
console.log('beforeUpdate');
},
updated: function() {
console.log('update');
},
//当Vue实例被销毁的时候,自动执行下面的构造函数
beforeDestroy: function() {
console.log('beforeDestroy');
},
destroyed: function() {
console.log('destroyed');
},
})
</script>
</html>
Vue中的模板语法
模板语法
- { {}}:插值表达式
- v-html:更新html的值
- v-text:更新文本的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中的条件表达式</title>
</head>
<body>
<div id="app">
<div>{
{msg}}</div>