vue.js 笔记

<!-- 多层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="{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>

原文地址:https://www.cnblogs.com/jasonLiu2018/p/11067397.html