前端学习-Vue-cli

Vue-cli启动第一个项目

1.安装VSCode
2.电脑安装node.js
3 .安装vue-cli脚手架

之前代码都写在一个.vue文件中,但真实情况不是这样
真实的vue项目开发中,一般会借助webpack打包工具,帮助我们构建大型项目的开发目录,在开发完成后,会进行打包操作,帮助我们把代码打包生成一个线上可运行的最终代码, 若每个人都自己打包,那么太难了
vue官方提供了脚手架工具Vue-cli
通过这个脚手架,可以快速构建一个标准的vue项目,同时,这个脚手架工具中自带webpack的各种配置

按照官网教程,打开命令行

1.全局安装 vue-cli工具(只需要安装一次即可,后续创建项目不用反复安装)
  node -v 出现版本号
  npm -v 出现版本号
  以上两个说明电脑上已经正确安装了node和npm,如果上面两个没有版本号,需要先安装它们
  npm install --global vue-cli

2.在桌面上创建一个基于webpack模板的新项目,项目名叫my-project,当出现项目名字时一直回车选择默认选项即可
  cd Desktop
  vue init webpack my-project

3.启动项目,就可以看到vue默认的启动页面
  下面两个命令都会帮我们启动一个本地服务器来运行我们的代码
  npm run dev
  或
  npm run start

项目结构介绍
build:         项目的webpack配置文件,一般不动
config:        针对于开发环境和线上环境的一些配置文件,一般不动
node_modules:  项目依赖
static:        静态资源
index.html:    是整个网页最外层的html文件,可以看到有个id="app"的挂载点,vue的根实例就挂载到这个挂载点上
src:           源代码目录,代码写在这里

'下面看下src里面的内容'

'main.js文件:        整个项目的入口文件'
创建了Vue实例,看下实例做了什么
1. 让Vue实例的挂载点是'#app',就挂到了index.html的id="app"上
2. router是干嘛的?
3. 注册了一个局部组件App,可以看到有import App from './App',是从当前目录下的App引入的组件, 指得是src下的App.vue
4. 它的模板就是App这个组件的内容
所以,这个Vue实例,展示的内容,就是在这里注册进来的App组件 
根实例Vue里面展示的是从外部引入的根组件App

下面看下main.js的代码
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue

.vue文件:单文件组件编码形式

也就是说,一个组件是一个.vue后缀文件所定义的,在这个文件中,包含了组件的所有内容,包括它的模板,逻辑和样式
一个.vue文件就是一个完整的组件

'App.vue文件:        根组件'
可以看到全新的跟html不一样的页面
是脚手架工具提供给我们一套新的vue编码语法
这种语法叫做单文件组件,也就是说一个vue文件中,包含了一个组件必须的全部内容
有以下三个部分
1. template: 组件的模板,展示部分,这个模板下只能有一个最外层的根标签,不能并列多个
2. script:   组件的逻辑部分,里面有data函数,它的返回值对应着数据
3. style:    组件的样式部分,为模板做美化

如果把App.vue改成以下内容,那么运行如下图,之所以一运行就显示,是因为主入口根Vue里面显示的就是App组件
而App模板里是123,那么页面上就会显示123
<template>
  <div>123</div>
</template>

<script>
export default {
}
</script>

<style>
</style>

vue第一个demo:在input中输入内容,点击提交后,自动显示到下面的list上,并且input自动置空

实现代码如下:
在TodoList组件中实现
this指向当前组件

<template>
  <div>
    <input v-model="inputValue"/>
    <button @click="handleSubmit">提交</button>
    <ul v-for="(item, index) of list" :key="index">{{item}}</ul>
  </div>
</template>

<script>
export default {
    data() {
      return {
        inputValue: '',
        list: [] 
      }
    },
    methods: {
      handleSubmit() {
        this.list.push(this.inputValue)
        this.inputValue = ''
      } 
    }
}
</script>

对上面的demo进行组件拆分和组件通信

组件: 就是指页面上的某一部分
可以把一个大型网页拆成几个部分,每个部分就是一个小的组件,维护每个组件则相对简单很多

将上面demo中的list拆分成一个组件
1.在src的components下新建TodoItem.vue文件,这就是TodoItem组件
2.在TodoList中使用TodoItem组件
  -首先在TodoList的script中导入这个组件
  -通过components对局部组件进行声明,可以声明为一个对象,例如例子中我们命名为todo-item
   意思是在当前的组件模板中,我们通过todo-item这个标签来使用TodoItem组件
  以上两步就是把局部组件注册到当前组件中,就可以在上面的ul里面使用这个局部组件了

组件传值:在TodoList组件中使用子组件TodoItem

1. 父组件向子组件传值: 父组件通过属性的形式向子组件传值
2. 子组件接收值: 子组件中要在script的export default里的props里面对接收的数据进行一个定义,例如子组件要接收content这个数据,就要在子组件的props里声明对content的使用,声明好之后,就可以直接在子组件的template中使用content
3. 子组件和父组件通信: 调用this.$emit()方法,向外触发一些事件,将事件名字和下标写在参数里带到父组件中去,事件名是自己定义的

Demo2:在Demo1的基础上,点击列表项,则将此列删除

删除:把index也传给子组件,当子组件被点击时,执行子组件的handleDelete方法,在这里和父组件通信,告诉父组件我要被删除了,将父组件带来的下标传回给父组件
子组件触发了事件出去,父组件就需要在创建子组件的时候,监听这个事件
@delete="handleDelete",意思是一旦监听到delete事件被触发,就会执行handleDelete这个方法 ,删除当前行list即可
代码如下:

'TodoItem组件'
<template>
 <li @click="handleDelete">{{content}}</li>
</template>

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


'TodoList组件'
<template>
  <div>
    <input v-model="inputValue"/>
    <button @click="handleSubmit">提交</button>
    <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>

全局样式和局部样式

当我们使用vue-cli的时候,每个组件都变成一个单文件组件,在这个文件中,可以对组件的模板,逻辑和样式进行定义,而定义样式时,可以分为全局样式和局部样式
style的scoped代表作用域
加scoped,代表样式只对当前组件有效
不加scoped,代表样式全局生效

Demo3:给Demo2的每个列表项加颜色

也就是给TodoItem加颜色

1. 在TodoItem中的template中,class="自己随便起个名字,例如叫做xixi"
2. 在TodoItem中的style中,定义一个叫做xixi的类,给它添加颜色

其中style的scoped意思是给这个样式增加一个作用域,作用域就是这个组件中,若其他组件使用xixi这个类,也不会改变颜色
若不写scoped,那么不论哪个组件,用到xixix这个类,则样式都会被影响

<template>
 <li class="xixi" @click="handleDelete">{{content}}</li>
</template>

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

<style scoped>
 .xixi {
     color: green
 }
</style>>