vue2入门

北乎下周

已于 2023-12-19 15:02:01 修改

阅读量957

点赞数 28

分类专栏：前端入门文章标签：前端 javascript 开发语言

于 2023-12-17 20:00:34 首次发布

本文链接：https://blog.csdn.net/weixin_49393290/article/details/135042508

版权

前端入门专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue2官方文档：安装 — Vue.js

1、安装

新建"vue"文件夹——>新建vue1.html

直接用<script>标签引入vue：

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

tips:

CDN:一个网络加速的技术

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</body>
</html>

此时就已经引入成功了

2、vue的变量渲染

使用双括号(胡子)语法，就实现了文本渲染。

我们在绑值语法里可以写字符串、数字、布尔、表达式。

字符串、数字、布尔示例：

</head>
<body>
<div id="app">
  {{message}}
  <div>
    {{num++}}
<!-- `{{num++}}` 表示使用 `num` 的当前值，然后再将 `num` 值加一；
而 `{{++num}}` 表示先将 `num` 的值加一，然后再使用新的值。 -->
  </div>
  <div>
    {{bool}}
  </div>
  <div>{{bool?'a':'b'}}</div>
<!--如果bool为true显示a，false显示b-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
  var app = new Vue({
    el:'#app',
    data:{
      message:'hello',
      num:1,
      bool:true
    }
  })


</script>

</body>

显示结果：

数组示例：

1、查询数组里名叫张三的人的年龄

<body>
<div id="app">
<div> {{arr.find(v =>v.name ==='张三')?.age}}</div>

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

<script>
  var app = new Vue({
    el:'#app',
    data:{
   arr:[{name:'张三',age:20}]
    }
  })


</script>

</body>

//如果把data中arr的数组里的元素清空，div里面那个语句也不会报错。此时整个值就会变成undefined。

v-html（模版）

有时候我们想渲染一个html

<body>
<div id="app">
<div v-html="htmlStr"></div>

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

<script>
  var app = new Vue({
    el:'#app',
    data:{
   htmlStr:'<stong style="color:red">vue学习</stong>'
    }
  })


</script>

</body>

v-model(双向绑定值)

<div id="app">
<div>
  <input type="text" v-model="count">
  <div>{{count}}</div>

</div>

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

<script>
  var app = new Vue({
    el:'#app',
    data:{
count:0
    }
  })


</script>

效果：

v-if（判断）

<body>
<div id="app">
<div>
<div v-if="color === '红色'">红色</div>
  <div v-if="color === '蓝色'">蓝色</div>
 <div v-else-if="color === '黑色'>黑色</div> 
<!--这也是判断的语句之一-->
 <div v-else>黑色</div>
</div>

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

<script>
  var app = new Vue({
    el:'#app',
    data:{
 color:'红色'
    }
  })


</script>

</body>

结果显示红色

v-bind:动态绑定属性

<body>
<div id="app">
<div>
<a v-bind:href="url">搜索一下</a>
</div>

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

<script>
  var app = new Vue({
    el:'#app',
    data:{
   url:'https://www.baidu.com'
    }
  })

</script>

</body>

v-bind简写是<a :href="url">搜索一下</a>

v-on:事件绑定

<body>
<div id="app">
<div style="width:100px;height:100px;background-color: red" v-on:click="clickDiv" id="div"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
  var app = new Vue({
    el:'#app',
    data:{

    },
    methods:{
      clickDiv(){
        console.log('我点击了div')
        
      }
    }
  })


</script>

</body>

如果你想点击方块让它切换颜色或者更多类似的操作

那么在methods方法里可以这样写：

    methods:{
      clickDiv(){
        console.log('我点击了div')
     //首先获取元素,这样的写法就是js原生的语法
        let color=document.getElementById('div').style.backgroundColor
        document.getElementById('div').style.backgroundColor=color ==='blue'?'red':'blue'
      }
    }

例2:

