Vue笔记整理——第一天

1.为什么学习Vue？

　　提高开发效率。

　　提高效率历程：原生js——>jq(解决兼容性)——>前端模板引擎——>Vue.js(减少DOM操作，注重数据业务逻辑)。

2.框架与库的区别？

　　框架：是一个完整解决方案，一旦选择使用，中途再想改只能重构；

　　库：用于实现小功能，随时可切换其他库。

3.MVC和MVVM？

　　MVC:MVC即Model、View、Controller即模型、视图、控制器；

　　MVVM:属于前端视图层的分层开发思想，把页面分成M(model:保存每个页面单独的数据),V（view:每个页面html结构）,VM（是M与V的调度者，提供数据的双向绑定）。

4.怎么使用Vue?

　　第一步：引入vue.js文件

　　第二步：构造一个Vue的实例对象

　　

 第一步：
<script src="vue-2.4.0.js"></script>
第二步：
<script>
    var vm=new Vue({
        el:'#app',
        data:{

        }

    });
</script>

　　

5.Vue指令

　　（1）v-cloak——解决插值表达式闪烁问题（由于请求vue.js需要一定时间，可能直接将未渲染数据的内容显示出来）

　　（2）v-text——直接v-text=" "使用

　　v-cloak与v-text的区别：v-text没有闪烁问题；但是会覆盖原本的内容

　　（3）v-html——能解析html标签（也会覆盖原本内容）

　　（4）v-bind——用于绑定属性（v-bind:属性=“ ”或缩写:属性=“ ”）

　　　　可使用v-bind绑定属性来设置样式

　　　　　　1.1绑定class属性：v-bind:class="['类名']"

　　　　　　1.2绑定style设置内联样式：v-bind:style="{'color':'red'}"

　　（5）v-on——用于事件绑定：v-on:click="函数名"或缩写@click="函数名"

　　（6）v-model——唯一一个实现双向绑定的指令（只能用于表单元素：input  select  checkbox  textarea）

　　（7）v-for——用于遍历

　　　　1.1遍历数组：v-for="item in 数组名"，v-for="(item,i) in 数组名"，其中item为每项的值,i为索引

　　　　1.2遍历对象：v-for=“(val,key) in 对象名” ，v-for=“(val,key，i) in 对象名”，其中val为值,key为键，i为索引

　　　　1.3遍历对象数组

　　　　1.4遍历数字：v-for="count in 数值名"，数字的迭代是从1开始的

　　（8）v-if与v-show区别

　　　　v-if：每次都会重新删除或者创建元素，较高切换性能消耗

　　　　v-show：不会对dom进行删除或创建操作，而是切换display:none,有较高渲染消耗

6.事件修饰符

　　（1）stop——阻止冒泡

　　（2）prevent——阻止浏览器默认行为（如超链接跳转）

　　（3）capture——加事件侦听器时使用事件捕获

　　（4）self——只有点击自身时才触发

　　（5）once——只能触发一次

　　*stop与self的区别：stop直接阻止冒泡的发生，self是保证自身不被点击时不触发，但依然会向外继续冒泡。