vue学习
关注
分享
扫一扫
usrname为username
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
webpack.config.js与package.json文件的配置
此处是本地的webpack，因为全局跟局部的webpack可能版本不同。但是实际开发中 不使用webpack，使用run bulid。此处webpack指令是快速打包，就不需要写那一串路径。优先使用本地webpack，本地没找到才去全局。将入口出口放在配置文件里面，无需每次写入口出口。webpack是开发时依赖，打包后就无用了。但是终端中都是全局的webpack指令。licence指的是开源，一般不写。dirname是node自带的。上为开发时依赖，后为运行时依赖。这才是局部的webpack。原创 2023-03-01 20:39:13 · 608 阅读 · 0 评论 -
webpack的基本使用过程
如果改变了函数或者输出内容，需要重新打包，直接输入指令无需删除原来的bundle文件。webpack会自动处理模块间的依赖，打包生成一个js文件。在main.js中可以模块化处理。原创 2023-02-28 17:25:10 · 127 阅读 · 0 评论 -
具名插槽的使用
对于导航那种组件，一般都使用具名插槽，对于写好的组件，左中右依次替换原创 2022-12-01 16:53:00 · 187 阅读 · 0 评论 -
slot插槽基本使用
app内生成四个cpn标签。原创 2022-12-01 16:28:52 · 160 阅读 · 0 评论 -
组件通信-子传父（自定义事件
【代码】10-组件通信-子传父（自定义事件。原创 2022-11-30 01:29:28 · 158 阅读 · 0 评论 -
父传子-props中的驼峰标识
当全文template与prog及v-bind都是-的写法时，报错，显示NaN。childMyMessage改为child-my-message。cInfo改为c-info。原创 2022-11-30 00:38:23 · 257 阅读 · 0 评论 -
组件通信-父组件向子组件传递数据
去掉v-bind传入的message，当使用子组件内cmessage未传入初始值。不加v-bind，会把后面的字符串输出，直接cmovies="movies"加v-bind，会把后面的字符串当成变量，去父组件查找值。类型是对象/数组时，默认值必须为函数。列表展示数组每项内容。原创 2022-11-29 21:56:54 · 896 阅读 · 0 评论 -
组件中的数据存放问题与data为什么是函数
三个cpn实例非同一个data，因为data是函数，所以避免了counter值互相影响。如果想要数据同时被影响，也就是data是对象类型。因为计数器原理简单，直接写不用函数也可以。组件里面不能访问vue实例的数据。，不像vue示例里面一样是对象类型。原创 2022-11-27 23:01:15 · 268 阅读 · 0 评论 -
组件模板的分离写法
【代码】组件模板的分离写法。原创 2022-11-27 21:24:59 · 145 阅读 · 0 评论 -
注册组件的语法糖
const cpnC2=Vue.extend({这个写法目前非常少见，普遍是语法糖写法。原创 2022-11-27 21:14:33 · 215 阅读 · 0 评论 -
父组件与子组件的区别
同时注册多个局部组件。原创 2022-11-27 20:36:10 · 257 阅读 · 0 评论 -
全局组件与局部组件
如下面代码，只有四个cpn渲染出来了。原创 2022-11-27 20:12:39 · 195 阅读 · 0 评论 -
01-组件化的基本使用
需求：获得如下效果。原创 2022-11-26 23:48:13 · 108 阅读 · 0 评论 -
vue学习笔记汇总（持续更新）
v-bind动态绑定style（对象）？v-bind动态绑定class数组语法？计算属性与methods的对比？原创 2022-11-26 22:21:02 · 585 阅读 · 0 评论 -
v-model的修饰符
当添加number修饰符时，即使age最初是string类型，一旦改变输入框内容，age变为number类型。即使age一开始赋值是数字类型，但是一旦更改输入框内容，age自动变为string类型。此外，当然可以不使用trim修饰符，使用trim函数处理获得的文本。number修饰符可以改变强制转换为string类型的情况。当输入文本两端有大量空格时，我们可以使用trim修饰符去掉。，输入框的值才动态绑定，以此减少过度频繁的绑定。输入框失去光标跳动，即。原创 2022-11-26 20:38:19 · 1325 阅读 · 0 评论 -
input中的值绑定
使用v-for遍历，大大减少代码量，且灵活可以改变。每一个value都要手动去写，并且是固定的值。原创 2022-11-26 20:14:38 · 1968 阅读 · 0 评论 -
v-model结合select类型使用
select同样分为单选与多选。原创 2022-11-25 21:46:24 · 307 阅读 · 0 评论 -
v-model结合checkbox类型
单选框对应布尔值，多选框对应数组。原创 2022-11-25 21:33:06 · 231 阅读 · 0 评论 -
v-model结合radio类型使用
添加v-model，使sex值随着点击的单选框而变化。如果sex值写作男，单选框默认选中男。同一对的for与id内容需要相等。从而改变二者可以同时选择的情况。，此时的name可以省略。原创 2022-11-25 21:15:25 · 262 阅读 · 0 评论 -
v-model的基本使用与原理
为了实现双向绑定，我们使用v-on的input事件，每次input都调用valueChange函数。valueChange函数参数是input事件发生时，浏览器自动生成的event。改变文本框内内容时，后面的文本不随之改变，因为此时message没有改变。上述内容的更简便写法，不使用函数，直接在v-on中书写具体操作。当删除输入框内文本时，输入框后文字也随之改变。至此，已通过v-bind与v-on实现双向绑定。改变message值，输入框内文字随之改变。原创 2022-11-24 00:53:53 · 803 阅读 · 0 评论 -
购物车案例的实现
最终效果： 用于计算最终价格，对此计算使用计算属性最佳原理是遍历books中的每一个属性，价格*数量2.过滤器使每个出现数字的地方自动加上小数点，以及￥一旦设置完毕，使用非常方便 按钮动态绑定disabled属性，当数量为1时不可再减少，此时禁用减号按钮4.v-if/v-else当所有书都被移除时，显示购物车为空即只有书的种类不为空（length>=1）时渲染元素当为空是显示购物车为空5.v-on 当点击按钮时，书的数量变化当点击移除时，去掉书的这一行原创 2022-11-23 22:40:12 · 459 阅读 · 0 评论 -
第一个作业：遍历列表，默认第一个元素显示为红色，其他的元素点击后变红
【代码】第一个作业：遍历列表，第一个元素显示为红色，其他的元素点击后变红。原创 2022-11-23 01:29:58 · 300 阅读 · 0 评论 -
一些响应式的数组方法
虽然数值成功改变了但是页面中并没有立刻改变元素值。此外增加一个vue自带的set操作。并非所有改变数组的操作都是响应式的。...代表可变参数，参数值不定。但是实际上数组元素已经改变。原创 2022-11-22 00:13:29 · 140 阅读 · 0 评论 -
v-for循环遍历数组与对象
v-for不是必须写在ul/li中的，下面只是为了演示方便。原创 2022-11-21 23:31:22 · 959 阅读 · 0 评论 -
v-show与v-if的区别
v-show的标题增加了display：none样式。当修改为true时，v-if所在标签重新创建。，只有v-show所在的标签，当true时都正常渲染。原创 2022-11-21 23:01:59 · 120 阅读 · 0 评论 -
登陆切换：将账号登陆切换为邮箱登录
反之，如果想要输入内容保存下来，可以不写key值或者key值相等。当切换登陆类型时，上次输入的内容没有清空，而是保存了下来。原创 2022-11-21 16:04:10 · 293 阅读 · 0 评论 -
v-if与v-else与v-else-if的使用
一些时候如果条件满足就渲染元素了，条件不满足时候如果想显示另一些东西，此时可以用v-else实现。一些时候，我们可能想要在特定情况下，经过判断决定是否要渲染元素。使用类似于js，if+elf+elf+else。的，一般不在标签进行，更多使用。上述代码不渲染，无显示内容。此时我们可以利用v-if。原创 2022-11-21 15:07:56 · 495 阅读 · 0 评论 -
v-on的修饰符
希望达到只有点击“点击这里”时，divClick才执行，而不是点击按钮时执行。达到此效果需要阻止按钮的事件冒泡。不希望代码点击提交按钮后自动提交，希望自己手动提交。添加prevent修饰，此时只有打印没有提交。希望只有第一次点按钮有反应，之后无反应。添加修饰符stop 后再次点击按钮。监听所有按钮，准确说是手抬起的次数。点击按钮，事件冒泡，两个都发生。原创 2022-11-10 18:15:42 · 431 阅读 · 0 评论 -
v-on的基本使用与参数问题
按钮4}event显示defined，abc显示event如果直接写作按钮4原创 2022-11-10 17:35:07 · 294 阅读 · 0 评论 -
计算属性的setter与getter
2.给set方法添加参数值newValue，改变fullname时，自动输出----与新的名字。1.当更改fullname时，控制台自动输出------计算属性一般没有set方法，只有get方法。绝大多数情况下set都不写。3.将输入的名字保存起来。原创 2022-11-03 15:35:28 · 211 阅读 · 0 评论 -
计算属性的复杂操作
使用计算属性，for循环计算书的总价。原创 2022-10-27 17:53:33 · 123 阅读 · 0 评论 -
计算属性的基本使用
如果使用计算属性，命名使用和使用上都可以把其当成属性。如果想要显示全名，有三种写法。原创 2022-10-27 17:38:19 · 141 阅读 · 0 评论 -
v-bind动态绑定style（数组）
【代码】v-bind动态绑定style（数组）原创 2022-10-27 17:00:16 · 232 阅读 · 0 评论 -
01-HelloVueJs
快速小结：将vue.js配置到了js的文件夹内，并能正常使用后，开始了第一个vue小程序：输出helloworld源代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"><原创 2022-10-21 10:17:43 · 633 阅读 · 1 评论 -
02-Vue列表的展示（v-for）
内容小结：如果直接输出数组，输出会与定义一样，带有［］为了输出列表，需要ul与li标签因为数组有多个元素，为了遍历元素，引入了vue-for<li v-for="item in movies">{{item}}</li>源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&原创 2022-10-21 10:32:22 · 644 阅读 · 0 评论 -
03-Vue案例-计数器
内容小结：实现按+-按钮，数字同步变化引入了v-on针对click与@click来帮助count实现数字变化直接在v-on内实现加减<button v-on:click="counter++">+</button>-->借助定义方法在v-on内直接引入方法<button v-on:click="add">+</button>methods:{//新的属性，用于定义方法 add:function()原创 2022-10-21 10:57:59 · 719 阅读 · 2 评论 -
Mustache及储存模板
webstorm存模板2.mustache暂时不知道为什么，但是不能这么写<divid="app">{{message>}}</div><divid="app">{{message>}}</div>这样写只会有第一个响应数据是响应式的mustache也就是双大括号数据是响应式的一些mustache的灵活写法（重要<!DOCTYPE html><html原创 2022-10-24 19:23:31 · 159 阅读 · 1 评论 -
v-once与v-html与v-text与v-pre与v-cloak
1.v-once只会在第一次展示数据，如果想继续改变，不会跟着改变，不太常用2.v-html3.v-text如果添加文本，不会显示，只会显示v-text的，一般不用，用mustache更多4.v-pre比如单纯就是想显示{{message}}不希望被解析5.v-cloak因为设置了时间，如果不加v-cloak会看到没有渲染的{{message}}如果加了v-cloak直到渲染完毕才会原创 2022-10-25 00:00:08 · 253 阅读 · 0 评论 -
v-bind的基本使用
绑定到属性里面，而非文本动态决定属性比如图片的src属性不可以这样把mustache写在属性内mustache必须写在内容里面，不能写在属性里面什么效果都没有同样无效使用v-bind动态替换图片地址imgUrl有无引号效果一样<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2022-10-25 00:02:48 · 145 阅读 · 0 评论 -
v-bind动态绑定class对象语法
固定会有的class写成title那个模式如果可能要删除的写成后面的v-bind形式 <h2 class="title" :class="{active:isActive,line:isLine}">{{message}}</h2><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title原创 2022-10-25 00:03:31 · 183 阅读 · 0 评论