vue 什么时候new • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue 框架在什么时候被实例化（new）？

Vue 是一种基于 JavaScript 的前端框架，用于构建用户界面。在使用 Vue 框架开发项目时，我们需要在某个时机将 Vue 实例化。下面是两种常见的实例化 Vue 的时机。

页面加载时
在页面加载时实例化 Vue 是一种常见的做法。可以在 HTML 文件的 <script> 标签中实例化 Vue，并将其绑定到指定的 DOM 元素上。例如：

<div id="app">
  <!-- 这里将 Vue 实例挂载到 id 为 app 的 DOM 元素上 -->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var vm = new Vue({  // 实例化 Vue
    el: '#app',  // 指定 Vue 实例的挂载点
    data: {  // 定义 Vue 实例的数据
      message: 'Hello, Vue!'
    }
  });
</script>

事件触发时
另一种实例化 Vue 的时机是在事件触发时。这通常发生在用户与页面进行交互时，比如点击按钮或提交表单。在相应的事件处理函数中，可以实例化 Vue，并进行相应的操作。例如：

<div id="app">
  {{ message }}
  <button @click="changeMessage">Change Message</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var vm = new Vue({  // 实例化 Vue
    el: '#app',  // 指定 Vue 实例的挂载点
    data: {  // 定义 Vue 实例的数据
      message: 'Hello, Vue!'
    },
    methods: {  // 定义 Vue 实例的方法
      changeMessage: function() {
        this.message = 'Vue is awesome!';  // 改变数据
      }
    }
  });
</script>

上述代码中，当用户点击按钮时，对应的事件处理函数 changeMessage 被触发，从而改变了 Vue 实例的数据 message。

总之，Vue 的实例化时机可以根据项目需求来决定，可以在页面加载时实例化，也可以在事件触发时实例化。

1年前 0条评论

worktile

Worktile官方账号

在使用Vue时，通常会在页面加载时实例化Vue对象。这就意味着在页面的DOMContentLoaded事件触发后，我们可以在JavaScript代码中实例化Vue对象。

具体来说，以下是几个常见的Vue实例化的时机：

在页面的标签内引入Vue库后，可以在页面的

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var app = new Vue({
    // Vue的配置选项
  });
</script>

在使用Vue的单文件组件（.vue文件）时，可以使用Vue的构建工具（如Vue CLI）来编译和打包组件，然后在页面中加载这些组件。这样，Vue实例化的时机会在组件被使用时自动进行。

<template>
  <div>
    <!-- 组件的模板部分 -->
  </div>
</template>

<script>
  export default {
    // 组件的选项部分
  };
</script>

在使用Vue的框架（如Nuxt.js或Vue Router）时，Vue实例化的时机会由框架自动处理。框架会在适当的时候实例化Vue对象，并将其挂载到DOM树中的特定位置。

// 在Nuxt.js中的页面组件中实例化Vue对象
export default {
  mounted() {
    var app = new Vue({
      // Vue的配置选项
    });
  }
}

总的来说，Vue的实例化时机通常是在页面加载完毕后，或在组件被使用时。这样可以确保在实例化Vue对象之前，Vue库已经被加载并可用。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在使用Vue.js时，我们不需要手动使用new来创建Vue实例。我们只需要在HTML文件中引入Vue.js的库文件，并在自己的JavaScript代码中使用Vue构造函数来实例化一个Vue对象。

具体来说，我们可以按照以下步骤创建Vue实例：

引入Vue.js库文件

通过使用<script>标签将Vue.js的库文件引入到HTML文件中，可以从官方网站或通过CDN等方式获取Vue.js的库文件。
```
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```
创建Vue实例

在JavaScript代码中，使用Vue构造函数来创建一个Vue实例。
```
var vm = new Vue({
  // options...
});
```
在new Vue({...})的花括号中，可以提供一些选项来配置我们的Vue实例。这些选项包括：
- el：指定Vue实例要挂载的DOM元素的选择器或DOM元素本身。
- data：定义Vue实例的初始数据。
- computed：定义计算属性，这些属性的值会根据其他响应式数据的变化而自动更新。
- methods：定义Vue实例的方法。
- watch：定义一个观察器，用于监听响应式数据的变化。
```
var vm = new Vue({
  el: '#app', // 将Vue实例挂载到id为"app"的DOM元素上
  data: {
    message: 'Hello, Vue!'
  },
  computed: {
    // 计算属性
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  },
  methods: {
    // 方法
    greet: function() {
      alert('Hello!');
    }
  },
  watch: {
    // 观察器
    message: function(newVal, oldVal) {
      console.log('message的值从' + oldVal + '变为' + newVal);
    }
  }
});
```
在上述代码中，我们用Vue构造函数创建了一个Vue实例，并将其挂载到id为"app"的DOM元素上。同时我们还定义了一个初始数据message，一个计算属性reversedMessage，一个方法greet以及一个观察器watch。

至此，我们已经成功创建了一个Vue实例，并进行了一些基本的配置。在Vue实例创建完成后，Vue会自动对我们的配置进行处理，并开始响应式地更新视图，以保证视图与数据的同步。我们可以通过在el选项指定的DOM元素中编写Vue模板，利用Vue的数据绑定和指令等功能来简化我们对DOM的操作。

需要注意的是，在实例化Vue对象之前的JavaScript代码都是同步执行的。但是在实例化之后的代码则是异步执行的，因为Vue会进行一些异步的初始化工作。

由于Vue的响应式特性，Vue实例创建之后，我们可以随时的修改实例中的数据，这会触发Vue的响应系统来更新视图并执行相应的操作。

总结起来，我们在Vue.js中并不需要使用new来创建Vue实例，而是在JavaScript代码中使用Vue构造函数来实例化一个Vue对象。在实例化Vue对象时，我们可以提供一些选项来配置Vue实例，包括挂载的DOM元素、数据、计算属性、方法、观察器等。创建完Vue实例后，Vue会自动进行响应式处理，并开始保持数据和视图的同步更新。

1年前 0条评论