三、VUE学习笔记 3 | Vue CLI--Todo List、Vuex、路由

目录

一、VUE CLI---DEMO

全局安装 vue-cli

安装依赖

删除功能

二、Vuex(基于Vue cli)

1、定义

2、使用

3、案例-state和mutations

 4、getters属性

三、路由

1、基本使用

 2、router-link

3、重定向

4、设置路由高亮

5、为路由切换启动动画

6、路由传参

（1）使用query

  (2) 使用param

7、命名视图实现经典布局

一、VUE CLI--- Todo List DEMO

• 全局安装 vue-cli

$ npm install --global vue-cli

 

• 进入计划存放项目的根文件，创建一个基于 webpack 模板的新项目，在这里，我们将这个项目的名称命名为vue-cli-demo

$ vue init webpack vue-cli-demo

 

在package.json中，查看

init好的webpack的Vue版本一般较老，进入https://github.com/vuejs/vue/releases，查看最新版本，去掉前面的^，来精确指定版本

• 安装依赖

cd vue-cli-demo
npm install
npm run dev

发布版本

npm run build

对写完的版本进行发布，会自动进行加密。导出文件在dist文件夹下

详细版见VUE学习笔记4

 

做一个todoList

(vue cli 组件通信的案例2 https://blog.csdn.net/qq_38563845/article/details/77444973 )

1、在vue cli中，data返回的形式要写为函数式的，返回值是对应的数据

2、再添加v-model对数据进行双向绑定

3、添加点击事件

4、此时数据只是存到了list中，但没有展示出来，我们在components文件夹中创建新的组件叫TodoItem 

用import导入组件，在export default中将子组件注册到组件中

5、显示item

TodoList.vue

<template>
<div>
  <div>
    <!-- 1 与data中的inputvalue双向绑定 -->
    <input v-model="inputValue"/>
    <!-- 2 绑定事件 -->
    <button @click="handleSubmit">提交</button>
  </div>
  <ul>
    <todo-item v-for="(item, index) of list" :key = "index"></todo-item>
  </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem'
export default {
  //局部组件
  components:{
    'todo-item':TodoItem
  },
  //data变成了函数，返回值是数据
  data() {
    return{
      inputValue:'',
      list:[] //定义数组存放数据
    }
  },
  methods:{
    handleSubmit() {  
      this.list.push(this.inputValue);
      this.inputValue='';
    }
  }
}
</script>

<style>

</style>

 TodoItem.vue

<template>
  <li>item</li>
</template>

<script>
export default {
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

这时每点击提交显示的是item

因此需要父组件TodoList向子组件TodoItem传值

6、父组件TodoList向子组件TodoItem传值，TodoList中绑定内容

 TodoItem用props接收内容，用插值表达式进行展示

删除功能

1、在TodoList中，将index值传给子组件

 2、在子组件中接收index

 3、当子组件被点击时，执行handleDelete方法

 4、子组件和父组件通信

子组件中用$emit触发删除事件，（）内的delete是自定义的，再传入index值

父组件中 @delete="handleDelete"   的@delete用于监听，触发handleDelete

JS的splice方法

最终代码

TodoList.vue