vue.js基础概念

一、入门概念

    1.数据双向绑定

        input数据入口<=数据仓库=>view数据出口，数据发生改变时页面实时改变。

    2.vue中定义的指令叫做指令（directive），可以自定义

        ///v-model=""：用来指定当前的值的指向（可以直接填data里面的变量名）

        ///v-show=""：如果值存在则显示，不存在不现实此标签内容

        ///v-if=""：如果值不存在则从dom中删除

        ///迭代字符串：v-for="变量名 in 变量组名":用于迭代的指令，使用时为{{变量名}}，在data中用数组表示：变量组名:['a','b']

        ///迭代对象组成的数组：

            eg：foodlist:[{name:'name1',age:'18'}{name:'name2',age:'20'}]    ,访问时使用’自定义变量名.元素名‘即可

        ///在浏览器中的console控制台可以直接push进数据,eg:id名.变量组名.push({ 'name':'12' , 'age':'13' })

        ///v-bind:绑定数据和元素属性，eg：v-bind:属性名:'变量名'；或者： v-bind：属性名="{键（添加的类）：值（添加的条件，true，false等）}"

                v-bind可省略写为：【：class="变量名"】

        ///v-on：绑定事件。eg：v-on：事件名=“事件触发的方法”，方法在js中methods中定义；

                可以绑定多个事件{ 事件名=“事件触发的方法”，事件名=“事件触发的方法”}

                form表单提交时会默认整页刷新跳转至目标页面，设置不刷新解决办法：将事件传入方法中，再使用事件对象.preventDefault;或直接v-on：submit.prevent="func"

                    submit.stop="fun",停止冒泡事件；

                    keyup.enter="",回车事件，可以写成【@keyup.enter="fun"】   

        ///v-model，更安全的数据双向绑定，有其他属性可用：

                    v-model.lazy="" 【惰性更新】