zoukankan      html  css  js  c++  java
  • vue2.x学习笔记

    1.使用模板template的时候必须要有跟节点,可以支持表达式,但不支持正则,想使用正则就用过滤器。

    2.数据在显示的时候所带的HTML DOM直接显示,不会渲染,要渲染DOM,得用v-html。

     3.使用v-model写单选和多选的时候,多选的数据关键字要用数组。

     4.加了multiple="multiple"的select标签,关键字自动变成数组.

    5.v-model修饰符number用来限定用户只能输入数字,如果输入的不是数字的部分不会加入data数据,但是如果一开始数据本身就是字符串类型的话,这个限定无效。

    6.使用v-bind:class的时候,多个用数组,多个并控制是否显示,用大括号{}

    7.v-bind:style操作示例

    8. v-else必须紧跟在v-if dom元素后,否则无效,v-show数据为false时,直接在dom上加display:none

    9.v-for的三种使用方式,数组遍历,对象遍历,数字遍历

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <script src="js/vue.js"></script>
    </head>
    <body>
     <div id="box">
       <ul>
         <li v-for="item in newslist"><a href="###">{{item.title}}</a></li>
         <div v-for="(key,value) in items">
             {{key}}-{{value}}
         </div>
       </ul>
       <ul>
         <li v-for="n in 10">
          {{n}}
       </li>
      </ul>
     </div>
     <script>
       var vm=new Vue({
         el:"#box",
         data:{
          newslist:[
             {title:"标题数据1",time:"2019-.05-03"},
             {title:"标题数据1",time:"2019-.05-03"},
             {title:"标题数据1",time:"2019-.05-03"},
             {title:"标题数据1",time:"2019-.05-03"},
             {title:"标题数据1",time:"2019-.05-03"},
             {title:"标题数据1",time:"2019-.05-03"},
             {title:"标题数据1",time:"2019-.05-03"}
           ],
           items:{
             name:"张三",
             sex:"男",
             age:18,
             classname:"社会大学"
           }
         }
       });
     </script>
    </body>
    </html>
    

      

     10.自定义指令示例

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <script src="js/vue.js"></script>
    </head>
    <body>
     <div id="box1">
      <p v-color="mycolor">这个p标签里面的文字,通过自定义指令来改变颜色</p>
     </div>
     <script type="text/javascript">
      Vue.directive("color",function(myelement,obj){
       var colorvalue=obj.value;
        myelement.style.color=colorvalue;
      });
      var vm=new Vue({
        el:"#box1",
        data:{
          mycolor:"blue"
        }
      });
     </script>
    </body>
    </html>
  • 相关阅读:
    fopen & fcolse & fseek & ftell & fstat 文件操作函数测试
    python基础练习题30道
    2636652995 揭秘骗子qq
    python的异常处理try/except 万能处理exception
    类的装饰器的基本原理
    描述符的应用
    描述符
    组合的方式完成授权
    继承的方式完成包装__attr__
    类的内置方法__attr__介绍
  • 原文地址:https://www.cnblogs.com/Xanthus/p/10800024.html
Copyright © 2011-2022 走看看