微服务项目开发学成在线

Vue.js

1、Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发。

渐进式框架：Progressive，说明vue.js的轻量，是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js

当Vue与各种支持类库结合使用时，它也完全能够为复杂的单页应用提供驱动。学习参考： https://cn.vuejs.org/v2/guide/

2、ECMAScript（简称ES）是一种规范，我们平常所说的JavaScript是ECMAScript的一种实现。

ES6：http://www.ecma-international.org/ecma-262/6.0/

3、Vue.js的使用

1）使用Npm管理依赖，使用webpack打包工具对vue.js应用打包。大型应用推荐此方案。

2）Vue-CLI脚手架，使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。

vue.js是一个MVVM的框架，理解MVVM有利于学习vue.js

HBuilder可以快速构建vue小型项目 https://www.dcloud.io/
　

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>vue.js入门程序</title>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

        {{name}}

        <!‐‐ 在Vue接管区域中使用Vue的系统指令呈现数据

        这些指令就相当于是MVVM中的View这个角色 ‐‐>

        </div>

    </body>

    <script>

    // 实例化Vue对象

    // vm :叫做MVVM中的 View Model

    var VM = new Vue({

    el:"#app",//表示当前vue对象接管app的div区域

    data:{

    name:'北京程序员'// 相当于是MVVM中的Model这个角色

    }

    });

    </script>

</html>

使用vue.js的插值表达式

代码编写步骤：

v-model指令

    <body>

        <div id="app">

        <input type="text" value="1" /> +

        <input type="text" value="1" /> =

        2

        <button>计算</button>

        </div>

    </body>

Vue 提供v-model 指令，它可以轻松实现Dom元素和数据对象之间双向数据绑定，即修改Dom元素中的值自动修改绑定的数据对象，修改数据对象的值自动修改Dom元素中的值。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>vue.js常用指令的测试</title>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

        {{name}}

        <input type="text" v-model="num1" /> +

        <input type="text" v-model="num2" /> =

        {{Number.parseInt(num1)+num2}} <!--把字符串转数字int型-->

        <button>计算</button>

        </div>

    </body>

    <script>

    // 实例化Vue对象

    // vm :叫做MVVM中的 View Model

    var VM = new Vue({

    el:"#app",//表示当前vue对象接管app的div区域

    data:{

    name:'JavaEE',// 相当于是MVVM中的Model这个角色

    num1:1,

    num2:1

    }

    });

    </script>

</html>

v-model仅能在如下元素中使用：

input、select、textarea

components（Vue中的组件）

v-text指令

可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式（延迟加载导致的）闪烁的问题

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>vue.js常用指令的测试</title>

    </head>

    <body>

        <div id="app">

        <!-- {{name}} -->

        <span v-text="name"></span>

        <input type="text" v-model="num1" /> +

        <input type="text" v-model="num2" /> =

        <!-- {{Number.parseInt(num1)+num2}} -->

        <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>

        <button>计算</button>

        </div>

    </body>

    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    <script>

    // 实例化Vue对象

    // vm :叫做MVVM中的 View Model

    var VM = new Vue({

    el:"#app",//表示当前vue对象接管app的div区域

    data:{

    name:'JavaEE',// 相当于是MVVM中的Model这个角色

    num1:1,

    num2:1

    }

    });

    </script>

</html>

v-text

v-on:click指令

绑定（监听）一个按钮的单击事件 Vue对象的methods{ this.作用域关键字 }

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>vue.js常用指令的测试</title>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

        <!-- {{name}} -->

        <span v-text="name"></span>

        <input type="text" v-model="num1" /> +

        <input type="text" v-model="num2" /> =

        <!-- {{Number.parseInt(num1)+Number.parseInt(num2)}} -->

        <!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span> -->

        <span v-text="result"></span>

        <button v-on:click="change">计算</button>

        </div>

    </body>

    <script>

    // 实例化Vue对象

    // vm :叫做MVVM中的 View Model

    var VM = new Vue({

    el:"#app",//表示当前vue对象接管app的div区域

    data:{

    name:'JavaEE',// 相当于是MVVM中的Model这个角色

    num1:0,

    num2:0,

    result:0

    },

    methods:{

        change:function(){

            this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)

            alert("计算结果："+this.result)

        }

    }

    });

    </script>

