三个小时vue3.x从零到实战（vue3.x经典案例46个）

Posted 2021-08-11 cui_yonghua

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三个小时vue3.x从零到实战（vue3.x经典案例46个）相关的知识，希望对你有一定的参考价值。

注：部分案例来源于官网。

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>

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>

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>

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>

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>

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>

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>

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>

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>

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()
        三个小时vue3.x从零到实战（前）（vue3.x基础）
 三个小时vue3.x从零到实战（中）（vue3.x高级语法）
 三个小时vue3.x从零到实战（typescript的搭建使用及资料）
 三个小时vue3.x从零到实战（后）（vue3.x配套工具及项目化构建）
 Vue3.x 从零开始—— Router + Vuex + TypeScript 实战演练（上）
 Vue项目实战——实现一个任务清单基于 Vue3.x 全家桶（简易版）