- 博客(7)
- 收藏
- 关注
原创 第二个例子:图片切换
第二个例子:图片切换总结:列表数据使用数组保存v-bind可以设置元素属性。比如srcv-show和v-if都可以切换元素的显示状态。频繁使用用v-show效果:点下一张就显示下一张,点上一张就上一张。第一张的上一张隐藏,最后一张的最后一张隐藏思路:三个标签,左右两个都是a标签。中间的是images。其实就是操纵images的地址不断切换。还有两个标签的状态。定义图片数组、添加图片索引、v-bind(绑定src属性)、v-on(图片切换逻辑)、v-show(显示状态切换)实现:挂载
2021-04-30 10:43:44
75
原创 第一个例子:计数器的实现
第一个例子:计数器的实现玩法:中间显示数量,左右分别是减和加。点1下加就加1,点1下减就减1。点到0和10就提示不能再点了!用了3个元素:两个Button,中间1个Span。点击Button,Span数字变化。写el挂app。建立data,名字给num,默认1。然后用“{{}}”挂到span里面。添加方法,用methods。一个是add增加,一个是sub递减。用v-on的简写分别给两个Button挂点击事件。@click=“add”和@click=“sub”在add和sub用this.num
2021-04-29 16:18:19
290
原创 本地应用Vue指令
本地应用Vue指令内容绑定、事件绑定(数量加减)v-testv-htmlv-on基础显示切换、属性绑定(图片上一张下一张)v-showv-ifv-bind列表循环、表单元素绑定(记事本)v-forv- on补充v-modelv-test设置标签的文本值(textContent),默认的写法会替换全部内容,使用差值表达式{{}}可以替代指定内容v-html作用:设置标签的innerHTML。内容中有html结构会解析为标签。普通文本,跟v-test没任何差别的。如果内容是
2021-04-29 14:16:16
218
原创 第三节data数据对象
第三节data数据对象Vue中用到的数据定义在data中建立对象:在data里面,创建school{ name:“蜜獾”, mobile:“138035987421”}建立数组:在data里面,创建compus[“北京”,“上海”,“广州”]data中可以写复杂类型的数据渲染复杂类型数据时,遵守JS的语法即可对象用school.name和school. mobile,用两个{{}}渲染出来。对象用ul、li标签渲染。如果要竖着,就用索引。...
2021-04-29 10:47:10
328
原创 第二节el挂载点
第二节el挂载点Vue实例的作用范围是什么呢?{{ message }}在div的里面,不能再div的外面{{ message }}在div的里面的后代元素,都可以管理。是否可以使用其他选择器?可以的!如id就用#;class用“.”;div就用“div”。开发中一般使用id的。因为id是唯一的。类选择器跟标签选择器都可以用多个元素,会不清晰。是否可以设置其他的DOM元素?可以的!除了Html和Body之外的双标签。如p标签、H2标签、div等。建议使用div,因为div没什么额外的样
2021-04-28 15:42:41
151
原创 第一个VUE程序
第一个VUE程序记住三个步骤:导入开发版本的VUE.JS创建VUE实例对象,设置el属性和date属性使用简洁的模板语法把数据渲染到页面上代码:1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
2021-04-28 14:50:22
55
原创 第一篇:关于学习MarkDown语法
MarkDown学习:标题一个“#”然后空格是最大的。一共可以有6级“#”号字体Hello World!!! 两边各加两个“*”号,就是粗体。Hello World!!! 两边各加一个“*”号,就是斜体。Hello World!!! 两边各加三个“*”号,就是粗斜体。Hello World!!! 两边各加两个“~”号,就是删除线。引用用在引用别人的东西。方法:一个">"加空格在学习引用别人的东西分割线两种方法:三个“-”回车三个“*”回
2021-04-28 11:01:38
69
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人