vue
豆沙沙包?
2LC
展开
-
vue-cli在控制台创建vue项目时 出现乱码
打开cmd,在控制台输入CHCP 65001,按回车键即可将编码格式设成utf-8,再创建就不会乱码了。原创 2021-08-03 20:31:23 · 719 阅读 · 0 评论 -
vue如何创建新的项目
一:安装node环境1.node -vnpm -v检查是否安装成功:如果输出版本号,说明我们安装node环境成功二.搭建vue的环境2.全局安装vuenpm install --global vue-cli或者cnpm install -g vue-cli原创 2021-08-03 18:18:58 · 90 阅读 · 0 评论 -
vue菜鸟学习日记12---小型记事本
1.有新增,删除,统计,清空,隐藏的功能2.新增(1)生成列表结构**(v-for 字符串数组)**(2)获取用户输入**(v-model)**(3)回车,新增数据**(v-on .enter 添加数据)**可以通过审查元素快速定位3....原创 2021-07-28 11:43:36 · 92 阅读 · 0 评论 -
vue菜鸟学习日记11---v-model
1.v-model:获取和设置表单元素的值(双向数据绑定)(1)绑定的数据会和表单元素值相关联(2)修改绑定的数据就是修改表单元素的值2.demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp原创 2021-07-27 19:03:27 · 152 阅读 · 0 评论 -
vue菜鸟学习日记10---v-on
1.v-on传递自定义参数,事件修饰符(1)事件绑定的方法写成函数调用的形式(2)定义方法时需定义形参来接收传入的实参(3)事件后跟上 .修饰符可以对事件进行限制(4).enter可以限制触发的按键为回车(5)事件修饰符可以有多种2.demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati原创 2021-07-27 18:48:36 · 97 阅读 · 0 评论 -
vue菜鸟学习日记9---v-for
v-for:根据数据生成列表结构数组经常和v-for结合使用语法是(item,index)in 数据item和index可以结合其它指令一起使用demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name.原创 2021-07-27 18:17:19 · 164 阅读 · 0 评论 -
vue菜鸟学习日记8---图片切换
1.列表数据用数组存2.v-bind设置元素的属性,比如src3.v-show和v-if都可以切换元素的显示状态,频繁切换用v-show4.demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view原创 2021-07-27 17:34:35 · 133 阅读 · 0 评论 -
vue菜鸟学习日记7---v-bind
1.v-bind指令的作用是:为元素绑定属性2.完整写法是v-bind:属性名3.简写:可以直接省略v-bind,只保留:属性名4.需要动态的增删class建议使用对象的方式5.demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-07-27 16:29:23 · 160 阅读 · 0 评论 -
菜鸟学习日记vue6-------v-if
(1)根据表达式的真假,切换元素的显示和隐藏(操纵dom元素)(2)频繁切换用v-show,反之用v-if。(v-show的消耗比较小)(3)v-if: 表达式为true,元素存在dom树中;表达式为false从dom树中移除。2.demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib...原创 2021-07-26 14:44:09 · 248 阅读 · 0 评论 -
菜鸟学习日记vue5-v-show
(1)v-show指令作用是:根据真假切换元素的显示状态(2)原理是修改元素的display,实现隐藏(3)指令后面的内容,最终会解析为布尔值(4)值为true显示,值为false 元素隐藏(5)数据改变,元素状态会同步更新2.demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib...原创 2021-07-26 14:29:08 · 114 阅读 · 0 评论 -
菜鸟学习日记vue4-计数器
(1)data 中定义数据比如:num(2)methods添加两个方法:如 递增或者递减(3)v-text将num值设置给span标签(4)v-on将 add和sub 分别绑定+,-按钮(5)累加逻辑小于10累加,超出显示alert框(6)递减的逻辑:大于0则可以递减,否则显示alert框2.demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2021-07-26 13:46:46 · 84 阅读 · 0 评论 -
学习日记vue3---v-on指令
(1)v-on指令的作用:为元素绑定事件,事件名不用写on,指令可简写为@(2)绑定的方法写在methods属性中(3)方法内部可以通过this的关键字可以访问定义在data中的数据2.语法<div id="app"><input type="button" value="事件绑定" V-on:click="doIt"><input type="button" value="事件绑定" v-on:monseenter="doIt"><input ...原创 2021-07-26 13:07:50 · 1107 阅读 · 1 评论 -
学习日记vue2---v-html/v-content
1.v-text:无论内容是什么,只会解析成文本2.v-html:设置元素的innerhtml,假如内容中有html结构会被解析成标签3.demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo原创 2021-07-26 12:04:09 · 415 阅读 · 0 评论 -
学习日记-vue1----v-text
1.v-text指令作用:设置标签的内容,默认替换会替换全部内容,2.使用差值表达式 {{}} 会替换部分内容3.例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="原创 2021-07-26 11:48:05 · 81 阅读 · 0 评论