1、vue基本用法

本节介绍Vue如何操作DOM元素文本、HTML内容、属性、如何进行条件循环处理、表单双向绑定、事件绑定方式。

创建vue实例

new Vue({ 
 el: “绑定的DOM元素”,
 data:{
   attr:value
}, 

methods:{
  methodName:function(){}
}

})
  1. 插入文本使用模板语法双大括号{}
  2. 插入HTML内容使用指令v-html=”data”
  3. HTML属性绑定使用指令v-bind:属性名 或者简写 :属性名
  4. 使用指令v-if、v-for进行条件和循环处理
  5. 使用指令v-model实现表单双向绑定
  6. 使用指令v-on:事件名或简写 @事件名实现DOM元素的事件绑定。

图片 1.png图片 2.png图片 3.png

2、计算属性和侦听属性

需求:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化。通过计算属性得到。

比如:data有2个数据属性 firstName lastName ,而我们需要通过firstName和lastName结果得到fullName显示。

2.1 计算属性computer:

将fullName属性放在计算属性computer中

图片 11.png

2.2 方法methods,通过调用方法达到同样效果:

图片 21.png

2.3 computer和methods区别:

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 firstName和lastName还没有发生改变,多次访问 fullName计算属性会立即返回之前的计算结果,而不必再次执行函数。

我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A ,它需
要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

2.4 侦听属性watch

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性

当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。

图片 31.png

2.5 watch、computer、methods的区别?

  1. watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。官方更推荐使用计算属性而不是命令式的 watch 回调。

  2. 计算属性和侦听属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

  3. 对methods:methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不像watch和computed那样,“自动执行”预先定义的函数。

  4. watch和computed各自处理的数据关系场景不同

    watch场景:一个数据影响多个数据
    computed场景:一个数据受多个数据影响
    相比于watch/computed,methods不处理数据逻辑关系,只提供可调用的函数

3、vue生命周期

图片 4.png图片 5.png图片 41.png

4、new vue()option选项详解

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。

var vm = new Vue({

  // 选项

})

vue示例的option有哪些?

当创建一个 Vue 实例时,你可以传入一个***选项对象***。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考,你也可以在 API 文档中浏览完整的选项列表。

https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

图片 10.png

5、组件基础

全局组件和局部组件

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展***HTML***元素,封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:

图片 101.png图片 11.png

5.1组件名规范:

图片 12.png

5.2组件中data必须是一个函数

图片 13.png

5.3全局组件

图片 14.png

5.4局部组件

图片 15.png

示例:

图片 111.png
图片 121.png

4.5父子组件传值-通过props传递数据

父子通讯中最常见的数据传递方式就是通过props传递数据,就好像方法的传参一样,父组件调用子组件并传入数据,子组件接受到父组件传递的数据进行验证使用

props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值
prop 的定义应该尽量详细,至少需要指定其类型。

图片 17.png图片 16.png图片 151.png图片 20.png图片 131.png图片 141.png

4.6子父组件传值-$emit()事件

有些时候可能要求我们子组件和父级组件进行沟通,在子组件中无法直接修改父组件的data属性,需要通过两件事件完成:

1.子组件可以通过调用内建的 emit方法并传入事件名称来触发一个事件

2.父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件,执行事件要做的事情...

例子:在子组件中通过按钮告诉父组件我们想要更新字号,通知父组件更新data数据postFontSize

图片 18.png图片 19.png

4.7template标签

在component的template中书写大量的HTML元素很麻烦。
Vue提供了template标签,在template标签中定义HTML模板。然后通过ID指定到组件内的template属性上;

图片 201.png

6、vue单文件组件

图片 7.png图片 21.png图片 22.png

概述

Vue.js 最受欢迎的特性之一就是 单文件组件(SFC)。它可以将模板和组件定义全部放在一个文件里。里面的模板会被 vue-loader 编译成 render 函数,因此也可以获得最佳的运行时性能。

单文件组件是一个.vue文件,比如Checkbox.vue,在 template 标签中定义模板, script 标签中定义组件属性和逻辑,style标签中定义组件样式,然后就可以在应用中导入使用了。

只要你习惯使用 Vue CLI 或者其他构建工具,单文件组件是个不错的选择

vue单文件组件中,包含3个部分:

这是一个文件名为 Hello.vue 的简单实例:

图片 8.png

①template标签

Vue提供了template标签,在 template 标签中定义HTML模板

注意:一个组件下只能有一个并列的 div

②script标签

在script 标签中定义组件属性和逻辑,将其导出

③style标签

在style标签中定义组件样式

图片 23.png

当前在我们的HTML项目中,无法运行.vue文件,需要npm命令。

图片 9.png

未来在vue-cli脚手架项目中基于组件化开发,采用单文件组件开发。

7、使用vue-cli脚手架项目环境准备

图片 24.png

在实际项目中更多的是使用vue-cli脚手架创建vue项目

图片 25.png

7.1npm

npm:node Package Manager(包管理器)。

vue-cli的运行依赖于node的npm管理工具实现。

新版node.js集成npm,即安装node.js之后就可以使用npm。

