导入：
经过上一个节课的知识，我们对vue有了一个简单的认识，那在实际的开发中，我们如何更好地、更快速的搭建环境，如何在页面遍历数据，按条件显示数据，给数据添加样式，为按钮绑定点击时间等，这就是我们这节课的内容
1.Vue-cli
1.1 vue-cli的安装
vue-cli:(command line interface ) 的缩写；简称vue脚手架，它是Vue 官方提供的标准化的开发工具。
仅第一次执行
npm install -g @vue/clitip:如果下载比较慢， 可以taobao镜像
npm config set registry https://registry.npm.taobao.org1.2 vue-创建项目
切换到你要创建项目的目录，然后使用命令安装
vue create vue-demo1.3. 启动项目
npm run serve强烈建议把以上生产的项目导入到idea 开发工具中
idea 安装vue 插件
1.4 项目结构
1.5单个vue 结构
每一个.vue文件，就是一个独立的vue组件。而单文件组件中包含三部分内容：
template：模板，支持html语法高亮和提示
script：js脚本，这里编写的就是vue的组件对象，看到上面的data(){}了吧
style：样式，支持CSS语法高亮和提示
2.回顾MVVM
VUE的作者在一定程度上参考了MVVM 模型，
M：模型（Model）,对应data的数据
V: 视图（View），对应模板
VM:视图对象（ViewModel），对应实例对象
右左线：data通过Vue(数据绑定)展示到页面
左右线：通过Vue(dom监听器)把页面数据传给Data
3.vue指令学习
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
3.1插值表达式
3.1.1{{}}
格式：{{表达式}}
说明：
? 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
? 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
? 可以直接获取Vue实例中定义的数据或函数
3.1.2 v-text和v-html
? v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
? v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
3.2 v-model
v-text和v-html可以看做是单向绑定，数据影响了视图渲染,但是反过来就不行
v-model是双向绑定，视图（View）和模型（Model）之间会互相影响
要想修改视图数据，对视图元素类型有一定的要求，必须是form表单类型的：
?input
?select
?textarea
?checkbox
?radio
?components（Vue中的自定义组件）案例一：
案例二：
3.3 v-on 监听事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
v-on:click 可以简写 @click
3.4 v-for 列表渲染
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"? 1个参数时，得到的是对象的值
? 2个参数时，第一个是值，第二个是键
? 3个参数时，第三个是索引，从0开始
案例一：
案例二：
你也可以用 v-for 来遍历一个对象的 property。
案例三：
3.5v-if和v-show
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染
语法：
v-if="布尔表达式"
A）简单使用
B)当v-if和v-for出现在一起时
v-for优先级更高。也就是说，会先遍历，再判断条件
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>c) v-else
一个点击切换的小案例
D)v-else-if，充当 v-if 的“else-if 块”，可以连续使用：
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>3.6 v-show
根据条件展示元素的选项是 v-show 指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
通过页面查看源码文件，可以看出是样式的控制：
3.7 v-bind
绑定样式
案例
<template>
<div id="app">
<div v-bind:class="myclass">绑定样式demo</div>
<button @click="change">改变</button>
</div>
</template>
<script>
export default {
name: "hello",
data(){
return {
myclass:'class_blue'
}
},methods:{
change(){
this.myclass='class_red'
}
}
}
</script>
<style scoped>
.class_blue{
border: 1px;
width: 300px;
height: 400px;
background-color:blue;
}
.class_red{
border: 1px;
width: 300px;
height: 400px;
background-color:crimson;
}
</style>简写：
v-bind:class可以简写为:class
3.8 计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
Vue中提供了计算属性，来替代复杂的表达式：
3.9 watch
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
4.组件
4.1 组件作用
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发
在CLI创建的vue项目中注册全局/局部组件
上图src的目标量，其中HelloWorld.vue是系统默认的组件，My.vue是自定义的，注册案例使用My.vue
My.vue的内容：
4.2 注册&使用全局组件my.vue
4.2.1注册全局组件
在main.js中 引入和注册组件
4.2.2使用组件
可以在任意组件中使用该全局组件，且可以多次使用
4.3 注册局部组件&并使用
1.使用components字段注册局部组件
2.局部组件只能在注册该组件的组件里使用
注意点：通常局部组件与根组件文件不在同一个文件，需要引入局部组件
4.4 组件通信
通常一个单页应用会以一棵嵌套的组件树的形式来组织：
? 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
? 左侧内容区又分为上下两个组件
? 右侧边栏中又包含了3个子组件
各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。
4.4.1 父>>>子通信
一个组件里面引入另外一个组件，此时构成了一种“父子关系”，当前组件为“父”，引入的组件为“子”，如当前组件（父），在父组件中通过 “:message” 向子组件通信。
目前有两个组件：
A）父组件内容
B)子组件
小结：父通过 :message给子传消息
子通过 props 接收消息
4.4.2 子>>>父 通信
在子组件中通过this.$emit()方法向父组件通信，如下，点击触发事件，执行this.$emit('fromChildMethod')，触发父组件的fromChildMethod方法。第一个参数是 方法名称，第二个是传到的消息内容
A）子组件
B）父组件
bus传递消息 ：大家自行百度学习
5.练习
1>新建一个空白项目,使用idea或者webstorm打开
2>在此空白项目中完成一个index.html的创建
3>使用<script src=””> 的方式引入vue.js文件
4>将此项目使用命令初始化成git本地仓库
5>添加到暂存区
6>创建一个新的dev分支
7>切换到dev分支
8>在dev分支上初始化vue实例
9>Vue实例中声明至少3中钩子方法
10>演示这3中钩子方法的执行顺序
11>在vue实例中声明data属性 data中要有一个json数组
12>在页面元素中使用vue v-for遍历data中的json 数组
13>遍历出来的偶数行背景颜色为绿色
14>遍历出来的奇数行背景颜色为黄色
15>定义一个文本”你好,我是美女
16>要求点击按钮切换上一步文本内容为”你好,我是帅哥”,交替切换
17>将dev分支合并至master,上传至远程仓库