1.1、脚手架环境安装Vue

安装脚手架依赖

# 安装 @vue/cli
cnpm i -g @vue/cli

1.2、创建Vue项目

在本地创建项目文件夹，例如? d:\project, 在此目录中运行 cmd ，然后执行下面命令：

# 创建项目
vue creat   myapp

# 根据提示选择安装配置

# 项目创建成功后
cd myapp
npm run serve

项目启动成功后，在浏览器中访问 http://localhost:8080

1.3、精简项目代码

项目目录结构

- public 本地服务器根目录
- src 源码
    - assets 静态资源文件，例如图片，视频等；
    - components 管理公共组件的目录
    - router 管理路由的目录
    - store  管理状态的目录
    - views 管理视图组件的目录
    - App.vue 根组件
    - main.js 入口文件
-package.json npm 的配置组件

精简：

对 App.vue 精简

<template>
        <router-view><router-view>
</template>
<style>
    html,body {
        margin:0;
        padding:0;
        height:100%
    }
</style>

剩下的目录根据项目需求进行删除

Vue的核心概念

2.1、指令

2.1.1、文本指令

v-text
v-html?

2.1.2、流程控制

v-if
v-else-if
v-for
- key属性表示什么意思
- 与 <template> 配合使用时， key属性要声明在子元素上
- ```
<temolate v-if="i in 10">
        <div :key="i">
            {{i}}
        </div>
</template>
```

2.1.3、显示与隐藏

v-show
- 与 v-if 的区别：
  - v-show 使用display 属性控制元素的显示与隐藏
  - v-if 值为 false时，不会被渲染在页面上
  - 执行效率分析

2.1.4、属性绑定

v-bind
- v-bing的值一定是? 在一个data声明的变量或 js表达式? ?

style绑定

：style=”“ 值为对象，对象的属性是 css 的样式元素（以小驼峰式命名样式属性名）
：style=”“ 写法：

<template>
  <div>
      <!-- 写法一，值为字母自符串 -->
      <div :class="'red'"></div>
      <!-- 写法二，值为对象 -->
      <div ：class="{red:true}"></div>
      <!-- 写法三，值为数组 -->
      <div :class="[s1,s2]"></div>
      <!-- 写法四，值为变量 -->
      <div :class="s1"></div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            s1:'red',
            s2:'big'
        }
    }

}
</script>

<style scoped>
.red{
    color:red
}
.big{
    font-size:20px;
}
</style>

2.1.5、事件处理

v-on
- 简写 @

获取当前元素的事件对象

<template>
  <div>
     <button @click="handleClick($event)">按钮</button>
     <input type="text" @keypress="handleInput($event)">
  </div>
</template>

<script>
export default {
   methods:{
       handleclick(e){
           //获取当前元素的事件对象
           console.log(e)
           //获取点击的元素DOM对象
           console.log(e.target)
       },
       handleInput(e){
           //获取当前输入框的值
           console.log(e.target.value)
           //获取当前输入的状态码
           console.log(e.keyCode)

       }
   }

}
</script>

事件修饰符

<template>
  <div>
     <!-- 阻止事件冒泡 -->
     <button @click.stop="add">按钮</button>
     <!-- 当自身元素被触发时才会执行事件函数,如果事件冒泡传递来的,不会触发 -->
     <button @click.self="add">按钮</button>
     <!-- 在事件冒泡中优先执行 -->
     <button @click.capture="add">按钮</button>
     <!--  阻止浏览器默认事件-->
     <button @click.prevent="add">按钮</button>
     <!--  在本次渲染后只能触发一次-->
     <button @click.once="add">按钮</button>
     <!-- 忽略 event.preventDefault()行为，不能和 prevent 修饰符同时使用 -->
     <button @click.passive="add">按钮</button>

  </div>
</template>