如果你想点击数字就改变颜色的话，你需要再添加一个点击事件。

<div id="app">
  <div v-html="htmlStr" v-on:click="clickHtml"></div>
  <div style="width:100px;height:100px;background-color: red" v-on:click="clickDiv" id="div"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      htmlStr: '<strong id="htmlId" style="color:red">222</strong>'
    },
    methods: {
      clickHtml(event) {
        if (event.target.id === 'htmlId') {
          event.target.style.color = 'gold';
        }
      },
      clickDiv() {
        console.log('我点击了div');
        let color = document.getElementById('div').style.backgroundColor;
        document.getElementById('div').style.backgroundColor = color === 'blue' ? 'red' : 'blue';
      }
    }
  });
</script>

v-on:click的简写：@click="clickDiv"

v-for:循环

假如说我想渲染n个数据，以下是标准语法示例：

<div id="app">
  <div v-for="(item,index) in fruits" :key="index">{{index+','+item}}</div>
 </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      fruits:['苹果','香蕉','梨子'],
        },
  });
</script>

如果你想左边显示成

那么index+1即可

<div id="app">
  <div v-for="(item,index) in fruits" :key="index">{{(index+1)+','+item}}</div>

 </div>

tips：

这个 v-for 循环会遍历 fruits 数组中的每一个元素，并为每个元素生成一个 div 元素。在循环中，item 代表当前遍历到的数组元素，index 则表示当前元素在数组中的索引。

item 是每次迭代中当前遍历到的数组元素，比如第一次迭代时是 '苹果'，第二次是 '香蕉'，以此类推。
index 是每个元素在数组中的索引值，从 0 开始。第一次迭代时 index 是 0，第二次是 1，以此类推。

v-for="(item, index) in fruits" 中的 (item, index) 是解构语法，用来从遍历的数组元素中提取当前元素和对应的索引值。

在每个循环中，{{ (index + 1) + ',' + item }} 是在 div 中显示当前循环的索引加一和数组元素。因为索引是从 0 开始，加一是为了显示人类习惯的从 1 开始的索引。

示例2:遍历数组

动态class style

通过变量来绑定样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue学习</title>
  <style>
    /* 定义一个 CSS 类名为 active，用于设置文本颜色为红色 */
    .active {
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 下拉菜单和菜单项的布局 -->
  <div style="display:flex;margin-top:30px">
    <!-- 下拉选择框 -->
    <select v-model="currentMenu">
      <option value="首页">首页</option>
      <option value="教师">教师</option>
      <option value="学生">学生</option>
    </select>
    <!-- 循环渲染菜单项 -->
    <div style="padding:0 10px;"
         <!-- 动态设置菜单项的字体大小 -->
         :style="{ fontSize: item === currentMenu ? '20px' : '14px' }"
         <!-- 根据条件动态添加或移除 active 类 -->
         :class="{'active': item === currentMenu}"
         v-for="item in menus" :key="item">{{ item }}</div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      // 定义菜单数组
      menus: ['首页', '教师', '学生'],
      // 当前选中的菜单项，默认为 "首页"
      currentMenu: '首页'
    },
  });
</script>
</body>
</html>

运行结果：

vue脚手架搭建

Vue CLI官网文档地址：安装 | Vue CLI

在mac上安装Vue CLI：

vue create(hello-world为自定义的目录名)

vue create hello-world

step1、新建一个文件夹

终端进入该文件夹，然后输入命令：

然后就会在当前的目录下帮你创建一个vue的目录，这个目录就是vue脚手架的内容。

当你加载完成之后是这样的效果：

创建好了之后分别执行以下两个命令

cd vue 
npm run serve

敲完之后就会开始运行这个项目了：

成功之后的界面：

复制Local的地址到浏览器中，这就是vue的一个初始界面：

这就是一个工程化的vue，有localhost这个IP，有8080这个独立的端口，这就叫工程化。

