From d0ed36df5f03a1dda9e4daba85d98c35a7ba6a68 Mon Sep 17 00:00:00 2001 From: jaywcjlove Date: Mon, 21 Nov 2022 06:37:16 +0000 Subject: [PATCH] doc: update vue3 (#154) (#10) 4cadbf109633dc66a42e1474500fa5034e74b78e --- docs/vue.html | 255 ++++++++++++++++++++++++++------------------------ index.html | 2 +- 2 files changed, 134 insertions(+), 123 deletions(-) diff --git a/docs/vue.html b/docs/vue.html index d3f53897..67771a9f 100644 --- a/docs/vue.html +++ b/docs/vue.html @@ -73,11 +73,14 @@

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本

应用实例

-
import { createApp } from 'vue'
+
import { createApp, ref } from 'vue'
 
 const app = createApp({
-  data() {
-    return { count: 0 }
+  setup() {
+    const message = ref("Hello Vue3")
+    return {
+      message
+    }
   }
 })
 app.mount('#app')
@@ -93,11 +96,12 @@
 
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <div id="app">{{ message }}</div>
 <script>
-  const { createApp } = Vue
+  const { createApp, ref } = Vue
   createApp({
-    data() {
+    setup() {
+      const message = ref("Hello Vue3")
       return {
-        message: 'Hello Vue!'
+        message
       }
     }
   }).mount('#app')
@@ -105,13 +109,14 @@

使用 ES 模块构建版本

-
<div id="app">{{ message }}</div>
+
<div id="app">{{ message, ref }}</div>
 <script type="module">
-  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
+  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
   createApp({
-    data() {
+    setup() {
+      const message = ref("Hello Vue3")
       return {
-        message: 'Hello Vue!'
+        message
       }
     }
   }).mount('#app')
@@ -143,17 +148,23 @@

动态绑定多个值

-
data() {
-  return {
-    objectOfAttrs: {
-      id: 'container',
-      class: 'wrapper'
-    }
-  }
-}
-

通过不带参数的 v-bind，你可以将它们绑定到单个元素上

-
<div v-bind="objectOfAttrs"></div>
+
<script setup>
+  import comp from "./Comp.vue"
+  import {ref} from "vue"
+  const a = ref("hello")
+  const b = ref("world")
+</script>
+
+<template>
+  <comp v-bind="{a, b}"></comp>
+</template>
+

+
如果你是使用的 setup 语法糖。需要使用 defineprops 声名（可以直接使用a/b）

+
const props = defineProps({
+  a: String,
+  b: String
+})

使用 JavaScript 表达式

{{ number + 1 }}
@@ -339,47 +350,47 @@
 });

响应式样式

-
<script setup>
-import { ref } from 'vue'
-const open = ref(false);
-</script>
+
<script setup>
+import { ref } from 'vue'
+const open = ref(false);
+</script>
 
-<template>
-  <button @click="open = !open">Toggle</button>
-  <div>Hello Vue!</div>  
-</template>
+<template>
+  <button @click="open = !open">Toggle</button>
+  <div>Hello Vue!</div>  
+</template>
 
-<style scope>
-  div{
-    transition: height 0.1s linear;
-    overflow: hidden;
-    height: v-bind(open ? '30px' : '0px');
-  }
-</style>
+<style scope>
+  div{
+    transition: height 0.1s linear;
+    overflow: hidden;
+    height: v-bind(open ? '30px' : '0px');
+  }
+</style>

响应式进阶 —— watch和computed

监听状态

-
<script setup>
-import { ref, watch } from 'vue';
+
<script setup>
+import { ref, watch } from 'vue';
 
-const count = ref(0)
-const isEvent = ref(false)
+const count = ref(0)
+const isEvent = ref(false)
 
-function increment() {
-  state.count++
-}
+function increment() {
+  state.count++
+}
 
-watch(count, function() {
-  isEvent.value = count.value % 2 === 0
-})
-</script>
+watch(count, function() {
+  isEvent.value = count.value % 2 === 0
+})
+</script>
 
-<template>
-  <button @click="increment">
-    {{ count }}
-  </button>
-  <p>is event: {{ isEvent ? 'yes' : 'no' }}</p>
-</template>
+<template>
+  <button @click="increment">
+    {{ count }}
+  </button>
+  <p>is event: {{ isEvent ? 'yes' : 'no' }}</p>
+</template>

立即监听状态

watch(count, function() {
@@ -390,109 +401,109 @@
 })

计算状态

-
<script setup>
-import { ref, computed } from 'vue';
+
<script setup>
+import { ref, computed } from 'vue';
 
-const text = ref('')
+const text = ref('')
 
-// computed 的回调函数里，会根据已有并用到的状态计算出新的状态
-const capital = computed(function(){
-  return text.value.toUpperCase();
-})
-</script>
+// computed 的回调函数里，会根据已有并用到的状态计算出新的状态
+const capital = computed(function(){
+  return text.value.toUpperCase();
+})
+</script>
 
-<template>
-  <input v-model="text" />
-  <p>to capital: {{ capital }}</p>
-</template>
+<template>
+  <input v-model="text" />
+  <p>to capital: {{ capital }}</p>
+</template>

组件通信

defineProps

-
<script setup>
-import { defineProps } from 'vue';
+
<script setup>
+import { defineProps } from 'vue';
 
-// 这里可以将 `username` 解构出来，但是一旦解构出来再使用，就不具备响应式能力
-defineProps({
-  username: String
-})
-</script>
+// 这里可以将 `username` 解构出来，但是一旦解构出来再使用，就不具备响应式能力
+defineProps({
+  username: String
+})
+</script>
 
-<template>
-  <p>username: {{ username }}</p>
-</template>
+<template>
+  <p>username: {{ username }}</p>
+</template>
 

 
子组件定义需要的参数

-
<script setup>
-const username = 'vue'
-</script>
+
<script setup>
+const username = 'vue'
+</script>
 
-<template>
-  <children :username="username" />
-</template>
+<template>
+  <children :username="username" />
+</template>
 

 
父组件参入参数

defineEmits

-
<script setup>
-import { defineEmits, ref } from 'vue';
+
<script setup>
+import { defineEmits, ref } from 'vue';
 
-const emit = defineEmits(['search'])
+const emit = defineEmits(['search'])
   
-const keyword = ref('')
+const keyword = ref('')
 
-const onSearch = function() {
-  emit('search', keyword.value)
-}
-</script>
+const onSearch = function() {
+  emit('search', keyword.value)
+}
+</script>
 
-<template>
-  <input v-model="keyword" />
-  <button @click="onSearch">search</button>
-</template>
+<template>
+  <input v-model="keyword" />
+  <button @click="onSearch">search</button>
+</template>
 

 
子组件定义支持 emit 的函数

-
<script setup>
-const onSearch = function(keyword){
-  console.log(keyword)
-}
-</script>
+
<script setup>
+const onSearch = function(keyword){
+  console.log(keyword)
+}
+</script>
 
-<template>
-  <children @search="onSearch" />
-</template>
+<template>
+  <children @search="onSearch" />
+</template>
 

 
父组件绑定子组件定义的事件

defineExpose

-
<script setup>
-import { defineExpose, ref } from 'vue';
+
<script setup>
+import { defineExpose, ref } from 'vue';
 
-const keyword = ref('')
+const keyword = ref('')
 
-const onSearch = function() {
-  console.log(keyword.value)
-}
+const onSearch = function() {
+  console.log(keyword.value)
+}
 
-defineExpose({ onSearch })
-</script>
+defineExpose({ onSearch })
+</script>
 
-<template>
-  <input v-model="keyword" />
-</template>
+<template>
+  <input v-model="keyword" />
+</template>
 

 
子组件对父组件暴露方法

-
<script setup>
-import { ref } from 'vue'  
+
<script setup>
+import { ref } from 'vue'  
 
-const childrenRef = ref(null)
+const childrenRef = ref(null)
 
-const onSearch = function(){
-  childrenRef.value.onSearch()
-}
-</script>
+const onSearch = function(){
+  childrenRef.value.onSearch()
+}
+</script>
 
-<template>
-  <children ref='childrenRef' />
-  <button @click="onSearch">search</button>
-</template>
+<template>
+  <children ref='childrenRef' />
+  <button @click="onSearch">search</button>
+</template>
 

 
父组件调用子组件的方法

Provide / Inject

diff --git a/index.html b/index.html index 651b9602..28be2768 100644 --- a/index.html +++ b/index.html @@ -689,7 +689,7 @@

如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 gh-pages 分支代码到你的静态服务就可以了，还可以使用 docker 快捷部署 web 版。

-
+