什么是vue，第一个vue实例

你去把阿里干掉！

已于 2024-06-11 09:44:22 修改

阅读量495

点赞数 3

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-06-11 09:38:16 首次发布

本文链接：https://blog.csdn.net/m0_72168336/article/details/139586928

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue是一款用于构建用户界面的渐进式JavaScript框架。它通过采用组件化的开发方式，使得我们能够更轻松、高效地构建交互性较强的Web应用程序。vue官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

使用vue有四个步骤：

1.准备容器（HTML标签<div>,<p>....）

2.引包（官网）-开发版本/生产版本在<script> 在这里引入</script>

3.创建Vue实例new Vue()

在Vue.js中，创建一个Vue实例需要使用Vue构造函数，并使用new关键字调用它。

var vm = new Vue({
  // 选项
})

通过使用Vue构造函数创建Vue实例，我们可以将其与一个DOM元素关联起来，并对其进行操作。

创建Vue实例时，可以传入一个选项对象作为参数，这个选项对象可以包含很多不同的选项，用来配置Vue实例的行为和功能。

下面是一些常用的选项：

el

el选项用来指定Vue实例关联的DOM元素。它的值可以是一个CSS选择器字符串，也可以是一个实际的DOM元素。

var vm = new Vue({
  el: '#app'
})

data

data选项是一个函数，用来返回Vue实例的数据对象。

var vm = new Vue({
  data: function () {
    return {
      message: 'Hello Vue!'
    }
  }
})

methods

methods选项可以包含一组方法，这些方法可以在Vue实例中被调用。

var vm = new Vue({
  methods: {
    sayHello: function () {
      console.log('Hello!')
    }
  }
})

computed

computed选项可以包含一组计算属性，这些计算属性是基于Vue实例的响应式数据进行计算得到的。

var vm = new Vue({
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

watch

watch选项可以用来监听Vue实例中的一个或多个数据的变化，并执行相应的回调函数。

var vm = new Vue({
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    message: function (newValue, oldValue) {
      console.log('Message changed from ' + oldValue + ' to ' + newValue)
    }
  }
})

除了上述选项外，还有其他很多选项可以用来配置Vue实例的行为，例如：props、computed、methods、components、template、created等等。

创建Vue实例后，可以通过访问实例的属性和方法来操作和控制Vue实例。例如，可以通过vm.message来访问data选项中的数据，通过vm.sayHello来调用methods选项中的方法。

4.指定配置项→渲染数据

让我们通过一个简单的实例来理解Vue的基本使用方法。假设我们要创建一个简单的待办事项列表，我们可以使用Vue来实现。

首先，我们需要引入Vue的js文件。在html文件中，可以通过以下方式来引入：

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

然后，在html文件中，我们可以创建一个容器来显示待办事项列表：

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

在Vue中，我们使用{{ }}来进行数据绑定，这里的item是我们定义的一个变量，用于循环遍历待办事项列表数组items中的每一项。

接下来，我们需要在JavaScript代码中创建Vue实例，并将其绑定到#app容器上：

new Vue({
  el: '#app',
  data: {
    items: ['任务1', '任务2', '任务3']
  }
})

在上面的代码中，el指定了Vue实例要绑定到哪一个容器上，这里我们指定了#app。data是一个对象，用于存储我们的数据，这里我们定义了一个名为items的数组，其中包含三个任务。

总的代码如下：

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <div id="app">
           <ul>
            <li v-for="item in items">{{item}}</li>
           </ul>
          </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>

          <script> 
           var app=new Vue({
            el: '#app',
            data: {
            items: ['任务1', '任务2', '任务3']
                }
            })
            </script>
    </body>
</html>

最后，我们可以打开浏览器，浏览器会自动渲染出待办事项列表，显示出我们定义的任务。

如果我们想要在页面上动态地添加或删除待办事项，只需要修改items数组即可。Vue会自动更新页面上的视图，保持数据和视图的同步。

这只是Vue的基本用法之一，Vue还有许多强大的功能和特性，如计算属性、指令、事件处理等等，可以让我们更灵活地构建复杂的Web应用。

总结来说，Vue是一款易学易用的JavaScript框架，通过组件化开发和数据绑定的方式，可以帮助初学者更高效地构建交互性较强的Web应用程序。

个人觉得vue其实和微信小程序中的数据引用方式差不多