后面要学习SpringBoot，SpringBoot也是一个独立的工程，二者的区别是端口号不同，前端是8080，后端是9090.

然后用IDEA打开小白做毕设2024这个文件夹,左侧目录如下：

node_modules：是一个依赖库

public下的favicon.ico是一个小图标

public下的index.html：
index.html是工程打包之后页面的入口：

<!DOCTYPE html>
<!--声明 HTML 的文档类型，表示这是一个 HTML5 文档。-->
<html lang="">
  <head>
    <meta charset="utf-8">

    <!-- 告诉 IE 浏览器使用最新的渲染模式。-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- 针对移动设备，设置视口的宽度和初始缩放比例。-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--设置网页的图标，这里使用了一个模板变量 BASE_URL 来指向应用的根路径。-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--设置网页的标题，这里使用了一个插件提供的配置 htmlWebpackPlugin.options.title。-->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
<!--当浏览器不支持 JavaScript 或 JavaScript 被禁用时显示的内容-->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
<!--这是 Vue 应用挂载的根节点，Vue.js 应用将会被渲染到这个节点下。-->
<!--类似于 DOM 树的概念，根节点指的是整个文档树的顶层节点，即整个文档的最顶层节点。在 HTML 文档中，根节点通常是 <html> 元素。在一个 Vue.js 应用中，根节点通常是 Vue 实例挂载的节点，即应用的最顶层节点。-->
    <div id="app"></div>

    <!-- built files will be auto injected -->
  </body>
</html>

views文件夹：

页面加载时候第一个画面显示的就是HomeView.vue的画面。

App.vue

<template>
  <!-- Vue 组件的模板部分 -->
  <div id="app">
    <!-- 页面的顶部导航栏 -->
    <nav>
      <!-- Vue Router 提供的路由链接，链接到不同的页面 -->
      <router-link to="/">Home</router-link> | <!-- 链接到 Home 页面 -->
      <router-link to="/about">About</router-link> <!-- 链接到 About 页面 -->
    </nav>
    <!-- 显示当前路由对应的组件内容 -->
    <router-view/>
  </div>
</template>

<style>
/* CSS 样式部分 */
#app {
  /* 设置字体 */
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; /* 平滑字体 */
  -moz-osx-font-smoothing: grayscale; /* 在 macOS 上抗锯齿 */
  text-align: center; /* 文字居中 */
  color: #2c2e50; /* 文字颜色 */
}

nav {
  padding: 30px; /* 导航栏上下左右留白 */
}

nav a {
  font-weight: bold; /* 设置链接文字为粗体 */
  color: #2c3e50; /* 链接文字颜色 */
}

nav a.router-link-exact-active {
  color: #42b983; /* 当前路由链接高亮时的颜色 */
}
</style>

<div id="app"> 是一个 HTML 元素，它在这里作为 Vue 应用的挂载点。在 Vue.js 中，应用通常需要挂载到一个 HTML 元素上才能运行，而这个元素就是指定的挂载点。

router：路由

如果你想新增一个名为 Aaaa.vue 的组件，并希望通过路由的方式在应用中使用它，你需要做以下几步：

1. 创建 Aaaa.vue 组件

在 src/views 或者你的组件存放目录下创建一个 Aaaa.vue 组件文件，并编写组件的模板、脚本和样式。

2. 在路由配置中添加新路由

在 router/index.js 中，将新创建的 Aaaa.vue 组件与一个特定的 URL 路径进行关联。在 routes 数组中添加一个新的路由配置。

// 导入 Aaaa.vue 组件
import Aaaa from '@/views/Aaaa.vue';

// 在路由配置中添加新的路由
export default new Router({
  routes: [
    // 其他已有的路由配置
    {
      path: '/aaaa', // 定义路径
      name: 'Aaaa', // 路由名称
      component: Aaaa, // 新创建的 Aaaa.vue 组件
    },
  ],
});

