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. verilog学习五点经验分享

    1.规范很重要工作过的朋友肯定知道,公司里是很强调规范的,特别是对于大的设计(无论软件还是硬件),不按照规范走几乎是不可实现的.逻辑设计也是这样:如果不按规范做的话,过一个月后调试时发现有错,回头再看 ...

  2. C# 保护进程不被结束(源代码）防任务管理器结束进程

    C# 保护进程不被结束(源代码)防任务管理器结束进程 Posted on 2013-03-25 16:03 快乐家++ 阅读(3173) 评论(3) 编辑 收藏 闲来无事,英语又学的太痛苦.看到我妈妈 ...

  3. Vue项目开启步骤

    ## Build Setup # install cnpm //安装淘宝CNPM镜像npm install -g cnpm --registry=http://registry.npm.taobao. ...

  4. hihoCoder#1050(树中最长路)

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上回说到,小Ho得到了一棵二叉树玩具,这个玩具是由小球和木棍连接起来的,而在拆拼它的过程中,小Ho发现他不仅仅可以拼凑成一 ...

  5. 【转】rails 遇到 Could not find a JavaScript runtime execjs错误（ubuntu）

    当我运行 $rails s 遇到下面错误 sudo apt-get install python-software-properties sudo add-apt-repository ppa:chr ...

  6. spring--AOP--权限---demo1---bai

    AOP权限DEMO1: 实体类: package com.etc.entity; import org.aspectj.lang.annotation.Pointcut; public class U ...

  7. web基础 (四) JavaScript基础

    JavaScript 简史略过…… 一.Javascript结构   ECMAScript  ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标 ...

  8. php中的foreach改变数组的值的问题

    翻到PHP文档的foreach那页这样写道: “foreach 语法结构提供了遍历数组的简单方式.foreach 仅能够应用于数组和对象,如果尝试应用于其他数据类型的变量,或者未初始化的变量将发出错误 ...

  9. Solaris10镜像情况下如何修复boot archive

    在某些情况下(比如:异常宕机)solaris10的boot archive可能会损坏,导致solaris无法启动,此时需要手工修复boot archive. 本文通过模拟boot archive损坏, ...

  10. java常用八大排序法

    最近查资料发现java排序挺有意思的,其中包含常见八种具有代表性的排序法:笔者觉得排序的功能重要,但更重要的是排序的思想:所以简单叙述一下常见排序方法名称,并用代码举例. A.插入排序(直接插入排序. ...