此命令会在 ./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 @@
<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
+})
{{ 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>
<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>
<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>
父组件参入参数
<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>
父组件绑定子组件定义的事件
<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>
父组件调用子组件的方法
如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 gh-pages 分支代码到你的静态服务就可以了，还可以使用 docker 快捷部署 web 版。
-