3. 在 App.vue 中使用新路由

在 App.vue 的模板部分，通过 <router-link> 标签创建一个链接，让用户可以访问新的路由。

<template>
  <div id="app">
    <nav>
      <!-- 其他链接 -->
      <router-link to="/aaaa">Aaaa</router-link> <!-- 新添加的链接 -->
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // 其他配置
};
</script>

<style>
/* 样式 */
</style>

现在，当用户访问应用的 /aaaa 路径时，Vue Router 会加载和渲染 Aaaa.vue 组件到 <router-view> 中，同时你也可以通过 <router-link> 创建一个链接，让用户可以点击导航到新的路由路径。

图片里的Home|About是写在App.vue里的

协作关系

Vue Router：Vue Router 负责根据路由配置加载和渲染特定的页面组件，比如将 HomeView.vue 渲染到 App.vue 的 <router-view> 中。
App.vue 和 HomeView.vue：App.vue 作为根组件包含整个应用的结构，而 HomeView.vue 则代表着某个特定的页面，二者通过 Vue Router 配合实现了页面切换和渲染。

总体来说，index.html 作为整个 Vue 应用的初始入口，加载 Vue 应用的核心文件和基本结构；App.vue 是应用的根组件，负责整个应用的布局和基本结构；HomeView.vue 则是一个特定的页面组件，通过路由和 App.vue 协作，在应用中渲染展示特定的页面内容。三者相互协作，共同构成了一个完整的 Vue.js 应用。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

tips:

这个 `main.js` 文件是 Vue.js 应用的入口文件，它负责创建 Vue 实例、挂载根组件、设置全局配置等，是整个应用的主要控制中心。

刚刚就是在App.vue的文件里头部就引用了。

assets：以后会把所有静态的图片，css，js全部放在静态的文件里边

假如你新建了一个test.css，你想要全部引用，那么直接在main.js中写

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '@/assets/css/test.css'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

components组件:

组件可以作为一个单独的引用

比如在homeView里我们引用了Hello World

组件可以被其他的页面通过import的方式引用

import HelloWorld from '@/components/HelloWorld.vue'

然后通过一个标签去渲染

  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>

<HelloWorld>标签代表的就是components文件夹下HelloWorld里面的内容，把一个页面的内容浓缩到一个标签里展示出来了。

.gitignore 文件是一个用来告诉 Git 哪些文件或文件夹应该被忽略的配置文件。在一个 Git 仓库中，有时候我们希望某些文件或文件夹不被 Git 跟踪或版本控制，比如临时文件、依赖库、构建产物等，这时就可以通过 .gitignore 文件来指定要忽略的内容。

babel.config.js 是用来配置 Babel 的 JavaScript 编译工具的配置文件。Babel 是一个 JavaScript 编译器，可以将 ECMAScript 2015+ 版本的代码转换成向下兼容的 JavaScript 版本，使得你可以在当前的环境中运行更高版本的 JavaScript 代码。

这个配置文件的作用是定义 Babel 的转换规则、插件和预设等设置，让开发者可以根据项目需求和环境选择合适的转换规则。

一个简单的 babel.config.js 文件可能如下所示：

module.exports = {
  presets: [
    '@babel/preset-env', // 使用最新的 JavaScript 语法
    '@babel/preset-react' // 支持 React 语法
  ],
  plugins: [
    '@babel/plugin-transform-runtime', // 使用 Babel 的运行时转换工具
    'transform-vue-jsx' // 支持 Vue.js 的 JSX 语法
  ]
};

jsconfig.json 是用于配置 JavaScript 项目的文件，通常用于指定项目中 JavaScript 文件的编译选项、路径别名、语法支持等设置。

