Vue.js 挑战集锦答案与解析（待续更新中...）

置顶 已于 2024-01-03 00:22:31 修改
阅读量1k 收藏 24
点赞数 24
文章标签： vue.js 前端 javascript
于 2024-01-02 22:30:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67319465/article/details/135351658
版权

试题链接：https://vuejs-challenges.netlify.app/

目录

热身

1 - 你好！

题目

修改以下代码，以使页面正确显示 Hello World。

<script setup>
import { ref } from "vue"
const msg = ref("Hello World")
</script>

<template>
  <div>
    <!-- 页面的期望输出是Hello World -->
    <h1>msg</h1>
  </div>
</template>

答案与解析

<script setup>
// 1. 引入响应式函数 ref
import { ref } from "vue"
// 2. 运用响应式函数 ref 声明响应式变量 msg，并赋初始值为字符串"Hello World"
const msg = ref("Hello World")
</script>

<template>
  <div>
    <!-- 3. 在模板中渲染响应式变量 msg -->
    <h1>{{msg}}</h1>
  </div>
</template>

简单

2 - ref 全家桶

题目

在这个挑战中，你将使用 响应式 API: ref 来完成它。 以下是你要实现的内容 👇:

<script setup lang="ts">
import { ref, Ref, reactive } from "vue"

const initial = ref(10)
const count = ref(0)

// 挑战 1: 更新 ref
function update(value) {
  // 实现...
}

/**
 * 挑战 2: 检查 count 是否为一个 ref 对象
 * 确保以下输出为1
*/
console.log(
  // impl ? 1 : 0
)

/**
 * 挑战 3: 如果参数是一个 ref，则返回内部值，否则返回参数本身
 * 确保以下输出为true
*/
function initialCount(value: number | Ref<number>) {
  // 确保以下输出为true
  console.log(value === 10)
}

initialCount(initial)

/**
 * 挑战 4:
 * 为源响应式对象上的某个 `property` 新创建一个 `ref`。
 * 然后,`ref` 可以被传递，它会保持对其源`property`的响应式连接。
 * 确保以下输出为true
*/
const state = reactive({
  foo: 1,
  bar: 2,
})
const fooRef = ref() // 修改这里的实现...

// 修改引用将更新原引用
fooRef.value++
console.log(state.foo === 2)

// 修改原引用也会更新`ref`
state.foo++
console.log(fooRef.value === 3)

</script>

<template>
  <div>
    <h1>msg</h1>
    <p>
      <span @click="update(count-1)">-</span>
      {{ count }}
      <span @click="update(count+1)">+</span>
    </p>
  </div>
</template>

答案与解析

<script setup lang="ts">
import { ref, type Ref, reactive, isRef, unref, toRef } from 'vue'

const initial = ref(10)
const count = ref(0)

// 挑战 1: 更新 ref
function update(value: number) {
  // 考察点一：count 是一个 ref 对象，因此可以为 .value 赋予新的值。
  count.value = value
}

/**
 * 挑战 2: 检查`count`是否为一个 ref 对象
 * 确保以下输出为1
 */

// 考察点二：应用 isRef 函数检查 count 是否为 ref 对象。
console.log(isRef(count) ? 1 : 0) // 1

/**
 * 挑战 3: 如果参数是一个 ref，则返回内部值，否则返回参数本身
 * 确保以下输出为true
 */
function initialCount(value: number | Ref<number>) {
  // 考察点三：应用 unRef 函数，检查 value 是否为 ref 对象。如果是，返回 .value 属性，否则返回参数本身。
  // 相当于 val = isRef(value)? value.value : value
  console.log(unref(value) === 10) // true
}

initialCount(initial)

/**
 * 挑战 4:
 * 为源响应式对象上的某个 `property` 新创建一个 `ref`。
 * 然后,`ref` 可以被传递，它会保持对其源`property`的响应式连接。
 * 确保以下输出为true
 */
const state = reactive({
  foo: 1,
  bar: 2
})
/**
 * 考察点四：
 * 1. toRef 函数可以创建一个 ref 对象，其内部值为源对象的某个属性。
 * 2. ref 可以被传递，它会保持对其源对象属性的响应式连接。
 * 3. 也就是说，修改 fooRef.value 的值，也会同步修改 state.foo 的值。
 * 4. 反之亦然，修改 state.foo 的值，也会同步修改 fooRef.value 的值。
 */
