vue中的数据单向绑定，判断，循环，函数

vue基本语法

- 1. 前言
- 2. 数据绑定v-bind
- 3. v-if || v-else-if || v-else 条件判断
- 4. v-for 循环
- 5. v-on 元素监听事件

1. 前言

vue语法，基本照着官网的来的，也有一些看了b站某kuang的视频，受了些启发。

<div id="app">// 取data 中show标签的值<label>{{ show }}</label>
</div>

new Vue({// 根据id获取对应的元素el: "#app1",data: {// 数据存放的地方，show为自定义标签show: "bitQian adorable.."}
})

2. 数据绑定v-bind

可以动态的给页面元素绑定数据，数据写在data自定义标签中。
页面元素使用v-bind语法绑定html的属性。

<!-- 给label标签设置标题 -->
<div id="app1"><label v-bind:title="show">hello vue.js</label>
</div>

new Vue({el: "#app1",data: {show: "bitQian adorable.."}
})

在生产中也可以在组件循环中绑定值，绑定a标签的href属性等等

3. v-if || v-else-if || v-else 条件判断

if-else

<div id="app"><span v-if="ok">ok</span><span v-else>bad</span>
</div>

new Vue({el: "#app",data: {ok: 1==1}
});

if else if else 组合，type的bool判断通过三个等号

<div id="app1"><span v-if="type==='A'">A</span><span v-else-if="type==='B'">B</span><span v-else>C</span>
</div>

new Vue({el: "#app1",data: {type: "A"}
});

4. v-for 循环

item是每一项，items对应data里面的items

<div id="app3"><span v-for="item in items">item: {{ item }}, id: {{ item.id }}, name: {{ item.name }} <br/></span>
</div>

let app3 = new Vue({el: "#app3",data: {// items表示一个数组，里面装了两个人items: [{"id": 1, "name": "jack"},{'id': 2, "name": "rose"}]}
});

5. v-on 元素监听事件

简单来说，就是给元素绑定js事件，如点击，鼠标悬浮，键盘触发事件等
这里以点击事件绑定展示，反转消息

<!-- v-on 绑定方法 -->
<div id="app3"><p>{{ message }}</p><!-- click为点击事件，也可根据场景换成其它事件 --><input type="button" v-on:click="reverseMessage" value="reverse">
</div>

new Vue({el: "#app3",data: {message: "hello world!"},methods: {reverseMessage: function () {// 当我点击按钮时，显示在p标签里面的hello world!反转this.message = this.message.split("").reverse().join("")}}
});