{
  "compilerOptions": {
    "target": "es5", // 设置编译后的 JavaScript 版本为 ES5，向下兼容性较好
    "module": "esnext", // 指定模块系统为 ESNext（ECMAScript 下一版本）
    "baseUrl": "./", // 设置基础路径为当前目录
    "moduleResolution": "node", // 使用 Node.js 风格的模块解析方式
    "paths": {
      "@/*": [
        "src/*" // 设置路径别名，@/* 指向 src/*，简化导入路径
      ]
    },
    "lib": [ // 指定所需的标准库
      "esnext", // ECMAScript 下一版本
      "dom", // DOM 和 DOM 扩展库
      "dom.iterable", // 可迭代 DOM
      "scripthost" // 宿主环境下的库
    ]
  }
}

package.json 是 Node.js 项目中用来描述项目元数据和配置信息的文件。它包含了项目的名称、版本、依赖项、脚本命令等重要信息，是 Node.js 项目的核心配置文件之一。

{
  "name": "vue", // 项目名称为 Vue
  "version": "0.1.0", // 项目版本号为 0.1.0
  "private": true, // 标记为私有项目，防止意外发布到公共仓库
  "scripts": {
    "serve": "vue-cli-service serve", // 启动开发服务器的脚本命令
    "build": "vue-cli-service build" // 构建生产版本的脚本命令
  },
  "dependencies": { // 生产环境依赖的包
    "core-js": "^3.8.3", // 核心 JavaScript 库的依赖
    "vue": "^2.6.14", // Vue.js 框架的依赖，版本号为 2.6.14
    "vue-router": "^3.5.1" // Vue 路由插件的依赖，版本号为 3.5.1
  },
  "devDependencies": { // 开发环境依赖的包
    "@vue/cli-plugin-babel": "~5.0.0", // Vue CLI Babel 插件的开发环境依赖
    "@vue/cli-plugin-router": "~5.0.0", // Vue CLI 路由插件的开发环境依赖
    "@vue/cli-service": "~5.0.0", // Vue CLI 的服务插件的开发环境依赖
    "vue-template-compiler": "^2.6.14" // Vue 模板编译器的开发环境依赖，版本号为 2.6.14
  },
  "browserslist": [ // 浏览器兼容性列表，指定支持的浏览器范围
    "> 1%", // 支持全球超过 1% 的浏览器
    "last 2 versions", // 支持每个浏览器的最后两个版本
    "not dead" // 排除已经被废弃的浏览器
  ]
}

package-lock.json 是 npm 5 以上版本引入的一个文件，用于锁定当前安装的包的版本。它主要用于记录项目依赖的确切版本，确保在不同的开发环境中安装的依赖包版本一致，以保证项目的稳定性和可复现性。

README.md

vue.config.js 是 Vue CLI 项目的配置文件，用于配置构建工具和构建过程中的各种参数和选项。这个文件的存在让开发者可以更灵活地定制化配置 Vue 项目的构建行为。

// 引入 Vue CLI 的 defineConfig 方法
const { defineConfig } = require('@vue/cli-service')

// 导出配置对象，使用 defineConfig 方法定义配置
module.exports = defineConfig({
  // transpileDependencies 选项告诉 Vue CLI 在构建过程中对所有依赖进行转译处理
  // 设置为 true 表示将所有依赖项进行转译
  transpileDependencies: true
})

示例：

如果我想把这个vue项目的地址8080改一下，则可以通过vue.config.js来改变

首先在代码里加上：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:7000
  }
})

然后点击运行

如果你想改变页面标签的名字也可以在这里修改

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:7000
  },
// 在 Vue CLI 的 chainWebpack 配置中，对 webpack 进行链式操作
chainWebpack: config => {
  // 通过 config.plugin('html') 获取 HtmlWebpackPlugin 插件实例，并进行配置
  config.plugin('html')
    // 使用 tap 方法对 HtmlWebpackPlugin 的参数进行修改
    .tap(args => {
      // 将 args[0].title 修改为 '我爱前端'
      args[0].title = '我爱前端';
      return args; // 返回修改后的参数
    });
}

})

然后重新编译一下：