vue.js入门教学

最新推荐文章于 2024-09-25 00:15:00 发布

22级计算机应用技术一班刘聪

最新推荐文章于 2024-09-25 00:15:00 发布

阅读量2.7k

点赞数 47

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_78534023/article/details/135367238

版权

3、执行 vue create 命令之后，可看到如下所示界面

4、vue脚手架项目目录说明

1、项目创建成功之后，可以看到项目的目录结构如图所示：

一.vue.js简单介绍

1.什么是vue.js

web开发简史：在1995年前互联网早期阶段，开发复杂、功能简单、无前后端这一说法；

1995~2005年服务器模板时代，以ASP、JSP、PHP为代表，所有业务逻辑都写到页面中，当时的页面简单，基本逻辑实现都由服务端执行；

2006~2015年服务器MVC时代，以java SSH、ASP.NET MAC等为代表、此时产生前后端的概念，但是前后端不分离，特点是：业务逻辑分层；

2012后前后端分离时代，JavaScript进入飞速发展阶段，2014年vue.js应运而生，前后端开发模式逐渐成为主流。

基本概念：vue.js是一套基于前后端分离模式、用于构建用户界面的渐进式框架，他只关注视图层的逻辑、采用自底向上、增量式开发的设计

2.创建基本的vue实例

二.常用的基础指令

1.基本方法指令

1.el

在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

2.data

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，data数据对象有以下两种写法：

1.对象（Object）的形式

<div id="app">{{content}}</div>

  <script>

  var app = new Vue({

  el: "#app",

  data: {

  content: "Mustache表达式通过data为对象获取content的值"

}

})

  </script>

2.函数（Function）的形式

<div id="app">{{content}}</div>

  <script>

  var app = new Vue({

  el: "#app",

            // 这是下面function的简写形式

            data(){

              return {

                name:'张三',

                age:18

              }

          },

             // 另一种写法

// data:function() {

  // return {

  // name: '张三',

  // age: 18,

  // sex: '男'

  // }

  // },

})

  </script>

3.methods

概述：methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。

在methods方法中访问 data 的数据，可以直接通过 this.属性名的形式来访问，this表示Vue实例

示例：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

1、第一步引入vue.js

  <script src="../js/vue.js"></script>

</head>

<body>

2、第二步

   <div id="app">

  <div>

{{msg}}

  <p>tip:点击按钮把“旧文本”字样修改为“新文本”</p>

  

  <button v-on:click="btnClick">点击</button>

  

  

  </div>

  </div>

  <script>

3、第三步

  var app = new Vue({

  el: "#app",

  data: {

  msg: "旧文本"

},

// 页面的点击事件都需要放到  methods 里面

  methods:{

  btnClick(){

  this.msg="新文本"

}

}

})

  </script>

</body>

</html>

2.常用指令

1.v-text

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

2.v-html

v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。

3.v-bind

v-bind指令用于实现单向动态数据绑定。

前面学习的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。

绑定单个动态类名时：

绑定多个动态类名时：

同时绑定静态+动态类名时：

在v-bind指令中使用逻辑判断时：

4、v-on

v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。

5、v-for

v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。

for循环普通数组

for循环对象数组

for循环对象

for循环整数

6、v-model

v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。

v-model修饰符

v-model有3个修饰符，分别是lazy、number、trim

1、lazy

v-model默认是在input事件中同步输入框中的内容，也就是一旦数据发生改变，对应的data中的数据也会发生改变。如果使用lazy修饰符，可以让数据在失去焦点或者回车时才会更新。

2、number

默认情况下，在输入框输入数字的时候，默认会把输入的内容当作字符串类型处理，如果加上number修饰符，就可以让你在输入数字的时候将内容转为number类型。

3、trim

trim修饰符可以去除输入内容左右两边的空格。

7、v-if和v-else

v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。

v-if的使用一般有两个场景：

1.通过条件判断展示或者隐藏某个元素或者多个元素；

2.进行视图之间的切换。

v-else

三.脚手架的安装

1、Vue项目化

概念：Vue Cli是一个基于Vue.js进行快速开发的完整系统，是一组用于快速原型设计、简化应用程序搭建和进行高效项目管理的工具，开发者可以专注在撰写应用上，而不必花很多时间处理配置的问题。

（1）Vue CLi由三个主要的工具组成，分别是：

1、CLI

CLI是一个npm包，通过Vue.js命令提供核心功能。它可以轻松构建一个新项目，同时，如果你希望通过可视化界面来构建（创建）项目的话，你可以运行vue ui命令行来打开可视化界面。2、CLI Service

CLI Service是一个开发依赖项，安装在脚手架项目当中，可以帮助开发项目、打包项目和检查项目的一些相关配置。

3、CLI插件

CLI插件也是npm的包，可以为项目提供一些额外的功能，在开发的过程中，可以通过命令行vue add添加CLI插件，比如路由插件(vue-router)、vuex插件等等。

1、vue脚手架项目环境配置

1.软件安装

（1）前去官网下载安装node，下载之后一步步默认安装即可

PS：检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

2、npm概述

1、概述：

npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题，只要电脑成功安装了node，npm也会自动安装在电脑上。

使用命令行查看npm是否安装成功

2、使用场景需求：

2.1、从npm服务器下载别人编写的第三方包到本地使用。

2.2、从npm服务器下载并安装别人编写的命令程序到本地使用。

2.3、将自己编写的包或命令行程序上传到npm服务器供别人使用。

3、npm常用命令行：

npm install：安装项目所需要的全部依赖包，需要配置package.json文件。

npm uninstall：卸载指定名称的包。

npm install 包名：安装指定名称的包。

npm update：更新指定名称的包。

npm run serve：项目启动。

npm run build：项目构建。

npm config get registry ：查看当前npm下载包使用的是哪一个源。

cmd命令行输入指令安装淘宝镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、使用VueCli快速构建项目

1、vue cli 脚手架的安装

// 通过npm全局安装@vue/cli脚手架 @3.10表示下载某个指定版本，如果不写，则下载最新版本

          npm install -g @vue/cli



PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装

//安装淘宝镜像的命令行

          ① npm install -g cnpm --registry=https://registry.npmmirror.com

  // 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

          ② cnpm install -g @vue/cli



//PS：如需要卸载vue/cli包，可执行以下命令行

                         npm uninstall -g @vue/cli

成功安装界面：

2、vue create 命令创建项目

// helloworld 是项目名，可自行定义

vue create helloworld

3、执行 vue create 命令之后，可看到如下所示界面

在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：项目创建成功之后，根据界面提示，可以执行如下两个命令行，进入项目目录，启动项目：