Vue2.5入门教程
Posted 前端杂货店
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2.5入门教程相关的知识，希望对你有一定的参考价值。
文章目录
1、课程介绍
基础知识 > 案例实践 > TodoList > Vue-cli > TodoList
2、Vue基础语法
2-1、创建第一个Vue实例
<!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入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='root'>{{msg}}</div>
<script>
new Vue({
el:'#root',
data:{
msg:'Hi'
}
})
</script>
</body>
</html>
2-2、挂载点，模板与实例
<!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入门</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- 挂载点，模板，实例之间的关系 -->
<div id='root'></div>
<script>
new Vue({
el:'#root',
template:' <h1>Hello {{msg}}</h1>',
data:{
msg:'Hi'
}
})
</script>
</body>
</html>
2-3、Vue实例中的数据，事件和方法
<!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入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='root'>
<h1>{{number}}</h1>
<h1 v-text='msg'></h1>
<div v-html='temp' ></div>
<h1 v-on:click="handleClick">
{{msg}}
</h1>
<h1 @click="handleClick">
{{msg}}
</h1>
</div>
<script>
new Vue({
el:'#root',
data:{
msg:'Hi',
number:123,
temp:'<h1>123</h1>'
},
methods: {
handleClick(e){
this.msg='Vue';
console.log('handleClick',e);
}
},
})
</script>
</body>
</html>
2-4、Vue中属性绑定和双向数据绑定
<!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入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='root'>
<h1 v-bind:title="msg">Hi</h1>
<h1 :title="msg">Hi</h1>
<input v-model="content" />
<h1>{{content}}</h1>
</div>
<script>
new Vue({
el:'#root',
data:{
msg:'Hi',
content:'this Vue'
}
})
</script>
</body>
</html>
2-5、Vue中的计算属性和侦听器
<!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入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='root'>
姓：<input v-model='firstName' type="text" name="" id=""><br />
名：<input v-model='lastName' type="text" name="" id="">
<div>{{fullName}}</div>
<h1>{{count}}</h1>
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: { // 一个属性由其他属性计算而来（计算属性）
fullName: function () {
return this.firstName + '' + this.lastName
}
},
watch: { // 监测（计算）属性变化（侦听器）
firstName: function () {
this.count++
},
lastName: function () {
this.count++
}
}
})
</script>
</body>
</html>
2-6、v-if，v-show与v-for指令
<!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入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='root'>
<!-- v-if 是移除DOM -->
<div v-if="show">Hello</div>
<!-- v-show 是display:none 频繁下 -->
<div v-show="show">Hello</div>
<button @click="handleClick">toogle</button>
<ul>
<li v-for='(item,index) of list' :key='index'>
{{index}}--{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
show: true,
list: [1, 1, 3]
},
methods: {
handleClick: function () {
this.show = !this.show
}
},
})
</script>
</body>
</html>
3、Vue中的组件
3-1、todolist功能开发
<!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入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='root'>
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
inputValue:'',
list:[1,2,3]
},
methods: {
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
}
},
})
</script>
</body>
</html>
3-2、todolist组件拆分
<!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入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id=Vue2.5开发去哪儿网App 从零基础入门到实战项目