实操 vue全套教程( 二 ) _vue

2、v-for循环对象数组
<body><div id="app"><p v-for="(user,index) in list">{{user.id}}---{{user.name}}-----索引:{{index}}</p></div><script>var app = new Vue({el:"#app",data:{list:[{id:1,name:'beixi'},{id:2,name:'jzj'},{id:3,name:'贾志杰'}],}});</script></body>3、v-for循环对象
<body><div id="app"><p v-for="(val,key,index) in user">值：{{val}}---键：{{key}}-----索引:{{index}}</p></div><script>var app = new Vue({el:"#app",data:{user:{name:"beixi",age:"18",sex:"男"}}});</script></body> 4、v-for循环数字
<body><div id="app"><p v-for="count in 5">这是第{{count}}次循环</p></div><script>var app = new Vue({el:"#app",data:{ }});</script></body>三、Vue绑定事件语法：

v-on:事件名 = “方法名”
简写： @事件名 = “方法名”
事件名： click|keydown|keyup|mouseover|mouseout|自定义事件名

v-on事件监听，完整示例：

<!DOCTYPE html><html xmlns:v-on="http://www.w3.org/1999/xhtml"><head lang="en"><meta charset="UTF-8"><title>贝西说</title><!--1.引入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script></head><body><div id="app">{{count}}<button v-on:click="count+=1">点我加1</button><button v-on:click="sub">点我减1</button></div><script>var app = new Vue({el:"#app",data:{count:1 },methods:{sub:function(){this.count-=1;}}});</script></body></html>

注意：v-bind可以简写为： v-on: 可以简写@
四、Vue：表单双绑、组件1.什么是双向数据绑定Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。
2.在表单中使用双向数据绑定你可以用 v-model 指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JAVAScript 在组件的 data 选项中声明初始值!
示例1：

<body><div id="app"><input type="text"v-model="message"/>{{message}}</div><script>var app = new Vue({el:"#app",data:{message:'' }});</script></body>

完成效果：

文章插图

示例2：

<div id="app"><input type="radio" name="sex" value="男" v-model="gender"/>男<input type="radio" name="sex" value="女" v-model="gender"/>女<p>{{gender}}</p></div><script>var app = new Vue({el:"#app",data:{gender:'' }});</script>

示例3：

<body><div id="app"><select v-model="selected"><option value="">--请选择--</option><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option></select><p>{{selected}}</p></div><script>var app = new Vue({el:"#app",data:{selected:'' }});</script></body>

3.什么是组件组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。