Vue的创建与使用

WUJI02

已于 2024-06-22 23:06:25 修改

阅读量709

点赞数 20

分类专栏：裁判文书大模型文章标签： vue.js 前端

于 2024-06-22 17:52:22 首次发布

本文链接：https://blog.csdn.net/weixin_62628808/article/details/139885764

版权

裁判文书大模型专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前提摘要：vue2与vue3的区别

Vue.js 2和Vue.js 3在函数定义上有一些区别，主要是由于Vue.js 3引入了一些新的语法和特性。以下是它们之间的一些主要区别：

Composition API: Vue.js 3引入了Composition API，这是一种新的组织代码的方式，允许将相关逻辑组织在一起，而不是按照选项分散在不同的生命周期钩子和方法中。在Vue.js 2中，通常使用选项式API，将数据、计算属性、方法等分开定义，而在Vue.js 3中，您可以使用setup()函数来组织组件的代码逻辑。

例如，在Vue.js 2中，您可能会这样定义一个组件：
```
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
```
在Vue.js 3中，您可以使用Composition API来定义：
```
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return { count, increment };
  }
};
```
Setup 函数: 在Vue.js 3中，组件的setup()函数是用来替代Vue.js 2中的data、computed、methods等选项的。setup()函数在组件初始化时被调用，用于设置组件的响应式状态、方法等。在setup()函数中，您可以通过引入ref、reactive等函数来创建响应式数据。
ref和reactive: 在Vue.js 3中，ref和reactive是用来创建响应式数据的两个主要函数。ref用于创建单个可变值的响应式引用，而reactive用于创建包含多个属性的响应式对象。
```
import { ref, reactive } from 'vue';

// 使用 ref
const count = ref(0);

// 使用 reactive
const state = reactive({
  count: 0,
  message: 'Hello'
});
```

事件处理: 在Vue.js 3中，事件处理稍微有所改变。事件监听器现在可以直接在模板中使用@符号绑定，不再需要使用v-on指令。另外，事件处理函数的参数也有所不同，在Vue.js 3中事件处理函数的第一个参数是原生事件对象，而不再是Vue.js 2中的事件对象。

<!-- Vue.js 2 -->
<button @click="handleClick">Click me</button>

<!-- Vue.js 3 -->
<button @click="handleClick">Click me</button>
// Vue.js 2
methods: {
  handleClick(event) {
    console.log(event.target);
  }
}

// Vue.js 3
setup() {
  const handleClick = (event) => {
    console.log(event.target);
  };

  return { handleClick };
}

这些是Vue.js 2和Vue.js 3在函数定义上的一些主要区别。Vue.js 3引入了Composition API和一些新的语法，使得组件的编写更加灵活和方便。

1.创建vue:

1）简单创建

npm init vue@latest

.vscode         -VSCode工具的配置文件
node_modules    -Vue项目的运行依赖文件夹(执行npm install)
public          -资源文件夹（浏览器图标）
src             -源码文件夹
.gitignore      -git忽略文件
index.html      -入口html文件
package.json    -信息描述文件
README.md       -注释文件
vite.config.js  -Vue配置文件

2）完整创建

在Django中创建Vue.js应用程序可以通过以下步骤完成：

安装Vue CLI：首先，确保你的系统中已安装了Node.js和npm。然后，使用以下命令安装Vue CLI：
```
npm install -g @vue/cli
```
创建Vue项目：在Django项目的根目录下创建一个Vue项目。在命令行中执行以下命令：
```
vue create front
```
这将创建一个名为frontend的Vue项目。
配置Vue项目：进入frontend目录，并按照提示选择Vue项目的配置选项。你可以选择默认配置或手动配置。
调整Vue项目结构：在Vue项目的public目录中放置你的静态文件，如图片、样式表等。确保Vue项目中的输出文件被正确指向Django项目的静态文件目录。
运行Vue应用程序：在frontend目录中运行以下命令以启动Vue开发服务器：
```
npm run serve
```
这将在本地启动Vue开发服务器，并提供一个URL，你可以在浏览器中访问该URL来查看Vue应用程序的运行情况。
将Vue应用程序部署到生产环境：当你准备好将Vue应用程序部署到生产环境时，使用以下命令在frontend目录中构建Vue应用程序：
```
npm run build
```
这将在dist目录中生成一个生产就绪的Vue应用程序。然后，将这些静态文件部署到你的服务器或CDN中。