自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(981)
  • 收藏
  • 关注

原创 有没有学习vue3的初学者一起互相交流前进,有疑问可以互相解答

weizh222222

2021-03-24 21:32:56 36

原创 vue2.6的可以

<!DOCTYPE html><html> <div id="app"> <select v-model="selectItem" @change="selectFn($event)"> <!--选择项的value值默认选择项文本 可动态绑定选择项的value值 更改v-model指令绑定数据--> <option v-for="item in items" :value=.

2021-11-11 12:56:34 12

原创 为什么会有bug?Uncaught TypeError: dataOptions.call is not a function

<!DOCTYPE html><html><div id="app"> <select v-model="selectItem" @change="selectFn($event)"> <!--选择项的value值默认选择项文本 可动态绑定选择项的value值 更改v-model指令绑定数据--> <option v-for="item in items" :value="item.id.

2021-11-11 12:54:12 40

原创 为什么会有bug?Uncaught TypeError: dataOptions.call is not a function

<!DOCTYPE html><html><div id="app"> <select v-model="selectItem" @change="selectFn($event)"> <!--选择项的value值默认选择项文本 可动态绑定选择项的value值 更改v-model指令绑定数据--> <option v-for="item in items" :value="item.id.

2021-11-11 12:53:10 13

原创 v-model与select中change的使用

你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。v-model 在内部为不同的输入元素使

2021-11-11 12:39:39 527

原创 正确的写法:组合框

<!DOCTYPE html><html> <div id="app"><my-input label="请选择了解信息的渠道" :list="['报纸', '网络', '朋友介绍']" v-model="selectedVal"> </my-input><span>选中的值是: {{ selectedVal }}</span></div><script src="ht

2021-11-10 11:46:02 822

原创 错误的写法

