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="{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>

 

转载于:https://www.cnblogs.com/jasonLiu2018/p/11067397.html