修改webpack的配置 ，vue的组件及使用，模板语法，指令事件对象，事件修饰符

002

1. 修改webpack 的配置 官网打开 Vue CLI

目录结构

  src ： 开发时编写代码的位置
  main.js 入口文件
App.vue 首屏加载的页面
   如果需要修改webpack的配置，需要在项目根目录下创建 vue.config.js
  具体的配置参考：https://cli.vuejs.org/zh/config/

2. vue的组件

  1. 组件是以 .vue 结尾的
  2. 组件的结构：

      <template><template>    : 页面结构，必选项，只能有一个顶层标签
      <script></script>       : 组件的业务逻辑，可选项
      <style scoped lang='less'></style>   : 页面的样式，可选项

标签属性：
   scoped : 当前页面的css上都会加一个命名空间，只在当前页面生效
   lang : 设置语言，默认是css

3. 组件的使用

  1. 导出组件
   导出功能属于js功能，所以定义在 script 标签中，在vue中导出组件是默认的(export default)，所以可以不写导出
  2. 导入组件
     import Comp from ‘path’
  3. 声明组件(注册组件)
     export default{
       components:{ //注册组件
         Comp
      }
     }
  4. 使用组件

<Comp />

4. 模板语法

1. 在template中渲染动态数据
2. 语法： {{ js表达式 }}
   1. {{ 变量 }} : 在template标签中，当前组件中定义的变量直接使用，不需要加this
   2. {{ js表达式 }}
   3. {{ }} : 在template标签中不能直接渲染 jsx 语法
   4. 能在哪里使用 : 在标签中用

5. 指令

 指令的写法： v- 开头
 指令等号后的引号： 引号代表js运行环境，中间写js表达式
 指令使用位置： 在标签上作为属性使用
 指令的作用：都是操作DOM的

1. v-html 指令
     1. 作用：渲染原始html
     2. 语法：

             <div v-html=' 表达式 '></div>

2. v-bind 指令
      1. 作用： 动态的给标签添加属性
      2. 语法：

            <div v-bind:attributeName='js表达式'></div>

v-bind 例子

<template>
    <div>
        <!-- v-bind指令 -->
        <div v-bind:id='myid'>失联客机范德萨冷静</div>
        <!-- 普通属性 href,src,value,url -->
        <a v-bind:href=" 'http://www.baidu.com' " >跳转</a>
        <!-- class类名 -->
        <!-- 1. 字符串形式的  -->
        <div v-bind:class="myclass">都说了会计分录</div>
        <!-- 2. 数组形式的  -->
        <div v-bind:class="myclass2">但是六块腹肌了</div>
        <!-- 3. 对象形式的 -->
        <div v-bind:class='myclass3'>sdfsdfs</div>

        <!-- style 行内样式 -->
        <!-- 1. 对象形式 -->
        <div v-bind:style='mystyle'>熟练法师开了</div>
        <!-- 2. 数组语法 -->
        <div v-bind:style="[{border:'1px solid #000'},mystyle]">老师肯定就发了顺丰</div>
        <!-- 3. 字符串形式 -->
        <div v-bind:style=" 'font-size:50px' ">垃圾分类</div>
    </div>
</template>

<script>
export default {
    name:'Vbinddirective',
    data(){
        return{
            myid:'box',
            myclass:'box1 box2 box3',
            myclass2 : ['box4','box5','box6'],
            myclass3:{
                box7:true,
                box8:1>2
            },
            mystyle:{
                color:'red',
                'font-size':'18px',
                fontWeight:'bold'
            }
        }
    }
}
</script>

  3. 简写： 简写成:

            <div :id='xx' :class='{}' :style='{}'></div>

3. v-if / v-show 指令
   1. v-if : 条件渲染
     1. 是否渲染指定的元素
     2. 语法：

                <div v-if='表达式'></div>
                 <div v-else-if='表达式'></div>
                  <div v-else></div>

  2. v-show: 条件显示
     1. 是否显示指定的元素
     2. 语法：

             <div v-show='表达式'></div>

   3. 什么时候用 v-if 或 v-show?
   v-if 更高切换开销
   v-show 更高的初始渲染开销

4. v-for
    1. 作用： 列表渲染
    2. 语法：

             <div v-for='(item,index) in arr' :key='item.id'></div>
                     <div v-for='(item,key,index) in object' :key='key'></div>

5. v-on
     1. 作用：绑定事件
     2. 语法：

            <div v-on:eventName='function'></div>

 eventName : 就是常见的事件名称
鼠标事件：click, mouseover , mouseout
键盘事件：keydown , keyup ,keypress
系统事件：ctrl , alt , shift , commend
3. 定义事件函数的位置：
   export defaut{
    methods:{ //定义事件函数的位置
     clickme(){
      console.log(this) // this 指向当前组件
      }
     }
   }

6. 事件对象

1. 函数没有实参，默认第一个实参就是事件对象
2. 函数有实参，默认不传递事件对象，如果想接收事件对象，必须手动传入 $event
3. 函数的实参直接写在小括号中，只有事件触发时，才会执行函数调用

7. 事件修饰符

1. 作用：对事件进行限制
2. 语法：

     <div v-on:click.stop.prevent.once='function'></div>

3. 常见的事件修饰符
   .stop : 阻止事件冒泡
   .prevent ：阻止默认事件
   .once ：事件只触发一次
4. 键盘修饰符
   .enter ：按到回车键
   .space ：按到空格键
   .up ：上
   .down ：下
   .left ：左
   .right ：右
5. 系统修饰符
   .ctrl
   .alt
   .shift
   .meta
   .exact 修饰符 : 修饰符允许你控制由精确的系统修饰符组合触发的事件
   简写：v-on 简写成 @