
Vue.js
文章平均质量分 60
vue.js的一些常用
tanxinji
站在巨人的肩膀上
展开
-
IDEA运行Vue模块化npm
下载该插件,设置配置才有npm下完重启IDEA。原创 2023-03-21 23:33:50 · 1771 阅读 · 0 评论 -
解决Vue.component加载显示不出来,没有报错
后来发现,需要将Vue.component放在vue内,就可以显示了原创 2022-07-04 07:00:00 · 2178 阅读 · 0 评论 -
解决axios发送提交数组数据都变成了object而非数据
有的时候,想通过axios向后端传数组, 一开始是直接传: 后来发现,直接传不行,发送的数据变成了这样: 最后发现,需要将数组转换成json字符串之后,在提交给后端,就可以了! 将数组转换成json的代码: 这样就可以提交正确数据了!......原创 2022-06-15 07:00:00 · 3058 阅读 · 0 评论 -
Vue中的ref和$refs
Vue可以在标签中设置ref = "xxx"属性,在Vue中通过this.$refs.xxx来获取该标签的dom。类似于原生dom中的document.getElementsById("xxx"); 例如:html中:<div ref = "test">Vue中:this.$refs.test 代码示例:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <t原创 2022-03-23 07:00:00 · 887 阅读 · 0 评论 -
Vue中$nextTick的作用
Vue中的this.$nextTick的作用是产生一个回调函数,在下一轮dom更新后执行该回调函数。 用处: 当某操作需要等 数据被修改更新之后 再操作,则可以将操作放在this.$nextTick的回调函数中执行。因为并不是vue数据一旦修改就会立即更新。 示例: 在一个按钮的点击事件中修改vue中的数据message,我们用dom来获取修改之后的值。 可以认为是在执行一个dom更新周期后,在调用了this.$nextTick的回调函数<!DOCTYPE html><html原创 2022-03-20 11:31:51 · 3451 阅读 · 0 评论 -
Vue中v-if 和v-show的区别
v-if如果为false页面不渲染此标签,无此标签存在 v-show为false只是页面标签设置样式为display:none 代码示例: 将v-if和v-show都设为false,查看页面渲染情况<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></scri原创 2022-03-17 16:22:51 · 782 阅读 · 0 评论 -
Vue.js中的条件分支v-if
在Vue中的条件分支用到的分别为 v-if = "表达式" , v-else-if = "表达式" , v-else ;其中表达式都是boolean类型的,只有true / false;与java中的if , else if , else语句非常相似。 可以进行嵌套。嵌套如下 v-if , v-else-if, v-else-if , v-else 可以在if后面有多个v-else-if。子标签也可以如此。一、基本使用v-if = "表达式...原创 2022-01-11 20:04:26 · 5129 阅读 · 0 评论 -
Vue.js使用v-for循环生成动态标签
使用v-for可以用于动态生成html标签。其实就是对于vue中属性是对象或者数组进行遍历生成新的标签。 v-for就像java中的for循环一样,迭代需要的所有元素。 大多数情况是以一个数组嵌套多个对象的数据进行v-for循环一、当写入数据为数组时 如果循环遍历得到的value值是一个对象,需要使用里面的值可以用 对象名.key 来调用key对应的value值v-for写入数组的格式: arr...原创 2022-01-11 18:41:18 · 10092 阅读 · 1 评论 -
Vue.js使用v-on绑定事件
使用v-on:事件名= "语句"可以用来绑定标签事件。也可以缩写为@事件名="语句"。事件如:点击,双击,键盘按下等。当触发该事件后,就会调用语句执行。原创 2022-01-06 12:14:49 · 2539 阅读 · 0 评论 -
Vue.js中的v-model表单绑定
通过使用v-model = " 属性",可以便捷的洞悉表单中使用者选择数据的变化。作用于不同的标签会有不同的效果,都是用于捕捉用户输入的数据存放再Vue实例中。如input标签获取输入值,单选框获取单选值,复选框获取选择值。 1.作用于input标签。...原创 2022-01-02 10:16:18 · 2833 阅读 · 0 评论 -
Vue.js绑定class属性
绑定class属性的格式是 v-bind:class = "语句", 可以缩写为 :class ="语句" 。class属性是可以有多个的,在" "内可以有多种不同的情况。目录一、" "内是vue对象内存在的对象二、" " 内为 [ ] 数组三、 " "内为 { } json对象一、" "内是vue对象内存在的对象 :class = " 语句", 语句中传入的是vue建立的变量,计算属性,函数等的时候,就会把v...原创 2021-12-25 23:21:33 · 3362 阅读 · 0 评论 -
Vue.js绑定属性v-bind
将标签内的属性值绑定,使其在Vue对象内可以动态修改属性值。使用的就是v-blind:属性名 = "vue变量名" 来将属性绑定。可以缩写为:属性名 = "vue变量名"。如果只是纯文本的话就需要单引号括起来表示一个字符串而不是一个变量。 变量名可以有很多,如: href,src,name,class,style等等。 :属性名 = "vue变量名" 。 注意:" "里的变量需要是vue中存在的,vue的帮助下会自动替换为变量名所对应的值。 代码实...原创 2021-12-24 23:10:32 · 3868 阅读 · 1 评论 -
Vue.js的下载和调用
Vue支持双向绑定,非常不错。将视图层和模型层分离开。是基于MVVM模型,模型-视图-视图模型 。目录一、在官网下载vue.js文件二、声明Vue对象三、Vue修饰符 1. v-once。 使{{}}内的值不能被修改 2.v-pre 。{{}}将不会被Vue替换,直接会显示{{字段}}的文本 3.v-html = "字段名" 和 v-text = "字段名" 四、函数一、在官网下载vue.js文件...原创 2021-12-23 16:55:03 · 27753 阅读 · 5 评论