按键修饰符
- .enter
- .tab
- .delete(捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
系统修饰符
- .ctrl
- .alt
- .shift
- .meta

2.1.6、表单绑定

v-model

修饰符

.trim 去掉首尾空格
.number 如果是是数字开头的话，如果内容中间出现非数字内容，只会保留第一部分的数字；如果是非数字开头，以字符串类型处理
.lazy 当失去焦点时，才会执行双向绑定
如果要绑定checkbox 多个元素时， v-mode="array"值要为数组类型

<template>
  <div>
    <!-- 文本输入框 -->
    <input type="text" v-model='val'>
    <!-- 文本域 -->
    <textarea v-model="vals"></textarea>
    <!-- 单选框 -->
    <input type="radio" v-model="sex" value="男">男
    <input type="radio" v-model="sex" value="女">女
    <!-- 复选框 -->
    <input type="checkbox" v-model="hobody" value="篮球">篮球
    <input type="checkbox" v-model="hobody" value="足球">足球
    <input type="checkbox" v-model="hobody" value="排球">排球
    <input type="checkbox" v-model="hobody" value="羽毛球">羽毛球
    <!-- 下拉框 -->
    <select v-model="word">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
  </div>
</template>

<script>
export default {
  data(){
    return {
      val:'',
      vals:'',
      sex:'男',
      hobby:['篮球'],//如果有值，该项为默认选中
      word:''



    }
  }

}

2.1.7、编译处理

v-pre
- 跳过当前元素及其子元素，不进行编译
v-once
- 只会渲染一次
v-cloak
- 会一直保留在元素上面，直到 vue编译完成后，自动消失

2.1.8、插槽

? v-slot
- 简写 #
- 仅限于<template> 组件上使用
- 示例：自定义组件 src/components/Goodscard.vue

<template>
  <div>
   <hr>
   <h2>商品卡片</h2>
   <hr>
   <div>
     商品标价：<slot name="title"></slot>
   </div>
   <hr>
   <div>
     商品价格：<slot name="price"></slot>
   </div>
  </div>
</template>

使用GoodsCard.vue 组件

<template>
  <div>
  <goods-card>
    <template v-slot:price>
      100
    </template>
    <template #title>
      <span style="color:red">这条牛仔裤</span>
    </template>
  </goods-card>
  </div>
</template>

<script>
import GoodsCard from './components/GoodsCard.vue'
export default {
  components:{
    GoodsCard
  }

}
</script>

2.2、选项

2.2.1、数据选项

data
- 在组件内，必须是一个返回初始对象的函数
- 为了保证当前组件的多个实例直接不会共享data中的数据
props
- 接收父组件传值
- 定义的props 属性的一个对象，该对象中的四个属性：
  - type：设置当前属性的数据类型，可以使用数组的形式设置指定多种类型，例如：[String,Number]，共支持八种类型，即：String,Number,Boolean,object,Function,Array,Date,Symbol
  - default:设置默认值，any任意类型
    - required：设置当前属性是否必填，值为true时为必填项
    - validator：设置当前属性值的校验函数，函数返回值为true时通过校验，代码示例：
    - ```
    props:{
        type:{
          validator:function(val){
            return
            ['success','danger','error'].includes(val)
          }
        }
      }
```
?methods
- 用于定义函数
watch
- 用于监听响应式数据的变化

export default {
  data(){
    return{
      i:0,
      obj:{
        a:{
          b:{
            c:0
          }
        }
      }
    }
  },
  watch:{
    i(){
      //监听 i 的变化
    },
    obj:{
      handler(){
        //监听对象的变化
      }，
      deep:true//深度监听，只能监听对象属性的变化
    }

  }
  }

computed
- 计算属性
- 有缓存，当所依赖的响应式数据发生变化时，才会重新计算

2.2.2、DOM选项

el
- 使用css选择器或HTMLDomcument对象的方法获取到页面中已经存在的DOM元素，将该元素作为Vue实例的挂载目标
- template
  - 在自定义组件中用于创建VNode模板
  - 声明在VNode模板中，最外层只能有一个根目录

2.2.3、生命周期

beforeCreate
- 不能获取vue实例的属性和方法
- 不能获取DOM对象
created
- 能获取vue实例的属性和方法
- 不能获取DOM对象
beforeMount
- 能获取vue实例的属性和方法
- 不能获取DOM对象
mounded
- 能获取vue实例的属性和方法
- 能获取DOM对象
beforeUpdate
- 当data中响应式数据发生变化时，会触发页面的渲染，页面渲染前将调用该方法
- 在此方法获取的响应式数据的值为修改后的值
updated
- 响应式数据更新，触发页面渲染，页面渲染将调用此方法
- 在此处可以更新后的DOM元素对象
beforeDestroy
destroyed
activated
deactivated
errorCaptured

2.2.4、资源选项

filters
- 过滤器
directives
- 自定义指令
- 钩子函数
  - bind
  - inserted
  - update
  - componentUpdated
  - unbind
- 钩子函数的参数
  - el
  - binding
  - vnode
  - oldVnode
components