<!DOCTYPE html><html> <div id="app"><my-input></my-input></div><script src="https://unpkg.com/vue@next"></script><script>const app = Vue.createApp({ data() { return { options: [

2021-11-10 08:59:29 746

原创 原来是一个拼写错了

<!DOCTYPE html><html> <div id="app"><my-input v-model="message"></my-input></div><script src="https://unpkg.com/vue@next"></script><script>const app = Vue.createApp({ data() { return {

2021-11-08 13:19:15 7

原创 样式怎么没起作用。这个跟直接写的不是一样吗,为什么还要引出个组件?

<!DOCTYPE html><html> <div id = "app"><my-input v-model="message"></my-input></div><script src="https://unpkg.com/vue@next"></script><script>const app = Vue.createApp({ data() { return {

2021-11-08 13:12:22 5

原创 这样子弄的组件模式为什么出不来效果?

<!DOCTYPE html><html> <div id = "app"><post-list></post-list></div><script src="https://unpkg.com/vue@next"></script><script>const app = Vue.createApp({});app.component('postList'), {data() {

2021-11-08 12:53:41 6

原创 这样就可以了,那为什么还要弄成组件的模式来弄

<!DOCTYPE html><html> <div id = "app"> <input type="text" v-model="message"> <span>{{ message }}</span></div><script src="https://unpkg.com/vue@next"></script><script>const app = V

2021-11-08 12:47:07 146

原创 这个为什么不行?

<!DOCTYPE html><html> <div id = "app"> <input type="text" v-model="message"> <span>{{ message }}</span></div><script src="https://unpkg.com/vue@next"></script><script>const app = V

2021-11-08 12:45:31 140

原创 今天又看了一遍,监听子组件,子组件向父组件传递事件,用$emit,父组件监听,用vind-on

<!DOCTYPE html><html><div id="app"> <post-list></post-list></div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({});

2021-11-08 12:30:06 4

原创 子组件向父组件传值,监听greet事件,有没有另外一种写法?

<!DOCTYPE html><html><div id="app"> <child @greet="sayHello"></child></div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({

2021-11-04 12:14:36 5

原创 这个也看不出效果,也看不出属性被应用到input了还是div上啊?有什么区别?举的例子好迷惑

<!DOCTYPE html><html><div id="app"> <data-picker data-status="activated"></data-picker></div> <script src="https://unpkg.com/vue@next"></script> <script> const app =

2021-11-04 11:59:32 5

原创 为什么有这个bug:Uncaught TypeError: this.$parent.hello is not a function

为什么有这个bug<!DOCTYPE html><html><div id="app"> <child></child></div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({});

2021-11-04 09:01:37 7

原创 访问根实例。$root是占位符

<!DOCTYPE html><html><div id="app"> <parent></parent></div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ dat

2021-11-03 17:19:32 10

原创 这个监听属性的模板处,应该怎么写?

<!DOCTYPE html><html> <head> </head><div id="app"> <p></p></div> <script src="https://unpkg.com/vue@next"></script> <script> const app

2021-11-03 11:12:35 4

原创 什么时候template会出现?类似template: ‘<h3>{{ postTitle }}</h3>‘

template: '<h3>{{ postTitle }}</h3>'<!DOCTYPE html><html> <head> </head><div id="app"> <post-item :post-title="title"></post-item></div> <script src="https://

2021-11-03 10:04:38 10

原创 监听watch,千米转换为米

<!DOCTYPE html><html> <p>千米:<input v-model="qianmi"></p> <p>米:<input v-model="mi"></p> <script src="https://unpkg.com/vue@next"></script> <script>const app = Vue.c

2021-11-01 11:46:04 11

原创 单文件组件和html文件的区别,同一个题目任务

单文件组件:<script setup>import { reactive, watchEffect } from 'vue'//import { reactive,watchEffect } from 'vue'//import { reactive } from 'vue' //const { reactive, watchEffect } = Vue; const state = reactive({ count: 0 }) watchEffect(

2021-10-29 18:52:45 9

原创 reactive, watchEffect两个函数有关的单文件组件的例子

<script setup>import { reactive, watchEffect } from 'vue'//import { reactive,watchEffect } from 'vue'//import { reactive } from 'vue' //const { reactive, watchEffect } = Vue; const state = reactive({ count: 0 }) watchEffect(() =&gt

2021-10-29 18:26:50 10

原创 怎样在单文件组件中写count++的例子?

2021-10-29 18:16:50 5

原创 单文件组件的例子

<script setup>import { reactive } from 'vue'const state = reactive({ count: 0})</script><template> <div> count值: {{ state.count }} </div> </template>输出:count值:0

2021-10-29 18:15:20 12

原创 什么是单文件组件?

<script>export default { data() { return { greeting: 'Hello World!' } }}</script><template> <p class="greeting">{{ greeting }}</p></template><style>.greeting { color: red; font-weig

2021-10-29 17:10:50 14

原创 原来是因为const App写成app了

<!DOCTYPE html><html> <head> </head><div id="app"> <button @click="increment">count 值: {{ state.count }} </button></div> <script src="https://unpkg.com/vue@next"></sc

2021-10-29 11:23:35 13

原创 还是不知道在项目里怎么摆setup,单文件html里知道

错误的。<template> <div id="app"> <button type="button" @click="increment">count值:{{ state.count }}</button> </div></template><script>export default { name: 'HelloWorld', const App = { setup(){

2021-10-29 11:18:43 13

原创 这样为什么也不行?

<!DOCTYPE html><html> <head> </head><div id="app"> <button @click="increment">count 值: {{ state.count }} </button></div> <script src="https://unpkg.com/vue@next"></sc

2021-10-29 10:04:47 11

原创 这个在项目里,setup不知道怎么摆

<template> <div id="app"> <button type="button" @click="increment">count值:{{ state.count }}</button> </div></template><script>export default {//name: 'HelloWorld',app.component('HelloWorld'),{ prop

2021-10-29 09:53:16 14

原创 Uncaught RangeError: Maximum call stack size exceeded

Uncaught RangeError: Maximum call stack size exceeded at assignValue (utils.js?c532:276) at forEach (utils.js?c532:251) at merge (utils.js?c532:289) at assignValue (utils.js?c532:280) at forEach (utils.js?c532:251) at merge (utils.j

2021-10-28 11:35:11 23

原创 Uncaught RangeError: Maximum call stack size exceeded

Uncaught RangeError: Maximum call stack size exceeded at merge (utils.js?c532:274) at assignValue (utils.js?c532:280) at forEach (utils.js?c532:251) at merge (utils.js?c532:289) at assignValue (utils.js?c532:280) at forEach (utils.j

2021-10-28 09:35:17 12

原创 axios的安装:npm install axios vue-axios

lianxi01 % yarn add axios --saveyarn add v1.22.10warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsyn.

2021-10-28 09:17:54 30

原创 错误的BooksNew.vue

<template> <h3>新书上市</h3> <div> <p v-for="book in books" :key="book.id"> {{ book.title }}</p> </div></template><script>export default { data() { boo

2021-10-27 11:52:16 10

原创 试着写新书上市组件

看有什么困难第一步,写新书上市h3字成功,路由成功。新建了换一个BookNews.vue文件,而后又在App.vue里添加上了这个文件,上头要渲染处和下头组件引入处都添加了。

2021-10-27 11:24:35 9

原创 绑定html class,给v-bind:class传递一个对象,以动态地切换class

<template> <div id="app"> <div v-bind:class="{ active: isActive }">Java无难事</div> </div></template><script>export default { name: 'HelloWorld', data() { return { isActive: true } }

2021-10-27 11:19:50 7

原创 bug: Uncaught RangeError: Maximum call stack size exceeded

<template> <div id="app"> <hello-world class="baz"></hello-world> </div></template><script>export default { name: 'HelloWorld', template: ` <p :class="$attrs.class">Hi!</p>

2021-10-27 10:51:08 9

原创 v-for后面的key的用法,举两个例子

官网的说法:keyhttps://cn.vuejs.org/v2/api/#key一般的用法习惯:<ul> <li v-for="item in items" :key="item.id">...</li></ul> …v-for=“x in xs”:key=“x.id”

2021-10-27 10:38:33 17

原创 内联样式的数组语法,对页面边框和背景两个的约定

<template> <div id="app"> <div v-bind:style="[baseStyles, moreStyles]">《Java无难事》</div> </div></template><script>export default { name: 'HelloWorld', data() { return { baseStyles: {

2021-10-27 10:14:45 8

原创 什么叫内联样式,有什么功能?

style是它的标志吗?《java无难事》这个就是定义,绑定了一个样式,对象中,数据属性中定义了这个文字是红色,以及字的大小。与别的非内联样式有什么区别?<template> <div id="app"> <div v-bind:style="styleObject">《Java无难事》</div> </div></template><script>export default { name

2021-10-27 09:40:27 23

原创 在项目里实现单文件的功能,只需要改一下HelloWorld.vue的内容即可

HelloWorld.vue<template> <div id="app"> <div v-bind:style="styleObject">《Java无难事》</div> </div></template><script>export default { name: 'HelloWorld', data() { return { styleObject: {

2021-10-27 09:38:29 10

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除