</html>

v-bind指令

举例
<img v‐bind:src="data:imageSrc">

<div v‐bind:style="{ fontSize: size + 'px' }"></div>

可以将vue对象的数据（单向的）绑定在dom的任意属性中。

缩写形式

<img :src="data:imageSrc">

<div :style="{ fontSize: size + 'px' }"></div>

v-for指令

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js常用指令的测试</title>

    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<!--实现在body区域显示一个传智播客名称-->

<div id="app">

    <!--相当于MVVM的view视图-->

    <ul>

        <li v-for="(item,index) in list" :key="index" >{{index}}--{{item}}</li>

        <!-- <li v-for="(value,key) in user">{{key}}--{{value}}</li> -->

    </ul>

</div>

</body>

<script>

    //编写MVVM中的model部分及VM（ViewModel）部分

    var VM = new Vue({

        el:'#app',//vm接管了app区域的管理

        data:{//model数据

            list:[1,2,3,4,5,6]

        }

    });

</script>

</html>

v-if和v-else指令

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js常用指令的测试</title>

    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<!--实现在body区域显示一个名称-->

<div id="app">

    <!--相当于MVVM的view视图-->

    <ul>

        <li v-for="(item,index) in list" :key="index" v-if="index % 2 ==0">{{index}}--{{item}}</li>

        <li v-for="(value,key) in user">{{key}}--{{value}}</li>

        <li v-for="(item,index) in userlist" :key="item.user.uname">

            <div v-if="item.user.uname == 'Kang'" style="background: #00f50c">

                {{index}}--{{item.user.uname}}--{{item.user.age}}

            </div>

            <div v-else="">

                {{index}}--{{item.user.uname}}--{{item.user.age}}

            </div>

        </li>

    </ul>

</div>

</body>

<script>

    //编写MVVM中的model部分及VM（ViewModel）部分

    var VM = new Vue({

        el:'#app',//vm接管了app区域的管理

        data:{//model数据

            list:[1,2,3,4,5,6],

            user:{uname:'kang',age:26},

            userlist:[

                {user:{uname:'Kang',age:16}},

                {user:{uname:'Marlon',age:26}}

            ]

        }

    });

</script>

</html>

v-for使用正确的做法是你需要在每个数组元素里面设置一个唯一标识符作为:key 而不是用index

Vue2.0 v-for 中 :key 到底有什么用？回答 - 知乎 https://www.zhihu.com/question/61064119/answer/766607894

webpack

使用vue.js开发大型应用需要使用Webpack，它是一个前端资源的打包工具，可以将js、image、css等资源当成一个模块进行打包。

使用webpack有什么好处呢？
1、模块化开发
程序员在开发时可以分模块创建不同的js、 css等小文件方便开发，最后使用webpack将这些小文件打包成一个文件，减少了http的请求次数。
webpack可以实现按需打包，为了避免出现打包文件过大可以打包成多个文件。
2、编译typescript、ES6等高级js语法
随着前端技术的强大，开发中可以使用javascript的很多高级版本，比如：typescript、ES6等，方便开发，
webpack可以将打包文件转换成浏览器可识别的js语法。
3、CSS预编译
webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术，通过sass-loader、less-loader将Sass 和 Less的语法编译成浏览器可识别的css语法。

1、安装nodejs

传统意义上的 JavaScript 运行在浏览器上，Chrome 使用的 JavaScript 引擎是 V8，Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎，这样就可以使用javascript去编写一些服务端的程序。
在特定领域性能出色：非阻塞I/O分布式设备上的实时应用，比如用node.js实现消息推送、状态监控等的业务功能非常合适。

