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>

vue2.x学习笔记的更多相关文章

  1. vue2.0学习笔记之路由（二）路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue2.0学习笔记之路由（二）路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue2.0学习笔记一 ：各种表达式

    #,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性:     #,过滤器可以串联 {{ message | filterA | ...

  4. vue2.x学习笔记（二十二）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12633051.html. 自定义指令 简介 除了核心功能默认内置的指令([v-mode]和[v-show]等),v ...

  5. vue2.x学习笔记（十九）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12631022.html. 程序化的事件侦听器 在前面的学习中,我们已经知道了[$emit]全局属性的用法,它可以被 ...

  6. vue2.x学习笔记（十七）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12616847.html. 动态组件&异步组件 在前面学习组件基础的时候学习过动态组件,官方文档给出过一个例 ...

  7. vue2.x学习笔记（十六）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12616543.html. 组件中的插槽 在2.6.0的版本中,vue为具名插槽和作用域插槽引入了一个新的统一的语法 ...

  8. vue2.x学习笔记（十五）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12609450.html. 组件的自定义事件 这里来学习一下组件中的自定义事件. 事件名 不同于组件名和prop,事 ...

  9. vue2.x学习笔记（十二）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12592256.html. 组件基础 组件化是vue的一个重要特性,也是vue学习中非常重要的一个知识点. 基础示例 ...

  10. vue2.x学习笔记（十一）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12586416.html. 表单的输入绑定 表单的输入绑定是一块很重要的内容,因为所有的业务系统都离不开基础表单的录 ...

随机推荐

  1. http之206状态码

    206状态码, 大概就是浏览器先不下载要下载的文件,而是弹窗告诉用户,该文件是什么,有多大.由用户自行决定是否下载. 在html中,加一个a标签,a标签的地址是一个文件,就可实现该效果. 具体可参考下 ...

  2. bzoj 1977 [BeiJing2010组队]次小生成树 Tree

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1977 kruscal别忘了先按边权sort.自己觉得那部分处理得还挺好的.(联想到之前某题的 ...

  3. Poj 2387 Til the Cows Come Home(Dijkstra 最短路径)

    题目:从节点N到节点1的求最短路径. 分析:这道题陷阱比较多,首先是输入的数据,第一个是表示路径条数,第二个是表示节点数量,在 这里WA了四次.再有就是多重边,要取最小值.最后就是路径的长度的最大值不 ...

  4. uboot - *** Warning - bad CRC, using default environment

    出现这个现象的原因 环境变量存储区没有相应的数据,产生的原因可能是: 1.首次烧写uboot启动,,出现这个提示,执行saveenv 指令保存环境变量即可: 2.nor fash芯片的 基地址出错. ...

  5. 断路器（CircuitBreaker）设计模式

    断路器是电器时代的一个重要组成部分,后面总是有保险丝熔断或跳闸的断路器是安全的重要保障. 微服务最近几年成为软件架构的热门话题,其益处多多.但需要知道的是,一旦开始将单块系统进行分解,就上了分布式系统 ...

  6. postgresql 数据库，模式，表空间的关系

    数据库与模式模式(schema)是对数据库(database)逻辑分割在数据库创建的同时,就已经默认为数据库创建了一个模式--public,这也是该数据库的默认模式.所有为此数据库创建的对象(表.函数 ...

  7. Oracle Flushback 学习测试

    Oracle Flushback 学习测试:三思笔记 Flashback恢复 从9i开始,利用oracle查询的多版本一致的特点,实现从回滚段中读取一定时间内在表中操作的数据,被称为 flashbac ...

  8. python使用pyodbc连接sql server 2008

    一.PyODBC的下载地址: http://code.google.com/p/pyodbc/ 二.测试语句 import pyodbccnxn = pyodbc.connect(DRIVER='{S ...

  9. DAY17-认证系统

    COOKIE 与 SESSION 概念 cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. cookie ...

  10. DAY13-前端之JavaScript

    JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名ScriptEase(客 ...