zoukankan      html  css  js  c++  java
  • 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是保证自身不被点击时不触发,但依然会向外继续冒泡。

  • 相关阅读:
    Python 魔术方法及调用方式
    Python metaclasses
    Python 实例方法,类方法和静态方法
    Python 2.x和3.x不同点
    Python 类总结
    Python 添加模块
    Python-读入json文件并进行解析及json基本操作
    linux环境下的python安装过程
    Linux系统目录结构以及简单说明
    linux下python安装
  • 原文地址:https://www.cnblogs.com/renyuqianxing/p/10640238.html
Copyright © 2011-2022 走看看