文章目录
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>javascript">
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>javascript">
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>javascript">
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>javascript">
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>javascript">
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>javascript">
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>javascript">
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='root'>
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item">
</todo-item>
</ul>
</div>
<script>javascript">
Vue.component('todo-item', {
props: ['content'], // 接受从外部传入的参数
template: '<li>{{content}}</li>'
})
new Vue({
el: '#root',
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
})
</script>
</body>
</html>
3-3、组件与实例的关系
<!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>
<todo-item v-for="(item,index) of list" :key="index" :content="item">
</todo-item>
</ul>
</div>
<script>javascript">
Vue.component('todo-item', {
props: ['content'], // 接受从外部传入的参数
template: '<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
console.log('handleClick',1);
}
}
})
new Vue({
el: '#root',
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
})
</script>
</body>
</html>
3-4、实现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>
<!-- :content="item" 父组件传递给子组件 -->
<!-- @delete='handleDelete' 监听子组件的变化 -->
<todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete='handleDelete'>
</todo-item>
</ul>
</div>
<script>javascript">
// 子组件 :content就是绑定了content属性
// 父组件给子组件传递content参数，通过属性传递，通过props接收
Vue.component('todo-item', {
props: ['content', 'index'], // 接受从外部传入的参数
template: '<li @click="handleClick">{{content}}</li>',
methods: {
handleClick: function () {
// console.log('handleClick',1);
// 子组件数据要删除，必须在父组件里面对应渲染子组件那条数据删除
// 子组件和父组件通信，发布订阅模式
// 这是子组件向外部（发布一个事件）父组件传递数据
this.$emit('delete', this.index)
}
}
})
// 父组件
new Vue({
el: '#root',
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function () {
this.list.push(this.inputValue)
this.inputValue = ''
},
// @delete='handleDelete' 监听子组件的变化
handleDelete: function (e) {
console.log('handleDelete', e);
this.list.splice(e, 1);
}
},
})
</script>
</body>
</html>
4、Vue-cli的使用
vuecli_463">4-1、vue-cli的简介与使用
脚手架
npm run serve
vue">App.vue
<template>
<div id="app">
<!-- 父组件向子组件传递 -->
<HelloWorld msg="Welcome to Your Vue.js App" />
<div>
<el-button>el-button</el-button>
</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
</style>
vue">HelloWorld.vue
<template>
<div>
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
// props: ['msg'], // 这个是可行的
props: { // 接收父组件传递数据参数
msg: String
}
// 跟上一节的形式不一样
// props: ['content', 'index'], 接受从外部传入的参数
}
</script>
<style scoped>
</style>
vuecliTodoList_527">4-2、使用vue-cli开发TodoList
vue">App.vue
<template>
<div id="app">
<div>
<el-button>el-button</el-button>
</div>
<!-- 父组件向子组件传递 -->
<TodoList msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
// 注册组件
import TodoList from './components/TodoList.vue'
export default {
name: 'app',
components: {
TodoList
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
vue">TodoList.vue
<template>
<div>
<h1>{{ msg }}</h1>
<div>
<input v-model='inputValue' type="text" name="" id="">
<button @click='handleSubmit'>提交</button>
</div>
<div>
<ul>
<TodoItem v-for='(item,index) of list' :key='index' :content='item' :index='index'
@delete='handleDelete'>
</TodoItem>
</ul>
</div>
</div>
</template>
<script>
// 注册组件
import TodoItem from './TodoItem.vue'
export default {
name: 'TodoList',
components: {
TodoItem
},
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleSubmit() {
this.list.push(this.inputValue);
this.inputValue = ''
},
handleDelete(index) {
this.list.splice(index, 1)
}
},
// props: ['msg'], // 这个是可行的
props: { // 接收父组件传递数据参数
msg: String
}
// 跟上一节的形式不一样
// props: ['content', 'index'], 接受从外部传入的参数
}
</script>
<style scoped>
ul {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
vue">TodoItem.vue
<template>
<div>
<span @click='handleDelete'>{{content}}</span>
</div>
</template>
<script>
export default {
name: 'TodoItem',
props: ['content', 'index'],
methods: {
handleDelete() {
this.$emit('delete', this.index)
}
},
}
</script>
<style scoped>
span{
background-color: #ff4f00;
}
</style>
4-3、全局样式与局部样式
scoped
