一、vue-cli的简介 与使用
1、安装vue-cli
npm install –global vue-cli
vue init webpack todolist
cd todolist
npm run dev
2、项目文件目录
\index.html整个项目的html文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>todolist</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
\src\main.js整个项目的入口文件
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})注册了一个局部组件。是从当前目录下APP引入的组件。
\src\app.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</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-cli开发TodoList
template里面只能有一个最外层的包裹元素。
之前data：{}作为对象使用。但是在脚手架工具里面，data数据应该变成一个函数。返回值是具体的数据。
\src\TodoList.vue
<template>
<div>
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete_one="handleDelete"
></todo-item>
</ul>
</div>
</template>
<script>
import TodoItem from './components/TodoItem'
export default {
components:{
'todo-item':TodoItem
},
data () {//data:function(){
return{
inputValue:'',
list:[]
}
},
methods:{
handleSubmit () {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete (index) {
this.list.splice(index,1)
}
}
}
</script>
<style>
</style>
\src\components\TodoItem.vue
<template>
<li @click="handleDelete">{{content}}</li>
</template>
<script>
export default {
props: ['content','index'],
methods:{
handleDelete () {
this.$emit('delete_one',this.index)//向外出发一些事件
}
}
}
</script>
<style></style>三、全局样式与局部样式
<style scoped>
.item{
color: green
}
</style>scoped作用域限制，只对当前组件有影响。
扫一扫
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
