关于Vue的学习—本地应用(三)

1.v-for指令

v-for：根据数据生产列表结构。
基础代码：

   <div id = "app"><ul><li v-for= "item in arr":title="item"  >{{index}}{{item}}</li><li v-for="(item,index) in objArr">{{item.name}}</li></ul></div>

   var app = new Vue({el:"#app",data:{arr:[1,2,3,4,5],objArr[{name :"jack"},{name :"rose"}]}})

整体案例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-for指令</title>
</head><body><div id = "app"><input type="button" value="添加数据" @click="add"><input type="button" value="删除数据" @click="remove"><ul><li v-for="(it,index) in arr">{{ index+1 }}校区:{{it}}</li><h2  v-for="item in vagetables" v-bind:title="item.name">{{ item.name }}</h2></ul></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{arr:["北京","上海","广州","深圳"],vagetables:[{name : "铅笔"},{name : "钢笔"}]},methods:{add : function(){this.vagetables.push({name:"毛笔"});},remove:function(){this.vagetables.shift();}}})</script></body>
</html>

运行结果：

总结：
①v-for指令的作用是:根据数据生产列表结构。
②数组经常和v-for结合使用。
③语法是（item，index）in 数据。
④item和index可以结合其他指令一起使用。
⑤数组长度的更新会同步到页面上，是响应式的。

2.v-on指令

v-on：自定义参数，事件修饰符等。
基础代码：

  <div id = "app"><input type="button" value="点击" @click="doIt(666,'老铁')"><input type="text" @keyup.enter="sayHi"></div>

var app = new Vue({el:"#app",methods:{doIt : function(p1,p2){console.log("做IT");console.log(p1);console.log(p2);},sayHi : function(){alert("ok");}}})

整体案例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-on指令</title>
</head><body><div id = "app"><input type="button" value="点击" @click="doIt(666,'老铁')"><input type="text" @keyup.enter="sayHi"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",methods:{doIt : function(p1,p2){console.log("做IT");console.log(p1);console.log(p2);},sayHi : function(){alert("ok");}}})</script></body>
</html>

运行结果：

总结：
①事件绑定的方法写成函数调用的形式，可以传入自定义参数。
②定义方法时需要定义形参来接收传入的实参。
③事件的后面跟上.修饰符，可以对事件进行限制。
④ . enter可以限制触发的按键为回车。
⑤事件修饰符有多种

3.v-model指令

v-model：获取和设置表单元素的值（数据双向绑定）。
基础代码：

<div id = "app"><input type="button" value="修改message" @click="setM"><input type="text" v-model="message" @keyup.enter="getM"><h2>{{message}}</h2></div>

 var app = new Vue({el:"#app",data:{message:"慕辰枫"},methods:{getM:function(){alert(this.message);},setM:function(){this.message="zhang";}},})

整体案例代码如下：


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-model指令</title>
</head><body><div id = "app"><input type="button" value="修改message" @click="setM"><input type="text" v-model="message" @keyup.enter="getM"><h2>{{message}}</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:"慕辰枫"},methods:{getM:function(){alert(this.message);},setM:function(){this.message="zhang";}},})</script></body>
</html>

运行结果：

总结：
①v-model指令的作用是便捷的设置和获取表单元素的值。
②绑定的数据会和表单元素的值相关联。

关于Vue的学习—本地应用(三)相关推荐

vue基础学习记录（三）
一.生命周期(钩子函数) 实例生命周期钩子 new Vue ({beforeCreate:function(){alert("组件实例化之前执行的函数");},created:fu ...
Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
2019独角兽企业重金招聘Python工程师标准>>> 2. Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <!DOCTYPE h ...
Vue.js学习笔记（三）：隐藏a标签鼠标悬浮状态下浏览器左下角出现的链接地址
前言当a标签悬浮时浏览器左下角会出现链接地址,为了隐藏链接地址,除了使用用点击事件代替以外,我们还可以一次性解决页面所有a标签悬浮出现链接的问题. mounted() {this.deleteMsg ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
Vue+Electron学习系列 (三) -- 自动更新
Vue+Electron学习系列 1️⃣Vue+Electron学习系列 (一) -- 初识 2️⃣ Vue+Electron学习系列 (二) -- 打包发布 3️⃣ Vu ...
Vue 新手学习笔记：vue-element-admin 之安装，配置及入门开发
所属专栏: Vue 开发学习进步说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些但没办法,接下来做微服务架构,前端就用 vue,这块你负责....说多了都是泪,脚手 ...

关于Vue的学习—本地应用(三)

1.v-for指令

2.v-on指令

3.v-model指令

关于Vue的学习—本地应用(三)相关推荐

最新文章

热门文章