const fooRef = toRef(state, 'foo')

// 修改引用将更新原引用
fooRef.value++
console.log(state.foo === 2) // true

// 修改原引用也会更新`ref`
state.foo++
console.log(fooRef.value === 3) // true
</script>

<template>
  <div>
    <h1>msg</h1>
    <p>
      <span @click="update(count - 1)">-</span>
      {{ count }}
      <span @click="update(count + 1)">+</span>
    </p>
  </div>
</template>

知识点巩固

ref()
  • 接受一个内部值，返回一个响应式的、可更改的 ref 对象。
  • 此对象只有一个指向其内部值的属性 .value。
  • ref 对象是可更改的，因此可以为 .value 赋予新的值。
  • 它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。
  • 如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。
const count = ref(0)
console.log(count.value) // 0

count.value = 1
console.log(count.value) // 1
isRef()
  • 检查某个值是否为 ref。
unref()
  • 如果参数是 ref，则返回内部值，否则返回参数本身。
  • 这是 val = isRef(val) ? val.value : val 计算的一个语法糖。

3 - 响应式丢失

题目

在 JavaScript 中，我们经常解构/扩展对象。

在Vue.js中，我们同样解构/扩展“响应式”对象，但它会失去响应性。

如何保证解构/扩展不丢失响应性 ? 让我们开始吧 ！

<script setup lang="ts">
import { reactive } from "vue"

function useCount() {
  const state = reactive({
    count: 0,
  })

  function update(value: number) {
    state.count = value
  }

  return {
    state,
    update,
  }
}

// 确保解构不丢失响应性
const { state: { count }, update } = useCount()

</script>

<template>
  <div>
    <p>
      <span @click="update(count-1)">-</span>
      {{ count }}
      <span @click="update(count+1)">+</span>
    </p>
  </div>
</template>

答案与解析

<script setup lang="ts">
import { reactive, toRefs } from 'vue'

function useCount() {
  const state = reactive({
    count: 0
  })

  function update(value: number) {
    state.count = value
  }

  return {
    // 1.使用toRefs方法可以将一个对象转换为一系列响应式的属性组成的对象。
    state: toRefs(state),
    update
  }
}

const {
  // 2.解构赋值，得到的 count 是一个 ref 对象。
  state: { count },
  update
} = useCount()
</script>

<template>
  <div>
    <p>
      <span @click="update(count - 1)">-</span>
      {{ count }}
      <span @click="update(count + 1)">+</span>
    </p>
  </div>
</template>

知识点巩固

toRef()

  • 可以基于响应式对象上的一个属性，创建一个对应的 ref 。

  • 这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

const state = reactive({
	foo: 1,
	bar: 2
})

// 双向ref，会与源对象同步
const fooRef = toRef(state,'foo')

// 更改 fooRef 的值会更改源对象 state
fooRef.value++
console.log(state.foo)	// 2

// 更改源 state 对象属性值，fooRef的值也会更改。
state.foo++
console.log(fooRef.value)	// 3
toRefs()
  • 将一个响应式对象转换为一个普通对象，
  • 这个普通对象的每个属性都是指向源对象相应属性的 ref。
  • 其中每个单独的 ref 都是使用 toRef() 创建的。
const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)

// 解构赋值
const {foo,bar} = toRefs(state)

// 这个 ref 和源属性已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2
console.log(foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

foo.value++
console.log(state.foo)	//4

4 - 可写的计算属性

题目

在这个挑战中，你需要创建一个可写的计算属性 :

<script setup lang="ts">
import { ref, computed } from "vue"

const count = ref(1)
const plusOne = computed(() => count.value + 1)

/**
 * 确保 `plusOne` 可以被写入。
 * 最终我们得到的结果应该是 `plusOne` 等于 3 和 `count` 等于 2。
*/

plusOne.value++

</script>

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ plusOne }}</p>
  </div>
</template>

答案与解析

<script setup lang="ts">
import { ref, computed } from 'vue'

const count = ref(1)

// 1. 创建一个只读的计算属性 ref
const plusOne = computed(() => count.value + 1)
plusOne.value++  // 报错，因为 plusOne 是只读的，不能修改 plusOne.value 的值。

