注： 部分案例来源于官网。
1. 计数器从1到1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="counter">
Counter: {
{ counter }}
</div>
<script>
const Counter = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
Vue.createApp(Counter).mount('#counter')
</script>
</body>
</html>
AI 代码解读
2. 鼠标悬停几秒钟查看此处动态绑定的提示信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="bind-attribute">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script>
const AttributeBinding = {
data() {
return {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
}
}
Vue.createApp(AttributeBinding).mount('#bind-attribute')
</script>
</body>
</html>
AI 代码解读
3. 翻转字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="event-handling">
<p>{
{ message }}</p>
<button v-on:click="reverseMessage">反转 Message</button>
</div>
<script>
const EventHandling = {
data() {
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(EventHandling).mount('#event-handling')
</script>
</body>
</html>
AI 代码解读
4. 用户输入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!--表单数据输入和应用状态之间的双向数据绑定-->
<div id="two-way-binding">
<p>{
{ message }}</p>
<input v-model="message" />
</div>
<script>
const TwoWayBinding = {
data() {
return {
message: 'Hello Vue!'
}
}
}
Vue.createApp(TwoWayBinding).mount('#two-way-binding')
</script>
</body>
</html>
AI 代码解读
5. 控制元素是否显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="conditional-rendering">
<span v-if="seen">现在你看到我了</span>
</div>
<script>
const ConditionalRendering = {
data() {
return {
seen: true
}
}
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
</script>
</body>
</html>
AI 代码解读
6. 遍历数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="list-rendering">
<ol>
<li v-for="todo in todos">
{
{ todo.text }}
</li>
</ol>
</div>
<script>
const ListRendering = {
data() {
return {
todos: [
{
text: 'Learn JavaScript' },
{
text: 'Learn Vue' },
{
text: 'Build something awesome' }
]
}
}
}
Vue.createApp(ListRendering).mount('#list-rendering')
</script>
</body>
</html>
AI 代码解读
7. 组件化应用构建
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="todo-list-app">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
<script>
const TodoList = {
data() {
return {
groceryList: [
{
id: 0, text: 'Vegetables' },
{
id: 1, text: 'Cheese' },
{
id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
}
}
const app = Vue.createApp(TodoList)
app.component('todo-item', {
props: ['todo'],
template: `<li>{
{ todo.text }}</li>`
})
app.mount('#todo-list-app')
</script>
</body>
</html>
AI 代码解读
8. 文本插值v-html的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<style>
.demo {
font-family: sans-serif;
border: 1px solid #eee;
border-radius: 2px;
padding: 20px 30px;
margin-top: 1em;
margin-bottom: 40px;
user-select: none;
overflow-x: auto;
}
</style>
<body>
<div id="example1" class="demo">
<p>Using mustaches: {
{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<script>
const RenderHtmlApp = {
data() {
return {
rawHtml: '<span style="color: red">This should be red.</span>'
}
}
}
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>
</body>
</html>
AI 代码解读
9. 计算属性的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<style>
.demo {
font-family: sans-serif;
border: 1px solid #eee;
border-radius: 2px;
padding: 20px 30px;
margin-top: 1em;
margin-bottom: 40px;
user-select: none;
overflow-x: auto;
}
</style>
<body>
<div id="computed-basics" class="demo">
<p>Has published books:</p>
<span>{
{ publishedBooksMessage }}</span>
</div>
<script>
Vue.createApp({
data() {
return {
author: {
name: 'John Doe',
books: ['Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery']
}
}
},
computed: {
// a computed getter
publishedBooksMessage() {
// `this` points to the vm instance
return this.author.books.length > 0 ? 'Yes' : 'No'
}
}
}).mount('#computed-basics')
</script>
</body>
</html>
AI 代码解读
10. 用watch回答以?结尾的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
<div id="watch-example">
<p>
输入一个问题，以 ? 号结尾输出答案:
<input v-model="question" />
</p>
<p>{
{ answer }}</p>
</div>
<p id="info"></p>
<script>
const watchExampleVM = Vue.createApp({
data() {
return {
question: '',
answer: '每个问题结尾需要输入英文的 ? 号。'
}
},
watch: {
// 每当问题改变时，此功能将运行，以 ? 号结尾
question(newQuestion, oldQuestion) {
if (newQuestion.indexOf('?') > -1) {
this.getAnswer()
}
}
},
methods: {
getAnswer() {
this.answer = '加载中...'
axios
.get('https://yesno.wtf/api')
.then(response => {
this.answer = response.data.answer
})
.catch(error => {
this.answer = '错误! 无法访问 API。 ' + error
})
}
}
}).mount('#watch-example')
</script>
</body>
</html>
AI 代码解读
11. 使用v-for遍历数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<ul id="array-rendering" class="demo">
<li v-for="item in items" :key="item.message">
{
{ item.message }}
</li>
<!-- 带索引 -->
<li v-for="(item, index) in items">
{
{ index }} - {
{ item.message }}
</li>
</ul>
<script>
Vue.createApp({
data() {
return {
items: [{
message: 'Foo' }, {
message: 'Bar' }]
}
}
}).mount('#array-rendering')
</script>
</body>
</html>
AI 代码解读
12. 使用v-for遍历对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<ul id="v-for-object" class="demo">
<li v-for="value in myObject">
{
{ value }}
</li>
<P>也可以提供第二个的参数为 property 名称 (也就是键名 key)：</P>
<li v-for="(value, name) in myObject">
{
{ name }}: {
{ value }}
</li>
<P>还可以用第三个参数作为索引：</P>
<li v-for="(value, name, index) in myObject">
{
{ index }}. {
{ name }}: {
{ value }}
</li>
</ul>
<script>
Vue.createApp({
data() {
return {
myObject: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2020-03-22'
}
}
}
}).mount('#v-for-object')
</script>
</body>
</html>
AI 代码解读
13. 在v-for里使用值的范围
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="range" class="demo">
<span v-for="n in 10">{
{ n }} </span>
</div>
<script>
Vue.createApp({
}).mount('#range')
</script>
</body>
</html>
AI 代码解读
14. 在组件上使用v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!--v-for 循环出列表，v-if 设置选中值：-->
<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里写vue代码 -->
<script>
const app = Vue.createApp({
data() {
return {
newTodoText: '',
todos: [
{
id: 1,
title: '看电影'
},
{
id: 2,
title: '吃饭'
},
{
id: 3,
title: '学习!!'
}
],
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>
AI 代码解读
15. 监听事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="basic-event" class="demo">
<button @click="counter += 1">Add 1</button>
<p>The button above has been clicked {
{ counter }} times.</p>
</div>
<script>
Vue.createApp({
data() {
return {
counter: 0
}
}
}).mount('#basic-event')
</script>
</body>
</html>
AI 代码解读
16. 事件处理方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="basic-event" class="demo">
<button @click="counter += 1">Add 1</button>
<p>The button above has been clicked {
{ counter }} times.</p>
</div>
<script>
Vue.createApp({
data() {
return {
counter: 0
}
}
}).mount('#basic-event')
</script>
</body>
</html>
AI 代码解读
为了减少篇幅，剩下30个可到：https://gitee.com/cuiyonghua/vue3.x-example
