因为Vue是一个构造函数 所以使用的时候要通过new的方式进行使用
Vue这个构造函数参数是一个配置项options,基本属性如下
options:
el:挂载点
data:当前Vue所需要的一些属性 (当前组件所需要的状态)
v-text:
作用是用来渲染数据和执行一些js语法
底层原理为innerText，不会解析标签
简写:{{}}
v-text:在加载的时候不会出现{{}}
{{}}:在加载的时候会出现{{}}，可以用v-cloak解决
v-html:
用来渲染数据和执行一些js语法
可以用来解析HTML标签
简写:{{{}}} 仅限于Vue1.0 后期被废除掉了
v-show:
值:布尔值 true显示 false隐藏
通过display来控制元素的显示和隐藏
v-if:
值:布尔值 true显示 false隐藏
通过删除元素和创建元素控制元素的显示和隐藏
v-if v-else-if v-else三者顺序不能变，中间也不能有其他语句
v-if/v-show二者之间的区别：
1、v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
2、使用场景
频繁切换的时候用v-show 例如选项卡
登录与非登录页面 VIP与非Vip
权限页面
v-for:
数组 对象 字符串 数字
语法：v-for="(值,下标) in 需要遍历的数据"
<p v-for="(item,index) in arr">{{item}} ------{{index}}</p>
<p v-for="(value,key) in obj">{{value}}----{{key}}</p>
<p v-for="(item,index) in str">{{item}}----{{index}}</p>
<p v-for="(item,index) in 10">{{item}}----{{index}}</p>
v-bind:
语法：v-bind:属性="值"
简写： :属性="值"
href
src
title
style
自定义属性
class
v-on:
语法： v-on:事件名称="事件函数"
简写：@事件名称="事件函数"
methods中以对象形式存放Vue所需要的一些事件
methods中如果需要访问data中的属性则通过this.属性名称即可
修饰符:
辅助一些事件 阻止事件冒泡 阻止浏览器的默认事件等等
语法： @事件名称.修饰符 = "事件函数"
一个事件后面可以跟多个修饰符 @事件名称.修饰符.修饰符.修饰符.... = "事件函数"
常见的修饰符：
.stop:阻止事件冒泡
.prevent:阻止浏览器默认行为
.once:事件只处发一次
.enter:回车
关于事件对象：
默认情况下如果事件函数不需要传递参数的时候可以不加() 然后可以将methods中的函数里通过e来获取到事件对象
如果需要传递参数的时候我们需要给事件函数加上()
然后给这个函数传递一个$event参数
这样就可以拿到事件对象了
v-model:
流程：当输入框的数据发送改变的时候就会修改data中相对应的数据
当data中的数据发生了改变一会视图层也会跟随着发生改变(数据驱动视图)
使用的场景：只能在表单元素中进行使用
computed:
通过属性计算而得来的属性
注意：
1、computed内部的函数名称可以随意编写
2、computed内部的函数必须通过return的方式将结果进行返回，最好不要在内部进行赋值操作
3、虽然computed内部是以函数的方式进行编写，但是在调用的时候并不是一个函数，所以不需要加()
4、只要函数内部所依赖的属性发生了改变，那么这个函数就会自己调用
5、如果函数内部所依赖的属性没有发生改变的时候computed会从缓存中读取结果
总结：computed中的方法都是依赖于Vue中data里面的属性，如果属性发生了改变那么computed中所对应的函数就会去执行
使用的场景：当多个属性影响一个属性的时候我们就需要用到computed( 购物车)
VUE的实例方法
vm.$on:事件绑定
作用: 将事件绑定后放入事件队列中
参数1:事件名称
参数2：事件函数
vm.$emit:事件触发
作用：触法事件队列中的所有事件
参数1：事件名称
参数2：需要传递的参数 选填
vm.$off:事件解绑
作用：将事件队列中的事件移除
参数1：事件名称
参数2：需要解绑的事件函数 选填
vm.$once:事件绑定
作用:该事件只触发一次
参数1:事件名称
参数2：事件函数