webpack基于node.js运行，首先需要安装node.js。

https://nodejs.org/en/download/

LTS Version: node-v9.11.2-x64 (includes npm)

C:\Program Files\Develop\nodejs\

安装完成检查PATH环境变量是否设置了node.js的路径。 node ‐v
NODE_HOME = C:\Program Files\Develop\nodejs

在PATH变量中添加：%NODE_HOME%;%NODE_HOME%\npm_modules;
https://github.com/nodejs/node-gyp#on-windows

2、配置NPM

npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，
npm的功能和服务端项目构建工具maven差不多，我们通过npm 可以很方便地下载js库，打包js文件。

node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本；
使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）。

C:\Users\kangy\AppData\Roaming\npm

NPM默认的管理包路径在C:/用户/[用户名]/AppData/Roming/npm/node_meodules，为了方便对依赖包管理，
我们将管理包的路径设置在单独的地方，本教程将安装目录设置在node.js的目录下，创建npm_modules和
npm_cache，执行下边的命令：

npm config set prefix "C:\Program Files\Develop\nodejs"

npm config set cache "C:\Program Files\Develop\nodejs\npm_cache"

、安装cnpm
npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像
下边我们来安装cnpm：
有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。
输入命令，进行全局安装淘宝镜像。

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

安装后，我们可以使用以下命令来查看cnpm的版本
cnpm -v

使nrm use XXX切换镜像
如果nrm没有安装则需要进行全局安装：cnpm install -g nrm

安装webpack

webpack安装分为本地安装和全局安装：
本地安装：仅将webpack安装在当前项目的node_modules目录中，仅对当前项目有效。
全局安装：将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个项目。全局安装需要添加 -g 参数。

1）本地安装：

只在独立的项目中使用webpack，需要进行本地安装，因为项目和项目所用的webpack的版本不一样。本地安装就会将webpack的js包下载到项目下的npm_modeuls目录下。
npm install --save-dev webpack
npm install --save-dev webpack-cli

）全局安装加-g，如下：
全局安装就将webpack的js包下载到npm的包路径下。
npm install webpack -g --force

3）安装webpack指定的版本：
本教程使用webpack3.6.0，安装webpack3.6.0：
进入webpacktest测试目录，运行：cnpm install --save-dev webpack@3.6.0

webpack可以将js分模块开发，开发完成对各模块代码打包成一个统一的文件。

webpack-dev-server开发服务器，它的功能可以实现热加载并且自动刷新浏览器。

1、安装webpack-dev-server

cnpm install webpack@3.6. webpack-dev-server@2.9. html-webpack-plugin@2.30. --save-dev

2、配置webpack-dev-server

在package.json中配置script

"scripts": {

"dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008"

},

--inline：自动刷新
--hot：热加载
--port：指定端口
--open：自动在默认浏览器打开
--host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

微服务项目开发学成在线_Vue.js与Webpack的更多相关文章

