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>
以上是 vue.js 笔记 的全部内容, 来源链接: utcz.com/z/379073.html