// 2. 创建一个可写的计算属性 ref
const plusOne = computed({
  get: () => count.value + 1,
  set: (value) => {
    count.value = value - 1
  }
})
plusOne.value++		// 不报错，因为 plusOne 是可写的。
console.log('plusOne', plusOne.value) // 3
console.log('count', count.value) // 2
</script>
...

知识点巩固

computed()

  • 默认接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。

  • 也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

5 - watch 全家桶

题目

在这个挑战中，你将使用 响应式 API: watch 来完成它。 以下是你要实现的内容 👇:

<script setup lang="ts">
import { ref, watch } from "vue"

const count = ref(0)

/**
 * 挑战 1: Watch 一次
 * 确保副作用函数只执行一次
*/
watch(count, () => {
  console.log("Only triggered once")
})

count.value = 1
setTimeout(() => count.value = 2)

/**
 * 挑战 2: Watch 对象
 * 确保副作用函数被正确触发
*/
const state = ref({
  count: 0,
})

watch(state, () => {
  console.log("The state.count updated")
})

state.value.count = 2

/**
 * 挑战 3: 副作用函数刷新时机
 * 确保正确访问到更新后的`eleRef`值
*/

const eleRef = ref()
const age = ref(2)
watch(age, () => {
  console.log(eleRef.value)
})
age.value = 18

</script>

<template>
  <div>
    <p>
      {{ count }}
    </p>
    <p ref="eleRef">
      {{ age }}
    </p>
  </div>
</template>

答案与解析

挑战一
const count = ref(0)

/**
 * 挑战 1: Watch 一次
 * 确保副作用函数只执行一次
 */

// 考察点1：watch函数返回一个停止观察的函数，可以用来停止对特定数据的监听。
const stop = watch(count, () => {
  console.log('Only triggered once')
  // 当不需要再监听时，调用停止观察的函数即可。
  stop()
})

count.value = 1
setTimeout(() => (count.value = 2))
挑战二
/**
 * 挑战 2: Watch 对象
 * 确保副作用函数被正确触发
 */

const state = ref({
  count: 0
})

// 考察点2：如果想让回调在深层级变更时也能触发，需要使用 { deep: true } 强制侦听器进入深层级模式。
watch(
  state,
  () => {
    console.log('The state.count updated')
  },
  { deep: true }
)

state.value.count = 2
挑战三
/**
 * 挑战 3: 副作用函数刷新时机
 * 确保正确访问到更新后的`eleRef`值
 */

const eleRef = ref()
const age = ref(2)
/**
 * 考察点3：当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调。
 * 默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。
 * 这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。
 * 如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 选项。
 */
watch(
  age,
  () => {
    console.log(eleRef.value)
  },
  { flush: 'post' }
)
age.value = 18

知识点巩固

watch()

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

  1. watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。

  2. 第一个参数是侦听器的源。这个来源可以是以下几种：

    • 一个 getter 函数，返回一个值
    const state = reactive({ count: 0 })
watch(
  () => state.count,	// 侦听一个 getter 函数
  (count, prevCount) => {
    /* ... */
  }
)
    • 一个 ref 对象。
    const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})
    • 一个 reactive 对象，侦听器默认启动深层模式。
    const state = reactive({ count: 0 })
watch(state, () => {
  /* 深层级变更状态所触发的回调 */
})
    • 由以上类型的值组成的数组
    watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

  3. 第二个参数是在数据源发生变化时要调用的回调函数。这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。

  4. 当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。

  5. 第三个参数（可选）是一个对象，支持以下这些选项：

    • immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
    • deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。参考深层侦听器。
    • flush：调整回调函数的刷新时机。参考回调的刷新时机及 watchEffect()。
    • onTrack / onTrigger：调试侦听器的依赖。参考调试侦听器。

6 - ShallowRef

题目

在这个挑战中，你将使用 响应式 API: shallowRef 来完成它。 以下是你要实现的内容 👇:

<script setup lang="ts">
import { shallowRef, watch } from "vue"

const state = shallowRef({ count: 1 })

// 回调没被触发
watch(state, () => {
  console.log("State.count Updated")
}, { deep: true })

/**
 * 修改以下代码使watch回调被触发
 *
*/
state.value.count = 2

</script>

