初见Vue

最新推荐文章于 2023-08-01 15:27:22 发布

Powerstot

最新推荐文章于 2023-08-01 15:27:22 发布

阅读量431

点赞数

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

本文链接：https://blog.csdn.net/weixin_45813747/article/details/118093163

版权

本文介绍了Vue的基础知识，包括npm的使用、Vue的安装、双向绑定、事件处理、生命周期和钩子函数。讲解了Vue实例的创建、模板与元素、数据响应系统以及v-model、v-on等指令的运用，还提到了axios在Vue中的应用，为初学者提供了一个全面的入门教程。

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

包资源管理器npm

概述

Node Package Manager，类似于后端的 maven，是一个node.js 的管理和分发工具，可以根据配置 package.json 下载 js 库
node.js 集成了 npm 工具，在命令提示符输入 npm -v 可查看当前 npm 版本
安装 js 库方式
- 本地安装：将下载的模块（js库）安装到当前项目目录
- 全局安装：将下载好的模块安装到本地，全局的安装目录（npm root -g查看本地安装目录位置）

切换镜像源

使用nrm方式切换镜像库

npm install nrm -g：全局安装 nrm 到 npm
nrm ls查看当前默认使用的下载镜像
nrm use taobao切换到taobao的镜像

使用cnpm方式安装

npm install -g cnpm --registry=https://registry.npm.taobao.org 下载cnpm
cnpm -v 查看cnpm版本
cnpm install 要下载的js库下载对应js库(一般只有在下载模块的时候才使用cnpm，其他情况还是使用npm)

删除node_modules文件夹

npm install rimraf -g
rimraf node_modules

Vue概述

MVVM通过视图与模型的双向绑定，简化前端操作。Vue是一款前端渐进式框架，可以提高前端开发效率

Vue安装初步使用

安装方式
- 引用在线的 vue.js
- 离线下载好的 vue.js
- 使用 npm 下载 vue.js
使用 npm 下载 vue.js (在idea的terminal中或在项目目录下cmd中)

#初始化
npm init -y

#下载vue模块
npm install vue --save

双向绑定和事件处理

步骤：
- 创建页面，初始化vue，将vue.js文件拖入html自动生成引用代码
- 使用 { {}} 获取显示数据
- v-model 实现双向绑定（即：改变一处另一处也改变，用一个引用）
- v-on:click 事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试1</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num"><button v-on:click="num++">点我</button>
    <h1>{
  {name}} Cool ! 有{
  {num}}岁了</h1>
</div>
</body>