# 1·vue基础入门

##### 1.1脚手架环境安装
### 安装@vue/cli
cnpmi -g @vue/cli
##### 创建vue项目
在本地创建项目文件夹，例如d:/project
在此目录中运行cmd ,然后执行下列命令
- 创建项目
- 根据提示选择安装配置
- 项目创建成功后 cd myapp/     npm run serve
- 

精简
对App.vue精简

剩下的目录根据项目需求进行删减
# vue的核心概念
### 2.1指令
文本指令
1. v-text
2. v-html
流程控制
1. v-if
2. v-elseif
3. v-else
4. v-for
key的属性
表示标签的唯一性 提高效率的·
显示与隐藏
v-show与v-if的区别
v-show 是display属性控制元素的显示与隐藏
v-if为false时不会被渲染到页面上
属性绑定
v-bind  他的值一定是一个在data声明变量或js表达式
style绑定  他的值为对选 对象的属性是css的样式元素（以小驼峰样式命名）
### 2.2选项

2.2.1
1. data 在组件内，必须是一个返回初始    为了保证档当前组建的多个实例
2. props接收父组件传值  有4个属性 type：string，number，boolean，object，array,date
3. methods
4. watch用于监听响应式数据变化
5. computed
2.2.2
1. el 使用css选择器对象的方法获取到页面中已经存在的DOM元素
2. templete
2.2.3
1. beforecreate
2. created
3. beforemounte
4. mounted
5. beforeupdate
6. uptated
7. beforedestory
8. destoryed
9. errorcapture
2.2.4
1. filters过滤器
2. directive自定义指令 钩子函数 bind inserted update unbindcomponenupdate 
3. components

### 2.3实例属性和方法
### 2.4内置组建
### 2.5特殊属性
### 2.6全局API
<script>
export default{
    methods{
        handeleClick(e)
        console.log(e.target)
    },
handleInput(e){
    console.log(e.keycode)
}
}

事件修饰符
<button @click.self="add">按钮</button>
<button  @click.capture="add">按钮</button>
<button @click.prevent="add">按钮</button>
<button @click.once="add">按钮</button>
<button @click.passive="add">按钮</button>
<script>{
    methods{
        add(){
            
        }
    }
}
export default{}

系统修饰键
.ctril
.alt
.shift
.meta
2.1.6表单绑定
v-modle
修饰符
.trim去掉收尾空格
.number 如果是数字开头的话会显示 数字
<div> <input type ="text" v-modddel= "val"></div>
2.1.7编译处理
2.1.8插槽