初学vue（一）

---

1.ol、ul列表（有序、无序）

<ol> 标签定义有序列表
<ul> 标签定义无序列表
ul写得数组，ol写的对象，数组是序号，对象是key，value形式

代码如下（示例）：

<div id="app">
    <ul>
        <li v-for="(item,index) in  menus">
            <h4>id:{{item.id}} 地名: {{item.name}}</h4>
        </li>
    </ul>
    <ol>
        <li v-for="(value,key) in obj">
            <h2> {{key}} : {{value}} </h2>
        </li>
    </ol>
</div>

new Vue({
        el: "#app",
        data: {
            menus:[
                {id:1,name:"深圳"},
                {id:2,name:"成都"},
                {id:3,name:"北京"},
                {id:4,name:"新疆"}
            ],
            obj:{
                姓名:"路明非",
                年龄:20,
                配偶:"诺诺"
            }
        }

---

2.v-on:click、v-on:keyup.enter

v-on:click  等价于 @click

代码如下（示例）：

 <div id="app">
        点击输入框1:  <input v-on:click="getAlert"></br>
        点击输入框2:  <input @click="getAlert"></br>
 </div>

v-on:keyup.enter，键盘事件，输入框中输入enter时，会触发一个方法

此代码会触发弹框如下（示例）：

   <div id="app">
        敲击回车：<input v-on:keyup.enter="getAlert">
    </div>

     new Vue({
        el: "#app",
        data: {

        },
        methods: {
            getAlert(){
                alert("what！触发了弹框");
            }
        }
    });

---

3.v-bind:href 缩写

v-bind:href 一般用于html

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

---

4.img使用

	<div>
        <img :src="imgSrc">
    </div>
    
	 new Vue({
        el:"#app",
        data:{
            imgSrc:"./images/new.jpg"
        }
    });
	

总结

简单基础忘记回来翻一翻…同时也记录下学习轨迹。