一、 Vue-cli的简介与使用
a. 安装 (前提是先安装好了node)
a) node -v |npm -v 否则先去官网下载node
b) 官网https://cn.vuejs.org/-> 学习->教程->安装
c) 全局安装 (命令行 npm install --global vue-cli)
d) 创建项目
Vue init webpack 项目名称 //使用webpack模板创建标准的vue项目
e) 进入到todolist(刚才创建的项目目录) cd todolist npm run dev 在todolist目录下启动项目
f) 打开项目文件夹
g) Main.js
h) App.Vue
二、用Vue-cli开发todolist
b. 启动项目 进入项目目录 npm run dev|start
c. App.vue 重命名 TodoList main.js 重新配置
d. 实现TodoList
a) 将li展示数据 定义成组件
i. 重命名components/HelloWorld.vue->todoItem
ii. 在TodoList.vue中引入组件
iii. 删除功能 子组件发布 父组件监听(订阅)
Main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import TodoList from './TodoList' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { TodoList }, template: '<TodoList/>' }) |
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="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(k) { this.list.splice(k,1) ; }
} } </script> <style> </style> |
TodoItem.vue <template> <li @click="handleClick">{{index}}=>{{content}}</li> </template> <script> export default {
props:['index','content'] , methods:{ handleClick() { this.$emit('delete',this.index) ; } } } </script> <style scoped> </style> |
e. 全局样式与局部样式
a) 使用vue-cli 每个组件变成单文件组件 在文件中可以修改组件的模板 逻辑 样式
f. 推荐加上 scoped 作用于 只对当前有效 若是不加 是全局样式 会影响其他组件