摘要：
vue学习12 v-model指令 v-model指令的作用是便捷的设置和获取表单元素的值 绑定的数据会和表单元素值相关联 绑定的数据<——>表单元素的值 代码练习： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me 阅读全文
摘要：
vue学习11 v-on补充 时间绑定的方法写成函数调用的形式，可以传入自定义参数 定义方法是需要定义形参来接收传入的实参 事件的后面跟上.修饰符可以对事件进行限制，.enter可以限制触发的按键为回车键，另外事件修饰符有很多种 代码练习： <!DOCTYPE html> <html lang="e 阅读全文
摘要：
vue学习10 v-for指令 v-for指令的作用是：根据数据生成列表结构 数组经常和v-for结合使用，语法是(item,index) in 数据 数组长度的更新会同步到页面上，是响应式更新 练习代码： <!DOCTYPE html> <html lang="en"> <head> <meta 阅读全文
摘要：
vue学习09 图片切换 定义图片数组:imgList:[]，列表数据使用数组保存 添加图片索引:index 绑定src属性:使用v-bind，v-bind指令可以设置元素属性，比如src 图片切换逻辑:按下按钮++ 切换显示状态：使用v-show，v-show和v-if都可以切换元素的显示状态，频 阅读全文
摘要：
vue学习08 v-bind指令 v-bind指令的作用是为元素绑定属性 完整写法是v-bind:属性名，可简写为:属性名 练习代码为： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo 阅读全文
摘要：
vue学习07 v-if指令 v-if 指令的作用是：根据表达式的真假切换元素的状态。 本质是通过操作dom元素来切换显示状态。 表达式的值为true,元素存在于dom中，为false,从dom树中移除。 练习代码为： <!DOCTYPE html> <html lang="en"> <head> 阅读全文
摘要：
vue学习06 v-show指令 v-show指令是：根据真假切换元素的显示状态 原理是修改元素的display,实现显示隐藏 指令后面的内容，最终都会解析为布尔值（true和false） 练习代码： <!DOCTYPE html> <html lang="en"> <head> <meta cha 阅读全文
摘要：
vue学习05 小小计数器 用前面学过的v-on指令来完成一个计数器的功能： 按加键数字加，按减键数字减，像添加商品数量一样加减 创建Vue示例时：需要创建el挂载点，data数据，methods方法。 v-on指令的作用是绑定事件，简写为@ 方法中通过this关键字来获取data中的数据 v-te 阅读全文
摘要：
vue学习04 v-on指令 v-on的作用是为元素绑定事件，比如click单击，dbclick双击 v-on指令可简写为@ 代码测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor 阅读全文
摘要：
vue学习03v-html v-html指令的作用是：设置元素的内部html链接 内容有html 的结构会被解析为标签 v-text指令无论内容是什么，只会解析文本 解析文本使用v-text，需要解析html结构使用v-html <!DOCTYPE html> <html lang="en"> <h 阅读全文
摘要：
vue学习02-v-text 引入环境版本，cdn网络引用或者本地js应用 html的结构，一般是div 创建vue实例 el:挂载点 v-text指令的作用是设置标签的内容 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容 <!DOCTYPE html> <html lang="en 阅读全文
摘要：
vue学习01 第一个vue程序 引入环境版本，cdn网络引用或者本地js应用 html的结构，一般是div 创建vue实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co 阅读全文