Howardlam-CSDN博客

原创第二个例子：图片切换

第二个例子：图片切换总结：列表数据使用数组保存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

Howardlamlam的博客