Vue基础知识总结

 el:挂载点

Vue实例的作用范围是什么？

         vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器？

         可以使用其他的选择器，但是建议使用ID选择器

是否可以设置其他的dom元素？

         可以使用其他的双标签，不能使用HTML和body

data:数据对象

• Vue中方用到的数据定义在data中

• data中可以写复杂类型的数据

• 渲染复杂类型数据时，需遵守JS的语法

• 方法中通过this关键字获取data中的数据

Vue指令

1.内容绑定、事件绑定：v-text、v-html、v-on基础

         v-text:设置标签的文本值，默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容，v-text指令无论内容是什么，只会解析为文本。

         v-html:设置标签的innerHTML,内容中有html结构会被解析为标签。

         v-on:为元素绑定事件,事件可以不需要写on,指令可以简写成@。

<div id="app-9">
        <input type="button" value="v-on指令" v-on:click="doIt" />
        <input type="button" value="v-on简写" @click="doIt" />
        <input type="button" value="双击事件" @dblclick="doIt" />
</div>
<div class="input-num" id="dome-1">
        <button @click="sub">-</button>
        <span>{{num}}</span>
        <button @click="add">+</button>
</div>

    

<script type="text/javascript">
       var app9 = new Vue({
            el:"#app-9",
            methods: {
                doIt: function () {
                    alert("Hello Vue!");
                }
            } 
        });  
       var dome1 = new Vue({
            el: "#dome-1",
            data: {num:0},
            methods: {
                add: function () { this.num++;},
                sub: function () { this.num--;}
            }
        });
 </script>

 

 2.显示切换、属性绑定：v-show、v-if、v-bind

         v-show:根据表达值的真假，切换元素的显示和隐藏，原理是修改元素的display，实现显示隐藏，指令后边的内容最终会解析为布尔值。

         v-if:根据表达式的真假，切换元素的显示和隐藏，本质是通过操纵dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，为false，从树中移除。

         v-bind:设置元素的属性（例如：src,title,class）完整写法（v-bind：属性名）可以简写为（：属性名），需要动态的增删class建议使用对象的方式。

<div id="dome2">
        <a href="javascript:void(0)" v-show="index!=0" @click="last">上一张</a>
        <a href="javascript:void(0)" v-show="index<imgSrc.length-1" @click="next">下一张</a>    
        <br />
        <img :src="imgSrc[index]" />
</div>

 var dome2 = new Vue({
            el: "#dome2",
            data: {
                imgSrc: [
                    "http://img20.360buyimg.com/pop/s590x470_jfs/t1/151900/7/6514/92306/5fb63370E1541c636/ec9dbe87db12c6c6.jpg.webp",
                    "http://img14.360buyimg.com/da/s590x470_jfs/t1/151326/15/7146/99415/5fb41776E42bd36a4/bc958531a75aafc7.jpg.webp",
                    "http://img10.360buyimg.com/da/s590x470_jfs/t1/152030/34/4204/66183/5f9d54eeEc58ff240/151232d6834675e1.jpg.webp",
                    "http://img13.360buyimg.com/pop/s590x470_jfs/t1/149049/7/14683/69082/5fb479ebE3f79abb4/ea8edcfb5682d4c0.jpg.webp"
                ],
                index:0
            },
            methods: {
                last: function () { this.index--; },
                next: function () { this.index++; }
            }
        });

 

3.列表循环表、单元素绑定：v-for、v-on、v-model

         v-for:根据数据生成列表结构，数组经常和v-if结合使用；语法（item,index）in 数据；

                   item和index可以结合其他指令一起使用；数组长度的更新会同步到页面上，是响应式的。

         v-on:事件绑定的方法写成函数调用的形式，可以传入自定义参数，定义方法时需要定义形参来接受传入的实参；

                  事件的后面跟上 .修饰符 可以对事件进行限制，.enter可以限制触发的按键为回车。

         v-model:获取和设置表单元素的值（双向数据绑定），绑定的数据会和表单元素值相关联，绑定的数据<-->表单元素的值