<!-- 多层for循环 -->
<ul>
  <li v-for="(ite,key) in list2">
    {{key}}-------{{ite.case}}
    <ul>
      <ol v-for="(vo,key) in ite.list">{{key}}------------{{vo.title}}</ol>
    </ul>
  </li>
</ul>

<!-- 图片链接输出 -->
<img :src="img" alt="">

<!-- style 控制 -->

<div class="box" v-bind:style="{width:boxWeight+'px',height:boxHeight+'px'}"></div>

<!-- 双向数据绑定 MVVM vue就是一个mNNM 的框架 -->
<!-- M model -->
<!-- v view -->
<!-- MVVM : model改变会影响view view视图改变会反过来影响 -->
<p>{{msg}}</p>
<input type="text" v-model="msg">

<!-- 事件绑定 -->

<!-- ref 获取document节点 -->
  <input type="text" ref="userinfo" />
<!-- 执行js方法两种方式 v-on:click @click -->
  <button v-on:click="getInputValue()" >获取ref=userinfo input数据</button>
  <div ref="boxBtn">box</div>
  <button @click="boxChange()">点击改变boxBtn style 属性</button>
<hr/>
  <ul>
    <li v-for="itema in adlist">{{itema}}</li>
  </ul>
  <button @click="addlist1()">点击按钮给list添加数据</button>
  <!--  js操作 -->

  this.adlist.push(给数组添加数据)
  this.adlist.splice(key,1)  从key开始移除, 移除1个

<hr/>
<!-- 方法传值 -->
<button @click="delfun('1111111122222')">给方法传值</button>
<hr/>
<!-- 事件对象 -->
<button @click="eventFn($event)" data-init="testData">事件对象</button>

vue.js 笔记的更多相关文章

  1. vue.js笔记总结

    一份不错的vue.js基础笔记!!!! 第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且 ...

  2. 珠峰2016,第9期 vue.js 笔记部份

    在珠峰参加培训好年了,笔记原是记在本子上,现在也经不需要看了,搬家不想带上书和本了,所以把笔记整理下,存在博客中,也顺便复习一下 安装vue.js 因为方便打包和环境依赖,所以建意npm  init  ...

  3. vue.js笔记

    一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> &l ...

  4. Vue.js笔记 — vue-router路由懒加载

    用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下 ...

  5. Vue.js 笔记之 img src

    固定路径(原始html) index.html如下,其中,引号""里面就是图片的路径地址 ```<img src="./assets/1.png"> ...

  6. vue.js笔记1.0

    事件: 事件冒泡行为: 1.@click="show($event)" show:function (ev) { ev.cancelBubble=true; } 2.@click. ...

  7. node npm vue.js 笔记

    cnpm 下载包的速度更快一些. 地址:http://npm.taobao.org/ 安装cnpm: npm install -g cnpm --registry=https://registry.n ...

  8. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  9. 【vue.js权威指南】读书笔记(第一章)

    最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...

随机推荐

  1. jsoncpp 源码编译与简单使用

    ******************************************************标准C++实现jsoncpp 源码使用编译(VC2012 MFC)(Qt5.2 Widget ...

  2. android发送udp,tcp消息

    发送方创建步骤: 1.  创建一个DatagramSocket对象 DatagramSocket socket = new  DatagramSocket (4567); 2.  创建一个 InetA ...

  3. 获取项目配置的常用方法(Struts/Servlet)

    struts: //web.xml中: <context-param> <param-name>paramName</param-name> <param-v ...

  4. 为什么Redis可以方便地实现分布式锁

    1.Redis为单进程单线程模式,采用队列模式将并发访问变成串行访问,且多客户端对Redis的连接并不存在竞争关系. 2.Redis的SETNX命令可以方便的实现分布式锁. setNX(SET if  ...

  5. Oracle12c ASMM和hugepage

    在Oracle 12c,测试发现默认并不启用AMM 特性,而是使用了ASMM.因为在X86 架构下的linux 平台中,配置hugepage时,也是需要关闭AMM,使用ASMM特性. AMM分配内存的 ...

  6. Map类集合遍历

  7. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_3_字节输出流_OutputStream类&FileOutputStream

    都在IO包下 所有字节输出最顶层的父类 它是一个抽象类.abstract修饰的 一般这种类定义的都是所有字节流都可以使用公共的方法,

  8. unittest自动化测试举例:自动读取ymal用例&调用接口并生成报告

    用unittest框架写的接口自动化实现过程: 1.编写ymal格式用例: 2.导入ddt模块,该模块的主要功能是帮你读取ymal用例文件,自动获取内容并循环调用函数,具体见代码. 3.导入Beaut ...

  9. SQLServer中的top、MySql中的limit、Oracle中的rownum

    (1)在SQL Server中,我们使用 select top N * from tablename来查询tablename表中前N条记录. (2)在MySQL中,我们使用select * from ...

  10. linux环境,centos7,安装docker

    https://www.jianshu.com/p/2dae7b13ce2f 1.安装依赖包 yum install -y yum-utils device-mapper-persistent-dat ...