公司如何申请一个网站网址,视频剪辑培训班一般学费多少,重庆网站建设重庆网站建设公司网站建设,制作网页超链接怎么弄一、背景#xff1a; 我们对于基础语法#xff0c;说白了就是实现元素赋值#xff0c;循环#xff0c;判断#xff0c;以及事件响应即可#xff01;
二、v-bind 我们已经成功创建了第一个 Vue 应用#xff01;看起来这跟渲染一个字符串模板非常类似#xff0c;但是 V…一、背景 我们对于基础语法说白了就是实现元素赋值循环判断以及事件响应即可
二、v-bind 我们已经成功创建了第一个 Vue 应用看起来这跟渲染一个字符串模板非常类似但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联所有东西都是响应式的。我们在控制台操作对象属性界面可以实时更新 我们还可以使用 v-bind 来绑定元素特性。
div idapp!--如果要将模型数据绑定在 html 属性中则使用 v-bind 指令,此时 title 中显示的是模型数据--h1 v-bind:titlemessage鼠标悬停几秒钟查看此处动态绑定的提示信息/h1!-- v-bind 指令的简写形式 冒号: --h1 :titlemessage我是标题/h1
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.js
/script
scriptnew Vue({el: #app,data: {message: 页面加载于 new Date().toLocaleString()}})
/script 你看到的 v-bind 特性被称为指令。指令带有前缀 v- 以表示它们是 Vue 提供的特殊特性。 除了使用插值表达式 {{}} 进行数据渲染也可以使用 v-bind 指令它的简写的形式就是一个冒号: 三、v-if 系列 什么是条件判断语句就不需要我说明了吧▽以下两个属性
v-ifv-else-ifv-else 测试观察在控制台输入 vm.type false 的变化
bodydiv idapp2span v-iftypeTRUE/spanspan v-elseNO/span/divscript srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.js/scriptscriptvar vm2 new Vue({el: #app2,data: {type: true}})/script
/body 测试观察在控制台输入 vm.type B、C、D 的变化。
bodydiv idapp!-- 三个等号在 JS 中表示绝对等于就是数据与类型都要相等--h1 v-iftype AA/h1h1 v-else-iftype BB/h1h1 v-else-iftype CC/h1h1 v-elsewho/h1/divscript srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.js/scriptscriptvar vm new Vue({el: #app,data: {type: A}})/script
/body
四、v-for 语法格式如下
div idvueli v-foritem in items{{ item.message }}/li
/div 需要注意的是items 是数组item 是数组元素迭代的别名。Thymeleaf 模板引擎的语法和这个十分的相似 在控制台输入 vm.items.push({code:789,message: C}) 尝试追加一条数据你会发现浏览器中显示的内容会增加一条内容。
bodydiv idappli v-foritem in items{{item.message}}/li/divdiv idapp2li v-for(item,index) in items我的序号是{{index}},信息是:{{item.message}}/li/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.min.js/scriptscriptvar vm new Vue({el: #app,data: {items:[{code:123,message:A},{code:456,message:B},]}})var vm2 new Vue({el: #app2,data: {items:[{code:123,message:A},{code:456,message:B},]}})/script
/body
五、v-on v-on 标签的作用是监听事件它包括 Vue 中的事件和前端页面本身的一些事件我们这里 click 是 vue 的事件还可以绑定到 Vue 中的 methods 中的方法事件。
bodydiv idapp!--在这里我们使用了 v-on 绑定了 click 事件并指定了名为 sayHi 的方法--button v-on:clicksayHi点我/button!-- v-on 指令的简写形式 --button clicksayHi点我/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.js/scriptscriptvar vm new Vue({el: #app,data: {message: Hello World},// 方法必须定义在 Vue 实例的 methods 对象中methods: {sayHi: function (event) {// this 在方法里指向当前 Vue 实例alert(this.message);}}});/script
/body
六、v-model v-model 是双向数据绑定标签Vue.js 是一个 MVVM 框架即数据双向绑定即当数据发生变化的时候视图也就发生变化当视图发生变化的时候数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。 值得注意的是我们所说的数据双向绑定一定是对于 UI 控件来说的非 UI 控件不会涉及到数据双向绑定。对于我们处理表单Vue.js 的双向数据绑定用起来就特别舒服了。 你可以用 v-model 指令在表单 input、 textarea 及 select 元元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据并对一些极端场景进行一些特殊处理。
6.1 文本框
bodydiv idapp!-- v-bind:value只能进行单向的数据渲染 --input typetext v-bind:valuesearchMap.keyWord!-- v-model 可以进行双向的数据绑定 --input typetext v-modelsearchMap.keyWordp您要查询的是{{searchMap.keyWord}}/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.js/scriptscriptnew Vue({el: #app,data: {searchMap:{keyWord: xiehongfa}}})/script
/body
6.2 单复选框
bodydiv idapp单复选框input typecheckbox idcheckbox v-modelcheckednbsp;nbsp;label forcheckbox{{ checked }}/label/divscript srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.js/scriptscriptnew Vue({el: #app,data: {checked: false}})/script
/body
6.3 多复选框
bodydiv idapp4 input typecheckbox value打篮球 v-modelinterest打篮球input typecheckbox value踢足球 v-modelinterest打篮球input typecheckbox value唱 v-modelinterest唱input typecheckbox value跳 v-modelinterest跳/br你的兴趣爱好为{{interest}}/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.min.js/scriptscriptvar vm4 new Vue({el: #app4,data: {interest:[唱]}})/script
/body
6.4 单选按钮
bodydiv idapp3input typeradio value男 v-modelname男input typeradio value女 v-modelname女你的选择为{{name}}/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.min.js/scriptscriptvar vm3 new Vue({el: #app3,data: {name:}});/script
/body
6.5 下拉框
bodydiv idapp5span爱好/spanselect v-modelinterestoption value disabled请选择/optionoption打篮球/optionoption踢足球/optionoption乒乓球/option/select你的兴趣爱好为{{interest}}/divscript srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.js/scriptscriptvar vm5 new Vue({el: #app5,data: {interest:}})/script
/body 注意如果 v-model 表达式的初始值未能匹配任何选项 select 元素将被渲染为 “未选中” 状态。在 iOS 中这会使用户无法选择第一个选项。因为这样的情况下iOS 不会触发 change 事件。因此更推荐像上面这样提供一个值为空的禁用选项。