<template>
  <div>
    <p>
      {{ state.count }}
    </p>
  </div>
</template>

答案与解析

<script setup lang="ts">
import { shallowRef, watch } from 'vue'

const state = shallowRef({ count: 1 })

// 回调没被触发
watch(
  state,
  () => {
    console.log('State.count Updated')
  },
  { deep: true }
)

/**
 * 修改以下代码使watch回调被触发
 */
/**
 * 考察点：shallowRef()
 * 1. shallowRef() 是 ref() 的浅层作用形式。
 * 2. shallowRef() 内部的值，不会被深层递归地转化为响应式。
 * 3. 只有.value 的访问是响应式的。
 * 4. 所以修改.value的值会触发更改，修改.value.count的值不会触发更改。
 */
// state.value.count = 2  // 不会触发更改
state.value = { count: 2 } // 会触发更改
</script>

<template>
  <div>
    <p>
      {{ state.count }}
    </p>
  </div>
</template>

知识点巩固

shallowRef()

  • ref()的浅层作用形式。

  • 和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。

  • shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。

const state = shallowRef({ count: 1 })

// 不会触发更改
state.value.count = 2

// 会触发更改
state.value = { count: 2 }

9 - 依赖注入

题目

在这个挑战中，你将使用 组合式 API: 依赖注入 来完成它。 以下是你要实现的内容 👇:

  • 父组件：App.vue
<script setup lang="ts">
import { ref, provide } from 'vue'
import Child from './Child.vue'
const count = ref(1)
provide('count', count)
setInterval(() => {
  count.value++
}, 1000)
</script>

<template>
  <Child />
</template>
  • 子组件：Child.vue
<script setup lang="ts">
// 添加代码,使`count`值注入子组件
</script>

<template>
  {{ count }}
</template>

答案与解析

  • 父组件：App.vue
<script setup lang="ts">
import { ref, provide } from 'vue'
import Child from './Child.vue'
const count = ref(1)
// 1. 在父组件中，运用 provide函数提供一个值，key 为 'count'，值为一个响应式变量 count
provide('count', count)
setInterval(() => {
  count.value++
}, 1000)
</script>

<template>
  <Child />
</template>
  • 子组件：Child.vue
<script setup lang="ts">
// 2. 在子组件中，运用 inject 函数注入父组件提供的响应式变量 count
import { inject } from 'vue'
const count = inject('count')
</script>

<template>
  {{ count }}
</template>

知识点巩固

provide()

  • 提供一个值，可以被后代组件注入。

  • provide() 接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。

  • 与注册生命周期钩子的 API 类似，provide() 必须在组件的 setup() 阶段同步调用。

inject()
  • 注入一个由祖先组件或整个应用全局 (通过 app.provide()) 提供的值。
  • 第一个参数是注入的 key。
  • Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。（就近原则）
  • 如果没有能通过 key 匹配到值，inject() 将返回 undefined，除非提供了一个默认值。
  • 第二个参数是可选的，即在没有匹配到 key 时使用的默认值。
  • 与注册生命周期钩子的 API 类似，inject() 必须在组件的 setup() 阶段同步调用。

305 - 大写

题目

请创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值首字母转为大写：

<script setup>
</script>

<template>
  <input type="text" v-model.capitalize="" />
</template>

答案与解析

<template>
  <input type="text" v-model.capitalize="myText" />
</template>
<script setup lang="ts">
// 引入 vModelText 函数
import { ref, vModelText } from 'vue'
const myText = ref('')
/** beforeUpdate 是 Vue 指令 vModelText 的生命周期函数。
 * 在每次 myText 更新前，它会执行以下操作：
 * 1. 检查 input 元素 el 中是否有值。
 * 2. 检查是否存在 capitalize 修饰符。
 * 3. 如果有值且有 capitalize 修饰符，则将值转换为首字母大写。
 */
vModelText.beforeUpdate = (el, binding) => {
  if (el.value && binding.modifiers.capitalize) {
    el.value = el.value.charAt(0).toUpperCase() + el.value.slice(1)
  }
}
</script>

知识点巩固

beforeUpdate 是 Vue 指令 vModelText 的生命周期函数。

