Vue基础入门（vue组件化的使用和vue-cli组件化的使用）
vue组件化的使用和vue-cli组件化的使用
- 效果展示
- 不使用用组件化
- 使用组件
- 使用vue-cli
效果展示
输入数字后点击提交自动生成一列显示输入内容，点击该列该列消失
不使用用组件化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src=vue.js></script>
</head>
<body>
<div id="root">
<input type="text" v-model="inputValue">
<button @click="handleClick">提交</button>
<ul>
<li v-for="(item, index) of list" :key="index" @click="handleDelete">{
{
item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
inputValue: "",
list: []
},
methods: {
handleClick: function() {
this.list.push(this.inputValue)
this.inputValue = ""
},
handleDelete: function(index) {
this.list.splice(index,1)//this.$data.list
}
}
})
</script>
</body>
</html>
使用组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 入门</title>
<script src='vue.js'></script>
</head>
<body>
<div id="root">
<div>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!-- <li v-for="(item, index) of list" :key="index">{
{
item}}</li> -->
<todo-item v-for="(item, index1) of list"
:key="index1"
:content="item"
:index2="index1"
@delete="handleDelete"
></todo-item>
</ul>
</div>
<script>
//全局组件
Vue.component('todo-item', {
props: ['content','index2'],
template: '{
{content}} ',
methods: {
handleClick: function() {
this.$emit('delete', this.index2, this.content)
}
}
})
//局部组件
// var TodoItem = {
// template: 'item '
// }
new Vue({
el: "#root", //绑定dom元素
//局部组件
// components: {
// 'todo-item': TodoItem
// },
template:'',
data: {
inputValue: "",
list: []
},
computed:{
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue)
this.inputValue=""
},
handleDelete: function(i,c) {
this.list.splice(i,1)
console.log(c)
}
},
watch: {
}
})
</script>
</body>
</html>
使用vue-cli
//main.js入口文件
import Vue from 'vue'
import TodoList from './TodoList'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: {
TodoList },
template: '//TodoList组件
<template>
<div>
<div>
<input class="item" type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
</template>
<script>
import TodoItem from './components/TodoItem'
export default {
components: {
'todo-item': TodoItem
},
data () {
return {
inputValue: '',
list: []
}
},
methods: {
handleSubmit () {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete (index) {
this.list.splice(index, 1)
}
}
}
</script>
<style>
</style>
//TodoItem组件
<template>
<li class="item" @click="handleDelete">{
{
content}}</li>
</template>
<script>
export default {
props: ['content', 'index'],
methods: {
handleDelete () {
this.$emit('delete', this.index)
}
}
}
</script>
<style scoped>
.item{
color: green;
}
</style>