VUE的基本语法(一)

因为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  需要遍历的数据"

{{item}} ------{{index}}

{{value}}----{{key}}

{{item}}----{{index}}

{{item}}----{{index}}

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：事件函数

vm.$mount: 外部设置挂载点

vm.$forceUpdate强制更新

vm.$destroy卸载 断开与Vue之间的联系

vm.$nextTick获取数据更新后最新的DOM结构