在每次 myText 更新前，它会执行以下操作：

  1. 检查 input 元素 el 中是否有值。
  2. 检查是否存在 capitalize 修饰符。
  3. 如果有值且有 capitalize 修饰符，则将值转换为首字母大写。

323 - Prop 验证

题目

请验证Button组件的Prop类型 ，使它只接收: primary | ghost | dashed | link | text | default ，且默认值为default。

<script setup>
defineProps({
  type: {},
})
</script>

<template>
  <button>Button</button>
</template>

答案与解析

  • 父组件：App.vue
<template>
  <!-- 在模板中使用自定义组件 Button -->
  <Button></Button>
</template>

<script setup lang="ts">
// 导入自定义组件 Button
import Button from './components/Button.vue'
</script>
  • 子组件：Button.vue
<template>
  <button>Botton</button>
</template>

<script setup lang="ts">
// 要声明对 props 的校验，你可以向 defineProps() 宏提供一个带有 props 校验选项的对象。
defineProps({
  type: {
    type: String,   // String 类型校验
    default: 'default',   // 默认值为 'default'
    validator: (value: string) => {
      // 校验函数：type 值必须为 'primary', 'ghost', 'dashed', 'link', 'dashed', 'default' 中的一个，否则会在控制台
      return ['primary', 'ghost', 'dashed', 'link', 'dashed', 'default'].includes(value)
    }
  }
})
</script>

知识点巩固

Prop 校验

  1. Vue 组件可以在子组件中，声明对父组件中传入的 props 的校验要求。

  2. 如果校验失败，则会在控制台中打印警告。

  3. 校验规则：

    • type: 校验类型，可以是 String, Number, Boolean, Array, Object, Function, Symbol, BigInt, null, undefined, 或者自定义的构造函数
    • default: 默认值
    • required: 是否必填
    • validator: 自定义校验函数，返回一个布尔值。

  4. 校验规则的优先级：

    校验函数 > 类型校验 > 默认值校验 > 必填校验。

中等

内容正快马加鞭赶来…

困难

内容正快马加鞭赶来…

