门户网站的建设方案,百度seo快速排名,哪些在线网站可以做系统进化树,制作网页免费①公众号#xff1a;王酱酱记②记录跟着文档学习Vue的一些关键点#xff0c;持续更新。感兴趣的小白建议关注一下③Vue当中有几个常见的指令#xff0c;看看是怎么用的#xff0c;强烈建议你自己在编辑器里打一遍#xff0c;你就更明白Vue为什么是数据驱动型的一款框架啦王酱酱记②记录跟着文档学习Vue的一些关键点持续更新。感兴趣的小白建议关注一下③Vue当中有几个常见的指令看看是怎么用的强烈建议你自己在编辑器里打一遍你就更明白Vue为什么是数据驱动型的一款框架啦关键词v-for、 v-on 、v-model实现需求循环数据、绑定事件、数据的双向绑定了解Vue.js 设计思想、Vue.js 的基础语法注意v-on:click 用 click代替一、实现通过 input 框向“正在进行”的列表中增加列表项内容使用v-for 帮助去循环多行数据//创建一个Vue实例加上对应的 el 和 data 数据
//在dom元素加上vue的一个指令 v-for 用于循环多列数据!DOCTYPE html
html langen
headmeta charsetUTF-8titleTodoList/titlescript src./vue.js/script
/head
bodydiv id appinput typetext /button提交/buttonulli v-foritem in list{{item}}/li/ul/div scriptvar app new Vue ({el: #app,data: {list: [第一课内容 , 第二课内容 , 33333]}})/script/body
/htmllist 需要循环数据item: 指的是循环过程中循环的每一项内容假设在list再任意假如一个字符串如33333 那么此时浏览器页面上也会相应出现列表内容为 33333 的效果二、实现在输入框输入内容提交后提交功能 出现 弹出框效果分析需求点击“提交”按钮需要用绑定事件实现使用v-on Vue 用于绑定事件的模板指令 如点击事件v-on:clickhandleBtnClick这里的 handleBtnClick 是一个函数一种方法对应地在 Vue 实例中也要相应地映射这种方法注意v-on:click 可以写成 clickbodydiv id appinput typetext /button v-on:clickhandleBtnClick提交/buttonulli v-foritem in list{{item}}/li/ul/div scriptvar app new Vue ({el: #app,data: {list: [第一课内容 , 第二课内容 , 33333]},methods: {handleBtnClick : function(){alert(click)}}})/script
/body只要点击 dom 元素中的 button 就会执行 handleBtnClick 这个方法。而 Vue 的实例接管了页面的 dom 元素执行 handleBtnClick 则会自动到这个实例中对应地找到这个方法。试一下点击页面上的 “提交” 会不会弹出含有 “click” 内容的弹窗三、实现输入内容在页面上展示输入的内容使用v-model 用于实现数据的双向绑定。它的值等于一个数据。bodydiv id appinput typetext v-modelinputValue/button v-on:clickhandleBtnClick提交/buttonulli v-foritem in list{{item}}/li/ul/div scriptvar app new Vue ({el: #app,data: {list: [],inputValue: },methods: {handleBtnClick : function(){alert(click)}}})/script
/bodydom 元素里用 v-model 绑定数据。当 dom 元素中的内容发生变化时Vue 实例中 data 数据中对应 v-model 的数据值也会相应地发生变化反之data 的对应数据值发生变化页面也会发生变化试一下控制台测试一下 v-model 双向的数据绑定效果吧如图12四、实现在点击“提交”后将input里的value值输出展示在页面中实现需求 “提交” 和 输入进去的内容 结合bodydiv id appinput typetext v-modelinputValue/button v-on:clickhandleBtnClick提交/buttonulli v-foritem in list{{item}}/li/ul/div scriptvar app new Vue ({el: #app,data: {list: [],inputValue: },methods: {handleBtnClick : function(){alert(this.inputValue) //实现输入提交的结合}}})/script
/body试一下输入框 空白时点击 “提交” 弹出空白内容框。输入内容时输入框页面数据变化实例 data 中 inputValue 也跟着变化数据的双向绑定点击 “提交” 弹出有内容框。五、实现每当在输入框中输入东西页面列表中也会增加相应的东西分析需求先分析列表增加的方式就是在 data 中的 list 操作每添加一个数据就会在页面出现一个列表然后实现输入框输入值使用 data 中的 inputValue 来代表每次输入框输入的值点击之后出结果bodydiv id appinput typetext v-modelinputValue/button v-on:clickhandleBtnClick提交/buttonulli v-foritem in list{{item}}/li/ul/div scriptvar app new Vue ({el: #app,data: {list: [],inputValue: },methods: {handleBtnClick : function(){this.list.push(this.inputValue) //实现列表输入点击 }}})/script
/body六、实现每次输入完都清空输入框内容分析需求让输入框的值 inputValue 为变成空字符串数据的双向绑定起作用。数据变了页面也就跟着变了bodydiv id appinput typetext v-modelinputValue/button v-on:clickhandleBtnClick提交/buttonulli v-foritem in list{{item}}/li/ul/div scriptvar app new Vue ({el: #app,data: {list: [],inputValue: },methods: {handleBtnClick : function(){this.list.push(this.inputValue), //实现列表输入点击this.inputValue //实现输入后框内变空}}})/script
/body所以知道了原生JS操作 Vue.js操作的区别了吗原生JS都是在操作domVue.js: 操作的都是数据