7.2Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 nnvmnvm-windows 在同一台电脑中管理多个 Node 版本。

7.3安装Node

下载地址:http://nodejs.cn

图片 27.png

下载完毕后,可以安装node,建议不要安装在系统盘(如C:)。

图片 28.png

安装之后打开cmd窗口

输入node -v 回车,查看node版本号,显示版本号即安装成功。
输入npm -v回车,查看npm版本号。

图片 29.png

7.4配置npm模块存储路径和缓存存储路径

1、在nodejs安装路径下,新建node_global和node_cache两个文件夹,用于存放npm的全局模块的存放路径以及cache缓存路径

图片 30.png

2、配置npm的全局模块的存放路径以及cache缓存路径

设置全局模块存放路径

npm config set prefix "D:\nodejs\node_global"

设置缓存路径

npm config set cache "D:\nodejs\node_cache"

图片 31.png

设置成功后,以后用命令npm install XXX -g安装的模块就在存放在D:\nodejs\node_global里

7.5 配置系统环境变量

说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径。

1、编辑系统变量PATH中添加

“D:\nodejs\node_global” 这个npm安装的模块的存储路径(具体要根据安装的路径填写)

图片 32.png

2、添加系统变量NODE_PATH

D:\nodejs\node_modules表示node所安装的模块都会存放在此目录下

图片 33.png

7.6基于 Node.js 安装cnpm(淘宝镜像)

npm作为国外的node仓库安装工具,国内用户在安装相关的资源的时候,会出现安装失败,以及速度很慢的情况。为了解决npm安装的问题,国内出现了很多npm的镜像网址,taobao的npm镜像算是使用频率比较高的了。

  1. 使用阿里定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org

2.检测cnpm版本,如果安装成功可以看到cnpm的基本信息。

cnpm -v

图片 34.png

7.7安装Vue

cnpm install vue -g

图片 35.png

7.8安装vue命令行工具,即vue-cli 脚手架

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,可简化项目构建的过程,提供了扩展其他vue组件的功能。

1.安装vue-cli

cnpm install vue-cli -g

图片 36.png

2.检查vue-cli脚手架版本,如果安装成功可以看到vue-cli脚手架的版本信息

$ vue -V 
    或
$ vue --version

图片 37.png

(注意以上查询结果不是vue的版本,vue版本号在项目中的package.json文件中"dependencies"中的vue属性后的版本号)

通过以上3-8步骤,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建vue项目。

图片 38.png

8、通过vue-cli工具构建vue项目

1.在本地磁盘中创建一个存放vue项目的工作空间,比如D:\vue-project

图片 39.png

2.切换到指定的工作空间中通过命令构建项目

在当前存储项目的目录下输入下载项目模板的命令

【下载模板】

$ vue init webpack-simple 项目名
$ vue init webpack 项目名

例子:

$ vue init webpack vue-cli-demo

注意:

webpack-simple和webpack 是项目模板,分别为简单模式和完全模式,简单模式仅包含基于vue.js开发必要的一些资源和包,使用该模式可以快速地投入到开发。完全模式则还包括ESLink、单元测试等功能。

我们上课中直接使用完全模式的模板。

图片 40.png

【进入交互页面,根据自己情况选择】

Project name vue-cli-demo # 项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters)。

Project description A Vue.js project # 项目描述,随便写
Author # 作者名称
Vue build standalone # 我选择的运行加编译时
Runtime + Compiler: recommended for most users
Install vue-router? Yes # 是否需要路由
Use ESLint to lint your code? NO# 是否使用 ESLint 作为代码规范.
Pick an ESLint preset Standard # 我选择的是标准风格
Standard
Set up unit tests Yes # 是否安装单元测试,我选择yes
Pick a test runner jest # 测试模块,按需选择,我选择jest
Setup e2e tests with Nightwatch? Yes # 是否安装e2e测试,我选择Yes
Should we run npm install for you after the project has been created? (recommended) npm # 包管理器,我选的NPM

图片 41.png

【安装完成后,显示】

图片 42.png

3.运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来启动。

【命令行进入项目所在的位置】

cd D:\vue-project\vue-cli-demo

【启动项目,根据package.json中的数据来启动】

npm run dev 

图片 43.png

【浏览器访问:】

http://localhost:8080/

注:这里是默认服务启动的是本地的8080端口,所以请确保你的8080端口不被别的程序所占用。若8080被占用,需要修改一下当前vue项目的配置文件 config里的index.js的 port。

图片 44.png

图片 45.png

【关闭项目】

 Ctrl + C

【项目打包上线】

npm run build

将打包后生成的dist 目录中的文件拷贝到服务器的相应地址即可(比如tomcat的webapps目录下)。

本篇文章到此结束,希望对你的学习有帮助!

src=http___nimg.ws.126.net__url=http3A2F2Fdingyue.ws.126.net2F20212F05212Fb347b953j00qtf8ji000rc000hs00hsc.jpgthumbnail=650x2147483647quality=80type=jpgrefer=http___nimg.ws.126.jfif

上一篇 下一篇