微服务项目开发学成在线_day02 CMS前端开发
1 Vue.js与Webpack研究开发版的浏览器:https://www.google.cn/intl/zh-CN/chrome/dev/ 前端的开发框架:微服务项目开发学成在线_Vue.js与W ...
微服务项目开发学成在线_day01_CMS服务端开发
05-CMS需求分析-什么是CMS 什么是CMS?CMS (Content Management System)即内容管理系统,不同的项目对CMS的定位不同.CMS有哪些类型? 每个公司对每个项目的C ...
微服务项目开发学成在线_day03 CMS页面管理开发
springboot引入mangodb依赖坐标:在spring-boot集成条件下,使用mongodb的DAO层开发. swagger查看接口文档,请求地址:http://localhost:3100 ...
阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程
提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...
阶段5 3.微服务项目【学成在线】_day04 页面静态化_16-页面静态化-模板管理-模板制作
这是轮播图的原始文件运行门户需要把 nginx启动起来单独运行轮播图.把里面的css的引用都加上网址的url 这就是单独访问到的轮播图的效果轮播图模板的地址: 阶段5 3.微服务项目[学成在线] ...
阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_03-用户认证技术方案-Oauth2协议
2.2 Oauth2认证 2.2.1 Oauth2认证流程第三方认证技术方案最主要是解决认证协议的通用标准问题,因为要实现跨系统认证,各系统之间要遵循一定的接口协议. OAUTH协议为用户资源 ...
阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_01-用户认证需求分析
1.1 用户认证与授权截至目前,项目已经完成了在线学习功能,用户通过在线学习页面点播视频进行学习.如何去记录学生的学习过程呢?要想掌握学生的学习情况就需要知道用户的身份信息,记录哪个用户在什么时间 ...
阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_04-Eureka注册中心-将服务注册到Eureka Server
cms相当于客户端配置客户端的信息后面加逗号分隔开 50102表示向两台eureka服务上报服务,如果有一台死掉了那么还可以上另外的一台去注册服务直接把ip注册到eureka 启动类加注解重 ...
阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_04-新增页面-服务端-接口开发
api接口定义方法 api的微服务里面.CmsPageControllerApi内定义add方法,返回类型是CmsPageResult CmsPageResult继承了ResponseResult R ...

随机推荐

竟然把Ruoyi在我自己的Eclipse编译成功，并能跑通了。。。。服了我自己了
前几天,下载最新ECLISPSE2019压缩包,解压缩成功,没提示不是免费:eclipse-jee-2019-12-R-win32-x86_64.zip然后我配置好了maven于是我1月2日晚一时兴起 ...
136-PHP 使用类名访问static修饰的类方法
<?php class test{ //定义一个类 public static function class_info(){ //定义类方法 return '这是一个用于测试的类.'; } } ...
PostAsync与GetAsync
using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; u ...
int, float, double 等转化为 string
一般有以下两种方法: QVecotr<int> vec; QString(QByteArray().setNum(vec.at(3))) float f; QString("%1 ...
Spark SQL 笔记
Spark SQL 简介 SparkSQL 的前身是 Shark, SparkSQL 产生的根本原因是其完全脱离了 Hive 的限制.(Shark 底层依赖于 Hive 的解析器, 查询优化器) Sp ...
【Android】家庭记账本手机版开发报告二
一.说在前面昨天完成了对记账本的账单的增删今天完善昨天的框架结构( 1.引入ViewModel管理数据.使MainActive 只管理界面.不再管数据了 2.引入AsyncTask.后台执行. ...
在mac电脑的terminal里该如何运行c语言
若要在 Mac 的终端中编译并运行 C 源代码,你首先需要安装 Command Line Tools,里面包含有 GCC 编译器.安装方法为: 打开终端,输入 gcc. 如果你没有安装 Command ...
基于UWB技术的DW1000芯片简单解析
近些年来随着物联网和机器人技术的大发展,精确定位技术的热度也随之攀升.目前精确定位的技术有很多,如基于wifi.RFID.zigbee.超声波.UWB等技术都可以实现精准定位.由于技术的不同,精度也不 ...
PHP实现简单的双色球机选号码
<?php header('Content-Type: text/html; charset=utf-8'); //PHP实现双色球机选号码 $red = range(1, 33);//初次设定 ...
cf 223B.Two Strings
神奇(%%题解) 题意:判断B串作为A串的子序列,不是不可以把A全部覆盖掉. 这样的话就是判断是不是A[i]最右匹配B的点和最左匹配B的点相交(重合)就好.(不重合的话B自然会空出中间一段,那么肯定不 ...

微服务项目开发学成在线_Vue.js与Webpack

Vue.js

webpack

微服务项目开发学成在线_Vue.js与Webpack的更多相关文章

随机推荐

热门专题