Skip to content

M
my-vue-app

火狐Jeff / my-vue-app

通知 1
Star 0
Fork 0
M
my-vue-app

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 2b23a38a 编写于 作者: J Jeff Fox
浏览文件
操作

runoob.com

上级
展开全部 隐藏空白更改
内联 并排
Showing with 466 addition and 0 deletion
.gitignore 0 → 100644
浏览文件 @ 2b23a38a
node_modules
.DS_Store
dist
dist-ssr
*.local" "
hello.html 0 → 100644
浏览文件 @ 2b23a38a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.class1 {
background: #444;
color: #eee;
}
</style>
</head>
<body>
<div id="hello-vue" class="demo">
{{ message }}
<p>使用双大括号的文本插值: {{ rawHtml }}</p>
<p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
<p v-if="seen">现在你看到我了</p>
<ol>
<li v-for="site in sites">
{{ site.text }}
</li>
</ol>
<p><a v-bind:href="url">菜鸟教程</a></p>
<p>{{ message }}</p>
<input v-model="message">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
const HelloVueApp = {
data() {
return {
id: 1,
message: 'Hello Vue!!',
url: 'https://www.runoob.com',
rawHtml: '<span style="color: red">这里会显示红色！</span>',
use: false,
ok: true,
seen: false,
count: 4,
sites: [{
text: 'Google'
},
{
text: 'Runoob'
},
{
text: 'Taobao'
}
]
}
},
methods: {
increment() {
this.count++
},
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
const vm = Vue.createApp(HelloVueApp).mount('#hello-vue')
document.write(vm.count + "<br>")
vm.increment()
document.write(vm.count)
</script>
</body>
</html>
index.html 0 → 100644
浏览文件 @ 2b23a38a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
package-lock.json 0 → 100644
浏览文件 @ 2b23a38a
此差异已折叠。
package.json 0 → 100644
浏览文件 @ 2b23a38a
{
"name": "my-vue-app",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.3.0",
"@vue/compiler-sfc": "^3.0.5",
"vite": "^2.4.4"
}
}
\ No newline at end of file
src/App.vue 0 → 100644
浏览文件 @ 2b23a38a
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
src/components/HelloWorld.vue 0 → 100644
浏览文件 @ 2b23a38a
<template>
<h1>{{ msg }}</h1>
<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank">
Vite Documentation
</a>
|
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
</p>
<button type="button" @click="state.count++">
count is: {{ state.count }}
</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</template>
<script setup>
import { defineProps, reactive } from 'vue'
defineProps({
msg: String
})
const state = reactive({ count: 0 })
</script>
<style scoped>
a {
color: #42b983;
}
</style>
src/main.js 0 → 100644
浏览文件 @ 2b23a38a
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
v-for-component.html 0 → 100644
浏览文件 @ 2b23a38a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="todo-list-example">
<form v-on:submit.prevent="addNewTodo">
<label for="new-todo">添加 todo</label>
<input v-model="newTodoText" id="new-todo" placeholder="例如：明天早上跑步" />
<button>添加</button>
</form>
<ul>
<todo-item v-for="(todo, index) in todos" :key="todo.id" :title="todo.title"
@remove="todos.splice(index, 1)"></todo-item>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
newTodoText: '',
todos: [{
id: 1,
title: '看电影'
},
{
id: 2,
title: '吃饭'
},
{
id: 3,
title: '上 RUNOOB 学习'
}
],
nextTodoId: 4
}
},
methods: {
addNewTodo() {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
}
}
})
app.component('todo-item', {
template: `
<li>
{{ title }}
<button @click="$emit('remove')">删除</button>
</li>
`,
props: ['title'],
emits: ['remove']
})
app.mount('#todo-list-example')
</script>
</body>
</html>
v-for-if.html 0 → 100644
浏览文件 @ 2b23a38a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<select @change="changeVal($event)" v-model="selOption">
<template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id">
<!-- 索引为 1 的设为默认值，索引值从0 开始-->
<option v-if="index == 1" :value="site.name" selected>{{site.name}}</option>
<option v-else :value="site.name">{{site.name}}</option>
</template>
</select>
<div>您选中了:{{selOption}}</div>
</div>
<script>
const app = {
data() {
return {
selOption: "Runoob",
sites: [{
id: 1,
name: "Google"
},
{
id: 2,
name: "Runoob"
},
{
id: 3,
name: "Taobao"
},
]
}
},
methods: {
changeVal: function(event) {
this.selOption = event.target.value;
alert("你选中了" + this.selOption);
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>
v-for.html 0 → 100644
浏览文件 @ 2b23a38a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.text }}
</li>
</ol>
<ol>
<li v-for="(site, index) in sites">
{{ index }} -{{ site.text }}
</li>
</ol>
<ul>
<template v-for="site in sites">
<li>{{ site.text }}</li>
<li>--------------</li>
</template>
</ul>
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
<ul>
<li v-for="n in evenNumbers">{{ n }}</li>
</ul>
</div>
<script>
const app = {
data() {
return {
numbers: [1, 2, 3, 4, 5],
sites: [{
text: 'Google'
},
{
text: 'Runoob'
},
{
text: 'Taobao'
}
],
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
},
computed: {
evenNumbers() {
return this.numbers.filter(number => number % 2 === 0)
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>
v-if.html 0 → 100644
浏览文件 @ 2b23a38a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="seen">
<h1>网站</h1>
<p>Google</p>
<p>Runoob</p>
<p>Taobao</p>
</template>
<div v-if="Math.random() > 0.5">
随机数大于 0.5
</div>
<div v-else>
随机数小于等于 0.5
</div>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<h1 v-show="ok">Hello!</h1>
<script>
const app = {
data() {
return {
ok: true,
type: "C",
seen: true /* 改为false，信息就无法显示 */
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>
vite.config.js 0 → 100644
浏览文件 @ 2b23a38a
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
host: '0.0.0.0'
}
})
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或