vue基础

  1、框架

        

        ！new Vue要大写V

        ！data不是date  

2、指令v-bind

        单向数据绑定，一般放在属性里，在属性前加 ‘ v-bind：’，可以拿到数据

3、指令v-cloak

        解决插值表达式存在的“闪动”问题（原理，先隐藏，替换好值再显示）

4、指令v-text

        填充纯文本，比插值表达式更简洁

5、指令v-html

        填充HTML片段，存在安全隐患，在本网站数据上使用

6、指令v-pre

        填充原始信息，显示原始信息，跳过编译过程

7、指令v-once

        只编译一次，显示内容后不再具有响应式功能

8、指令v-model

        双向数据绑定，在标签里加 ‘ v-model=" " ’，可以修改数据

9、指令v-bind

        属性绑定，“ v-bind:href = 'url' ”,可缩写成“ :href = 'url' ”

9、方法

        methods：{

                search（）{ console.log() }        //里面可写多个方法

                saeHi（）{ console.log() }

        }

10、绑定事件

        v-on：+事件名称=“方法名称”，例   v-on:click = "search" 或  v-on:click = "search(可传参)"

        简写@+事件名称=“方法名称”，例  @click = "search" 或 @click = "search()"

6、修饰符

        例：.prevent修饰符在v-on指令后，阻止事件原本的默认行为，相当于event.preventDefault()

                .stop 阻止冒泡

                .enter 回车键（按键修饰符）

                .delete删除键

                自定义按键修饰符：Vue.config.keyCodes.f1 = 112（f1是自定义名称，112是按键ASCII码值）

7、条件渲染

        条件指令：v-if=“”、v-else-if、v-else（v-show的功能和v-if相同，但不常用）

8、列表渲染

        循环指令：v-for=“n in 10”（指从一到十遍历一遍）

                          v-for=" (n, index) in 10"（指从index到10遍历一遍）

                          v-for=" n in array "（指遍历名为array的数组）

9、vue组件

        局部组件

        

        全局组件（写在外部js文件，在所需要的页面导入）       

       

 10、vue生命周期

        create()方法在页面渲染之前执行，mounted()方法在页面渲染之后执行