Vue起步-优快云博客

本文链接：https://blog.youkuaiyun.com/SOALIN228/article/details/84578038

本文介绍了Vue.js，一个用于构建用户界面的渐进式框架，易于上手且适合与现有项目整合。通过示例展示了如何使用Vue进行基本的页面渲染、事件处理及组件创建，深入探讨了v-model、v-on等指令的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js 是什么

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

引入Vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

我的第一个Vue

创建一个Id为app的div，并对其进行管理，通过 {{content}} 可以获得data中content的内容，设置一个2s后将content内容改为bye world的函数，Vue就会将页面的内容自动渲染成bye world

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //引入Vue
</head>
<body>
  <div id="app">{{content}}</div>
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        content: 'Hello World'
      }
    })

    setTimeout(function() {
      app.$data.content = 'bye world'
    }, 2000) 
  </script>
</body>
</html>

TodoList案例初探Vue基础

v-model 指令：它能轻松实现表单输入和应用状态之间的双向绑定
v-on 指令：添加一个事件监听器，通过它调用在 Vue 实例中定义的方法
v-bind 指令：将这个元素节点的特性和 Vue 实例的属性保持一致
v-for 指令：可以绑定数组的数据来渲染一个项目列表
创建组件有全局和局部两种格式，当使用局部创建的组件时，需要在Vue实例中进行注册，在组件中通过props可以从父作用域将数据传到子组件，给子组件设置一个事件监听器，通过emit传递给父组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TodoList</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="root">
    <input type="text" v-model="inputValue"> //双向绑定
    <button v-on:click="handleBtnClick">提交</button> //设置点击事件
    <ul>
      <todo-item v-bind:content="item" 
                 v-bind:index="index"
                 v-for="(item, index) in list" @delete="handleItemDelete"> //对子组件进行数据绑定和设置监听
      </todo-item>
    </ul>
  </div>

  <script type="text/javascript">

    // Vue.components("TodoItem", {
    //   props: ['content'],
    //   template: "<li>{{content}}</li>"
    // })

    var TodoItem = {
      props: ['content', 'index'],
      template: "<li @click='handleItemClick'>{{content}}</li>",
      methods: {
        handleItemClick: function() {
          this.$emit("delete", this.index);
        }
      }
    }

    var app = new Vue({
      el: '#root',
      components: {
        TodoItem: TodoItem
      },
      data: {
        list: [],
        inputValue: ''
      },
      methods: {
        handleBtnClick: function() {
          this.list.push(this.inputValue)
          this.inputValue = ''
        },
        handleItemDelete: function(index) {
          this.list.splice(index, 1)
        }
      }
    })
  </script>
</body>
</html>