zoukankan      html  css  js  c++  java
  • Vue 初学

    Vue 的基本代码:

         概念简介:Vue.js 是目前最火的一个前端框架,只关注视图层,主要负责MVC中的V这一层

        MVC 是后端的分层开发概念;

        MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM (ViewModel

         MVVM 数据双向绑定,前后端分离开发模式,去中心化

    ——model (数据)

    ——view (html页面)

    ——viewmodel    数据(model)与视图 (view) 的绑定

     1. v-cloak 与 v-text  的 区别

     

     v-cloak 起到占位符的作用不会将整个元素的内容清空

     v-text 会覆盖元素中原本的内容

                    2. v-html 与 v-text  的 区别

     

     

     v-html会展示标签效果

     3. v-bind 与v-on 的区别于联系

     

     

     4. 事件的修饰符

           1. @click.stop

     

      2. @click.prevent

     3. @click.capture 实现捕获触发机制

     4. @click.self

                   5. @click.prevent.once

                   

     注意:只会阻止一次

    6. .stop 与.self的 区别

     只触发了btn 而 div1 div2 没有触发

    7. self 只会阻止自己的冒泡行为的触发

     8. v-mode 双向绑定

                    执行效果:

                   

    只要v-mode 属性绑定的参数带有users.就可以将事件绑定

      select 标签中的v-model (1)

     

     页面效果

     select 标签中的v-model (2)

     将multiple 去掉

    执行效果:

     3. computed 的使用:

                   

            执行结果:

     

     4. v-bind 绑定可以改变事件原有属性

    方式1:

    先定义一个css样式:

                   

     

     执行效果:

     注意: v-bind 可以有简写 

          原:<div v-bind:class="myClass"></div>
    简写:<div :class="myClass"></div>

    方式二:
               <div :class="{one:a1,two:a2}"></div>

                  

     方式三:

            <div :class="{one:a1,two:!a1}"></div>

     方式四:

     计算器的小练习  利用v-model

     执行的效果:

     9. Vue中的样式

     

     

     10. vue 中的样式,这样使用

           
    
    

     11. vue for 循环 普通数组

           
    
    

              vue for 循环对象数组

           
    
    

     vue for 循环对象

           
    
    

     vue for 迭代数字

           
    
    

     vue-for 循环中key属性的使用

           
    
    

    12. v-if  和v-show 的使用

                   

     小结:

    <!-- 1. MVC 和 MVVM 的区别 -->
    
    <!-- 2. 学习了Vue中最基本代码的结构 -->
    
    <!-- 3. 插值表达式   v-cloak   v-text   v-html   v-bind(缩写是 :)   v-on(缩写是 @)   v-model   v-for   v-if     v-show -->
    
    <!-- 4. 事件修饰符  :  .stop   .prevent   .capture   .self     .once -->
    
    <!-- 5. el  指定要控制的区域    data 是个对象,指定了控制的区域内要用到的数据    methods 虽然带个s后缀,但是是个对象,这里可以自定义了方法 -->
    
    <!-- 6. 在 VM 实例中,如果要访问 data 上的数据,或者要访问 methods 中的方法, 必须带 this -->
    
    <!-- 7. 在 v-for 要会使用 key 属性 (只接受 string / number) -->
    
    <!-- 8. v-model 只能应用于表单元素 -->
    
    <!-- 9. 在vue中绑定样式两种方式  v-bind:class   v-bind:style -->

    13. 过滤器的基本使用

     

     14. 生命周期函数演示

     15. vue-resource 的基本使用

            vue-resource是一个非常轻量的用于处理HTTP请求的插件,它提供了两种方式来处理HTTP请求:

                   (1)使用Vue.http或this.$http

                   ( 2)使用Vue.resourcethis.$resource

               这两种方式本质上没有什么区别,阅读vue-resource的源码,你可以发现第2种方式是基于第1种方式实现的。

     重点:

     // 注意:在 VM实例中,如果想要获取 data 上的数据,或者 想要调用 methods 中的 方法,必须通过 this.数据属性名  或  this.方法名 来进行访问,这里的this,就表示 我们 new 出来的  VM 实例对象
     

     例子2:动态切换美元符号

     

     







     

  • 相关阅读:
    linux软件相关基操--基于Debian
    Spring AOP实现接口调用异常时重试
    Kafka
    zookeeper集群
    zookeeper客户端之curator
    zk权限模块
    zookeeper简介及基操
    CustomTool
    SpringBoot+Mybatis配置多数据源,分包方式
    mysql操作相关错误解决办法
  • 原文地址:https://www.cnblogs.com/zhulina-917/p/11728582.html
Copyright © 2011-2022 走看看