yvonne.infj
关注
  • 24
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
叮~您有一封Vue.js挑战邀请函,请查收
webfansplz的博客
07-04 454
大家好,我是webfansplz.今天要跟大家分享的是vuejs-challenges,一个Vue.js在线挑战平台,它提供了一些题库,开发者可以在线进行挑战.通过这些挑战,我们可以进一步了解和熟悉Vue.js,希望它能对想学习Vue.js的同学有所帮助....
一个 Vue.js 在线挑战平台
非著名程序员
07-20 1260
【公众号回复 “1024”，免费领取程序员赚钱实操经验】大家好，我是章鱼猫。今天给大家推荐的这个开源项目很有意思，是一个 Vue 学习的在线挑战平台，开源的。这个开源项目里面提供了多道 Vue.js 练习题，帮你一步步掌握 Vue.js 的使用。该项目意在帮助你更好地了解 Vue.js，编写出实用程序，或单纯享受挑战乐趣。如果你想学习 Vue ，可以看看这个开源项目，挺有...
探索Vue.js的无限可能 —— vuejs-challenges
最新发布
2401_83063795的博客
07-04 2048
挑战自我，共同成长，Vue.js挑战等你来战！
探索Vue.js的挑战：一个实践驱动的学习平台
gitblog_00026的博客
03-23 438
探索Vue.js的挑战：一个实践驱动的学习平台 项目地址:https://gitcode.com/webfansplz/vuejs-challenges 项目简介 vuejs-challenges 是一个专为 Vue.js 爱好者和开发者设计的在线学习资源库。它提供了一系列精心设计的编程挑战，旨在帮助你提升 Vue.js 技能，理论与实战相结合，让你在解决实际问题中学习和进步。 技术分析 该项目...
前端食堂技术周刊第 44 期：Bun、Vue.js 挑战、React 状态管理的新浪潮、Can I DevTools、函数式编程
童欧巴的博客
07-11 1293
- Bun - Color.js - 函数式编程术语 - 数百个 Web 开发资源 - Vue.js 挑战 - React 状态管理的新浪潮 - Can I DevTools
Vue挑战01：Hello World
m0_60189088的博客
05-23 353
双大括号标签会被替换为响应组件实例。属性更改时它也会同步更新。
Vue.js 2.0 参考手册.CHM
03-23
Vue.js 2.0 是一款流行的前端JavaScript框架，由尤雨溪开发，旨在简化Web应用程序的构建。Vue.js 2.0 强调组件化、响应式数据绑定和易用性，使得开发者能够快速构建高性能的用户界面。该“Vue.js 2.0 参考手册”提供...
《vue.js实战开发系列》 课件.rar
05-05
《vue.js实战开发系列》课件是针对Vue.js深入学习和实践的一套完整教程，旨在帮助开发者掌握Vue.js的核心概念、组件化开发、状态管理以及与其他技术的集成应用。 首先，Vue.js的核心概念包括虚拟DOM、数据绑定、...
基于Vue.js的移动应用可视化平台的研究
10-22
【基于Vue.js的移动应用可视化平台的研究】 移动应用在当今互联网产业中占据着核心地位，随着智能手机和移动互联网的广泛普及，中国的庞大用户基础为移动应用的发展提供了广阔的空间，催生了无数的应用程序，它们...
ejsExcel模板在Vue.js项目中的实际运用
10-18
在Vue.js项目中，使用ejsExcel模板可以帮助开发者方便地生成Excel文件。ejsExcel是一个由国人开发的模板引擎，专门用于在Node.js环境中基于预设的Excel模板导出数据到Excel表格。通过使用模板，我们可以避免复杂的...
vue-recaptcha-Vue.js的Google reCAPTCHA组件-Vue.js开发
05-27
vue-recaptcha描述注意：github上的文档始终引用master分支。 有关稳定版本，请阅读NPM上的文档。 Go vue-recaptcha说明注意：github上的文档始终引用master分支。 有关稳定版本，请阅读NPM上的文档。 适用于vue的...
javascript挑战
02-26
倒数计时器设计： //uidesigndaily.com/posts/sketch-countdown-timer-day-876-未来日期-timer 测验应用程序设计： //uidesigndaily.com/posts/sketch-questionnaire-choice-submit-day-924-来自obj的问题-选择答案-最后显示分数 配方应用程序设计： ://uidesigndaily.com/posts/sketch-recipe-app-food-mobile-day-615-单击时的配方信息-fav配方（带有localStorage） Notes应用程序设计： //uidesigndaily.com/posts/photoshop-notes-widget-day-65 -CRUD note -markdown -localStorage ToDo应用程
JS-challenges:这是一些JavaScript编码挑战
03-09
JS挑战 这是黑客排名带来的一些JavaScript编码挑战
vue.js 构建项目_使用Vue.js构建电影播放器​​（代码挑战5的解决方案）
culiu9261的博客
07-21 517
vue.js 构建项目Last week, we got on the code challenge #5, in which we were required to create a simple movie player using data of movies from a provided API. 上周，我们遇到了代码挑战＃5 ，其中要求我们使用提供的API中的电影数据创建一个简单的电...
50多道vue面试题，来挑战一下
酱子
08-04 991
1.vue优点？ 答： 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单； 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势； 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作； 虚拟DOM：dom 操作是非常耗费性能的， 不再使用原生的 d
Vue 面试题集合（一）
qq_44665456的博客
04-18 536
一、让 CSS 只在当前组件生效 二、scss、stylus scss: 1、下载: npm install sass-loader node-sass --save 2、三、v-model 的使用 可以实现双向绑定， 在 input 或者 select 或者 文本域配合 value 使用 四、vue 中的标签如何绑定事件 v-on : click 简写： @click 绑定事件： <input @click = dogLog() /> 在移动端 click 有 30
搭建Vue.js环境
weixin_49690872的博客
03-08 926
1，安装node.js: 官网下载： 命令行分别输入 node -v npm -v 可以查看版本，说明安装成功： 安装npm： 1，执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 使用npm的国内镜像cnpm 命令代替默认的npm命令 安装失败 依次输入以下三行命令 npm set registry https://registry.npm.taobao.org npm set disturl https
一些可以参考的文档集合6
xuejianxinokok的专栏
06-29 1416
一些可以参考的文档集合6
vue 在线答题功能
LONGLONGAGO_RU的博客
11-21 5390
在线答题功能 <!-- 考试 --> <div class="examination"> <ul v-for="(item,i) in examinationData" :key="i"> <div>{{i+1}}、{{item.question}}</div> <...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值