开始搞前端了，系统学习一下VUE还是很有好处的，完善自己的技术栈，这样以后可以独立设计一套产品，不管是做公司项目，还是外包项目，都能游刃有余
1. Vue.config.productionTip = false
//阻止 vue 在启动时生成生产提示。可以去掉图1的提示
<h1>Hello，{{name.toUpperCase()}}，{{address}}，{{Date.now()}}</h1>
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
Vue实例和容器是一一对应的；
root容器里的代码被称为【Vue模板】
:href="school.url", 这样写school.url是一个js表达式，会去data中找值
v-bind：可以简写成 ：
Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
MVVM模型
1. M：模型(Model) ：data中的数据
2. V：视图(View) ：模板代码
3. VM：视图模型(ViewModel)：Vue实例
观察发现：
1.data中所有的属性，最后都出现在了vm身上。
2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
1. ViewModel通过Data Binding让obj中的数据实时在DOM中显示
2. ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据
事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
/*
所有元素的之间的间隔都是20px
*/
*{
margin-top: 20px;
}
/*不够的话出现滚动条*/
.list{
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
<!-- 阻止默认事件（常用） -->
<a href="http://www.roy.com" @click.prevent="showInfo">点我提示信息</a>
加上prevent可以阻止超链接的跳转
<!--修饰符可以连续写-->
<a href="http://www.roy.com" @click.prevent.stop="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡（常用），都必须是相同的，才能冒泡，复用一个方法的时候就会出现冒泡 -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
<!--修饰符可以连续写-->
<a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a>
</div>
<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>
计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
绑定样式：
1. class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
<div id="root">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定
正常的样式正常写，绑定的样式绑定写，最后汇总在一起
-->
<div class="basic" v-bind:class="mood" @click="changeMood">{{name}}</div> <br/><br/>
<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
