VUE-CLI+SPRING-BOOT自定义配置

VUE-CLI+SPRING-BOOT自定义配置

VUE-CLI还剩一部分，做完之后根据spring boot in action学习spring boot，前后无关联。

疑问：

1.关于VUE框架中模板再理解

VUE-CLI：

tip1：App.vue

<template>
  <div>
    123
  </div>
</template>

<script>

export default {
  
}
</script>

<style>

</style>

这是原本的项目里面，把App.vue的东西都删了，就留下来了他的基本结构，这是提供的一种语法，模板、样式、逻辑

一个完整组件是是一个.vue文件

tip2:npm run start/npm run dev

这个写在了项目的package.json里面，就是启动了一个服务器，代码如下，所以上面两个写那个都是可彳亍的。

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config                             build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

tip3:template

template要求只能有一个最外层的包裹元素,所以如果标注的位置上没有div的是会报错的

<template>
  <div>//需要这个最外层的包裹
     <div>
         <input />
         <button>提交</button>
     </div>
     <ul>
       <li>1</li>
       <li>1</li>
       <li>1</li>
     </ul>
  </div>//标注
</template>

tip4：再了解main.js作为入口怎么用

这是把App.vue改成 TodoList.vue后需要进行的改动

import Vue from 'vue'
import TodoList from './TodoList'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { TodoList },
  template: '<TodoList/>'
})

 components: { TodoList }//这一行 可以写成components: { TodoList： TodoList }
 //但是TodoList： TodoList名字一样可以简写

tip5：组件中的data

之前学的data是个对象，但是现在组件里面就不是对象了，是一个函数了

data(){
  // data: function(){ 这里是两种写法都可以
    return{
        inputValue: ' ',
        list: []
      }
  },

tip6：实现了1.插入2.删除3.点击提交后清空文本框

整体代码与逻辑

TodoList.vue：

<template>
  <div>
     <div>
         <input v-model = "inputValue" />
         <button @click = "handleSubmit">提交</button>
     </div>
     <ul>
         <todo-item 
          v-for="(item, index) in list"
          :key="index"  
          :content="item"
          :index="index"
          @delete="handleDelete2"
         ></todo-item> 
     </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem'
export default {
 // components: ['TodoItem']
   components:   {
      'todo-item': TodoItem
   },
   data(){
  // data: function(){
    return{
        inputValue: ' ',
        list: []
      }
  },
  methods: {
    handleSubmit () {
      // alert(123)
      //this.list是this.$data.list的简写
      this.list.push(this.inputValue)
      this.inputValue=''
    },
    handleDelete2 (index) {
      this.list.splice(index,1)
    }
  }
}
</script>

<style>

</style>

TodoItem.vue

<template>
  <li @click="handleDelete1">{{content}}</li>
</template>

<script>
export default {
   props: ['content','index'],
   methods: {
     handleDelete1(){
       this.$emit('delete', this.index)
     }
   }
}
</script>
<style scoped>
</style>

先来看这部分：

 <ul>
         <todo-item 
          v-for="(item, index) in list"
          :key="index"  
          :content="item"
          :index="index"
          @delete="handleDelete2"
         ></todo-item> 
 </ul>

注：这里面:key="index",VUE2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。这里用了index绑定

:content="item"是绑定了item到content上，props: ['content','index'],子组件得到父组件的content值， <li @click="handleDelete1">{{content}}</li>这里输出content

那么输入的代码逻辑是：list: []是数据存放的数组，<input v-model = "inputValue" />做了个双向绑定， <button @click = "handleSubmit">提交</button>在点了提交按钮后，触发handleSubmit()函数,this.list.push(this.inputValue)做的是把inputValue放进list里面，然后this.inputValue=''把值重置，双向绑定的<input v-model = "inputValue" />这里的文本框里面的inputValue变成空，VUE内部会帮我们做到刷新。

 components:   {
      'todo-item': TodoItem
   },

这个是把TodoItem这个子组件绑定到父组件上，

 <ul>
         <todo-item 
          v-for="(item, index) in list"
          :key="index"  
          :content="item"
          :index="index"
          @delete="handleDelete2"
         ></todo-item> 
 </ul>

<todo-item></todo-item>就是使用这个子组件。v-for做的是循环输出。@delete="handleDelete2"是在监听delete这个参数，如果监听到了就执行handleDelete2()，我这里为了区分写了两个handleDelete，分别结尾是1和2，是为了说明他们都是为了完成delete但是并不一样。

handleDelete2 (index) {
          this.list.splice(index,1)
   }

handleDelete2()是将下标为index的删除。this.list是this.$data.list的简写

那么这个delete和index参数的来源是：<li @click="handleDelete1">{{content}}</li>点击content(就是push进list里面的内容)，触发handleDelete1函数

 handleDelete1(){
       this.$emit('delete', this.index)
     }

handleDelete1()函数把delete参数和这个content对应的index传出

tip7：scoped局部样式和全局样式

scoped的作用是样式只适用于该子组件，要是去了这个标识，那么父组件也可以使用

<style scoped>
 .item{
   color:green;
 }
</style>

<input class="item" v-model = "inputValue" />

有没有scoped直接影响输入框里能不能变绿。

tip8：

记一个无关紧要的tip，如果cmd想进入某个盘或者某个目录文件，要用cd /d 路径

SPRING-BOOT自定义配置

这部分今天整理不了，需要先把这一章看完思路理清，再敲代码。

疑问解决

一个不可见的包裹元素，主要用于分组的条件判断和列表渲染。VUE里面吧template主要是用了v-，比如绑定、双向绑定、监听

今日任务：

VUE-CLI的内容基本结束，重新过了一遍这里面父组件和子组件的联系和概念，demo的逻辑理顺了。然后看了spring boot in action第三章自定义配置，快看完了。但代码还没有敲。

周末任务：

接着学spring boot，周一的学习任务得看周末的学习情况。