vue所有基础语法部分

赋值操作：

        Muatache：

                在data中定义数据，使用插值语法进行页面渲染

        v-once：

                在data中定义数据，然后在标签中写v-once，然后插值

        v-html：

                在data中定义一个数据里面写a标签跳转，然后在标签1中插值这个数据，在标签2中通过v-html绑定这个值

        v-test：

                v-test和Mustache一样，在data中定义一个数据，可以通过插值直接显示，也可以通过v-text绑定这个值

        v-pre：

                v-pre用于跳过这个元素的编译过程，显示原来的语法，比如设置数据为Hello，在标签上直接插值 就可以获取到hello，v-pre是在标签上就可以渲染出设置的{{数据名}}

        v-cloak:

                网络较慢，网页还在加载vue.js，导致vue来不及渲染，这时就会显示vue源代码，就可以使用v-cloak解决这个问题 在div中绑定v-cloak

 绑定属性：

        v-bind：

                可以动态绑定一些链接src，href等，在data中设置元素，在标签中通过v-bind：元素

                v-bind语法糖：简写为冒号：

                动态绑定class 多种方法

                        一：对象语法：

                                        class后面跟的是一个对象

                                        1.直接通过{}绑定一个类

                                         2.可以通过判断，传入多个值

                                         3.和普通类同时存在，并不冲突

                                         4.可以放在methods或者computed

                        二：数组语法：

                                           class后面跟的是一个数组

                                           1.直接通过{}绑定一个类

                                           2.可以通过判断，传入多个值

                                           3.和普通类同时存在，并不冲突

                                           4.可以放在methods或者computed

                          v-bind动态绑定style

                                我们可以利用v-bind来绑定一些css内联样式

                                比如：font-size

                                           可以使用驼峰式fontSize或者横线分隔font-size

                                两种方法：

                                        一：对象语法

                                        style后面跟的是一个对象类型

                                        二：数组语法

                                        style后面跟的是一个数组类型 多个值用逗号隔开

计算属性：

                        比如我们有俩个变量，我们多个地方需要完整的名称，就需要写多个变量，我们可以将代码换成计算属性，计算属性是写在computed中的

         有了methods为什么还要有计算属性computed：

          计算属性会进行缓存，如果多次使用，计算属性只会调用一次

事件监听：

         v-on：

                在data中定义数据，在标签上可以通过v-on：click=“数据”来实现

         v-on的参数：

                如果方法不需要额外参数，那么方法后（）可以不加，如果本身只有一个参数，那么会默认将原生event参数传递进去

                如果需要同时传入某个参数，都需要event，可通过$event传入事件

        v-on的修饰符：

                .stop:调用event.stopPropagation()

                .prevent调用event.preventDefault()

                .native监听组件根元素的原生事件

                .once只触发一次回调

条件判断：

        v-if:

        v-if v-else:在data中定义一个数据为true，在标签1中v-if这个数据名，另一个标签中写v-else 

        v-if v-else v-else-if：这三个指令与javaScript的条件语句if、else、else if 类似

        v-if的原理：后面条件为false时，对应的元素以及子元素不会渲染，也根本不会对应的标签出现在DOM中

v-show和v-if的区别：

        决定一个元素是否渲染

        v-if当条件为false时，不会有对应的元素在DOM中

        v-show当条件weifalse时，仅仅是将元素的display属性设置为none

        在开发中：

                当需要在显示与隐藏之间切换时，使用v-show

                当只有一次时，使用v-if

循环遍历：

           v-for遍历数组：当有一组数据需要进行渲染时，就可以使用v-for来完成

           v-for遍历对象：在data中定义一个对象，然后再标签中v-for就可以以列表的形式显示出来

组件的key属性：

             key的作用就是为了高效的更新虚拟DOM

检测数组更新的响应方法：

                检测数组更新：因为vue是响应式的，所以数据发生改变，vue会自动检测数据变化，视图会发生相对应的更新

                vue包含了一组观察数组编译方法:

                        push()

                        pop()

                        shift()

                        unshift()

                        splice()

                        sort()

                        reverse()

v-mdel:

        vue中使用v-model指令来实现表单元素和数据的双向绑定

        v-model的原理：

                v-bind绑定一个value属性

                v-on指令给当前元素绑定input事件

        v-model结合checkbox：

                复选框分为：单个勾选框和多个勾选框

                单个勾选框：

                                v-model即为布尔值

                                此时input的value并不影响v-model的值

                多个复选框：

                                当是多个复选框时，因可以选中多个，所以对应的data中属性是一个数组

                                当选中某一个时，就会将input的value添加到数组中

        v-model结合select：

                和checkbox一样，select也分为单选和多选两种情况

                单选：只能选中一个值

                        v-model绑定的是一个值

                        当我们选中option中的一个时，会将它对应的value赋值到mySelect中

                多选：可以选中多个值

                        v-model绑定的是一个数组

                        当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

                v-model的修饰符：

                       lazy修饰符：

                                默认情况下，v-model默认是在input事件中同步输入框的数据，一旦数据发生改变对应的data中的数据就会自动发生改变，lazy修饰符可以让数据在失去焦点或者回车时才会更新

                        number修饰符：

                                默认情况下：在输入框中无论我们输入的是字母还是数字，都会被当作字符串类型进行处理，如果我们希望处理的是数字类型，那么最好的直接见内容当作数字处理，number修饰符可以让输入框中的内容自动转换成数字类型

                        trim修饰符：

                                如果输入的内容首尾有很多空格，可以使用trim修饰符可以过滤内容左右两边的空格

组件化开发：

        vue组件化思想：

                组件化是vue.js中的重要思想，他提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用，任何的应用都会被抽象成一颗组件树

        注册组件：

                组件的使用三步骤：

                        创建组件构造器

                        注册组件

                        使用组件

        全局组件和局部组件：

                当我们通过调用vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意vue实例下使用

        父组件和子组件：

                组件和组件之间存在层级关系

                而其中一种非常重要的关系就是父子组件的关系

组件不可以访问vue实例数据，有自己的数据保存地方：

           组件是一个单独功能模块的封装：

                 这个模板有属于自己的html模板，也应该有属于自己的数据data

          组件数据的存放：

                组件对象有个data属性，data属性必须是个函数，而且这个函数返回一个对象，对象内部保存着数据

        为什么组件的data是一个函数：

                如果不是一个函数，vue直接会报错，原因是vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用时会相互影响