Nodejs,npm,vue,elementui

最新推荐文章于 2023-10-24 18:21:18 发布

酸辣菜菜鱼

最新推荐文章于 2023-10-24 18:21:18 发布

阅读量462

点赞数

文章标签： vue nodejs

本文链接：https://blog.csdn.net/qq_40108680/article/details/105657285

版权

本文介绍了如何安装Node.js和npm，创建Vue.js项目，并详细讲解了Vue的基础知识，包括MVVM模式、常见指令、组件和路由。接着，文章讨论了webpack的作用和vue-cli的安装，最后探讨了ElementUI的集成，包括安装、导入和使用，以及利用Mock.js模拟数据和axios优化ajax请求。

摘要由CSDN通过智能技术生成

文章目录

Nodejs安装

1.NodeJs下载：https://nodejs.org/en/download/
2.nodejs里面自带npm项目管理工具
3.升级：npm install npm@latest -g
4.在idea中安装nodejs插件和vuejs代码提示插件

创建项目

1.创建前端项目
2.初始化 npm init -y
3.安装vue模块 npm install -g vue（全局安装）

1.MV VM模式：

Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。
View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。
ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；

2.vue常见指令

v-model=“表达式” 数据双向绑定 (缩写 ：)
v-text=“表达式” 设置标签中的文本
v-html=“表达式” 设置标签中的html
v-if(else else if)=“表达式” 判断条件
v-for=“表达式” 循环
v-on=“表达式” 注册事件 (缩写 @)
watch监控

<div id="app">
      <input type="text" v-model="message">
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">
      var vm = new Vue({
   
          el:"#app",
          data:{
   
              message:""
          },
          watch:{
   
              message(newVal, oldVal){
   
                  console.log(newVal, oldVal);
              }
          }
      })
  </script>

3.vue组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <mytag></mytag>
    <mytag2></mytag2>
</div>
<div id="app2">
    <mytag></mytag>
    <mytag2></mytag2>
</div>
<script>
    <!--全局组件 在不同vue中使用-->
    Vue.component("mytag",{
   
        template:"<h1>全局组件</h1>"
    })
    new Vue({
   
        el:"#app",
        data:{
   
        },
        components:{
   
            "mytag2":