天天看点
返回

java 知识点 19（Vue、 element UI、axios、npm）

文章目录

    • 1、Vue基础语法
      • 1.1、学习Vue之前
      • 1.2、第一个vue项目
      • 1.3、模板语法
      • 1.4、v- 指令
        • 1.4.1、v-html
        • 1.4.2、v-show
        • 1.4.3、v- 里的if、else、for
        • 1.4.4、v-里的绑定 bind（：）、v-on（@ ）
        • 1.4.5、v-model
      • 1.5、Vue.component（自定义组件、标签）、props
      • 1.6、Axios网络通信
      • 1.7、网页加载完成前，出现模板语言的问题
      • 1.8、computed计算属性
      • 1.9、slot标签（插槽、挖坑）
      • 1.10、$emit 自定义事件
        • 1.10.1、$emit() 自定义事件属性
        • 1.10.2、利用this.$emit() 实现不同组件间传递方法
    • 2、Vue项目
      • 2.1、第一个vue-cli项目
      • 2.2、目录结构
      • 2.3、系统没安装Node.js，怎么运行npm指令
      • 2.4、vue-router路由
        • 2.4.1、不使用router，展示组件
        • 2.4.2、使用router，展示组件
        • 2.4.3、路由嵌套
        • 2.4.4、去除路径里的#
        • 2.4.5、添加404页面
        • 2.4.6、进入路由前、后执行
        • 2.4.7、重定向
      • 2.5、Vue + element UI
      • 2.6、传参
      • 2.7、vue + axios
    • 3、npm
      • 3.1、安装
      • 3.2、下载慢？使用淘宝镜像
      • 3.3、常用指令
      • 3.4、Vue-npm指令

1、Vue基础语法

vue官方文档： https://cn.vuejs.org/v2/guide/

vue是一个前端框架，

Vue.js 的核心是：采用简洁的语法将数据渲染进 DOM 。

vue只关心视图层（也就是页面范围）

1.1、学习Vue之前

css预处理器

css预处理器是用于样式设计的编程语言，最后会通过编译器转为css

常用css预处理器：SASS、LESS

原生js

版本ES5，全浏览器支持

版本ES6，当前主流版本，需要webpack打包成ES5支持

Axios

前端通信框架，可以代替Ajax

在idea里面安装vue插件

（安装完成之后重启idea就可以新建vue项目了）

java 知识点 19（Vue、 element UI、axios、npm）

我们更常用的是hbuilder，编辑前端代码

下载地址：https://www.dcloud.io/hbuilderx.html

1.2、第一个vue项目

和jq一样，可以下载vue源码使用，也可以使用<script ></script>标签

这里有各个版本的vue：https://cdn.baomitu.com/vue

另外几个:

<script src=“https://cdn.staticfile.org/vue/2.4.2/vue.min.js”>

<script src=“https://unpkg.com/vue/dist/vue.js”>

第一个vue实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '我的第一个vue实例'
  }
})
</script>
</body>
</html>

vue是一个mvvm框架（Model-View-ViewModel）

java 知识点 19（Vue、 element UI、axios、npm）

1.3、模板语法

java 知识点 19（Vue、 element UI、axios、npm）

el ：挂载的元素节点，值可以是 CSS 选择符，或实际 HTML 元素

data 用于定义属性，实例中属性为：message，可以有多个属性。

message：相当于变量名

{{ }} 用于输出对象属性和函数返回值。，这里面可以直接写js代码

{{5+5}}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}

1.4、v- 指令

1.4.1、v-html

v-html：输出html标签

<body>
<div id="app">
    <div v-html="message"></div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>输出html</h1>'
  }
})
</script>
</body>
java 知识点 19（Vue、 element UI、axios、npm）

1.4.2、v-show

v-show根据指令条件确定是否展示

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>

1.4.3、v- 里的if、else、for

v-if ： 根据表达式 的值(true 或 false )来决定是否插入 元素

java 知识点 19（Vue、 element UI、axios、npm）

v-else 的使用

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>

v-else-if

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>

v-for 循环列表

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

v-for 迭代对象

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '百度',
      url: 'http://www.baidu.com',
      slogan: '百度一下你就知道了'
    }
  }
})
</script>

for循环键值对(value, key)

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '百度',
      url: 'http://www.baidu.com',
      slogan: '百度一下你就知道了'
    }
  }
})
</script>

for循环键值对+索引

1.4.4、v-里的绑定 bind（：）、v-on（@ ）

v-bind：绑定属性

java 知识点 19（Vue、 element UI、axios、npm）
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on ：绑定事件、监听 DOM 事件

<a v-on:click="doSomething">

<form v-on:submit.prevent="onSubmit"></form>
           
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

绑定事件实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="aa">点击</button>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					message: '我的v-on实例'
				},
				methods:{
					aa:function(){
						alert(this.message);
					}
				}
			})
		</script>
	</body>
</html>
java 知识点 19（Vue、 element UI、axios、npm）

1.4.5、v-model

v-model ：数据双向绑定，（v-model变化message也变化）

java 知识点 19（Vue、 element UI、axios、npm）

1.5、Vue.component（自定义组件、标签）、props

定义组件（自定义标签）：实现一个标签显示一个数组

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="haha">
			<aa v-for="item in items" v-bind:bb="item"></aa>
		</div>
		<script>
			// props:['bb'] 接收bb，传给template里的bb
			Vue.component("aa", {
				props: ['bb'],
				template: "<li>{{ bb }}</li>"
			});
			var vm = new Vue({
				el: '#haha',
				data: {
					items: ["java", "python", "php"]
				}
			});
		</script>
	</body>
</html>
java 知识点 19（Vue、 element UI、axios、npm）

1.6、Axios网络通信

Axios（可以代替之前我们用的jQuery.ajax）

axios官网：http://www.axios-js.com/docs/index.html

导入（也可以直接下载下来用）

新建文件1.json

{
    "name":"网站",
    "url":"www.baidu.com",
    "num":3
}

新建网页（和1.json同目录）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios测试</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			{{ info }}
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						info: null
					}
				},
				mounted() {
					axios
						.get('1.json')
						.then(response => (this.info = response))
						.catch(function(error) { // 请求失败处理
							console.log(error);
						});
				}
			})
		</script>
	</body>
</html>
java 知识点 19（Vue、 element UI、axios、npm）

获取url的方法

java 知识点 19（Vue、 element UI、axios、npm）

1.7、网页加载完成前，出现模板语言的问题

出现这种情况的原因，vue是先加载网页，再进行模板字符处理。

java 知识点 19（Vue、 element UI、axios、npm）

1.8、computed计算属性

计算属性：简单理解为 计算出来的结果保存到属性上（内存中运行、虚拟dom）

作用：相当于缓存，不经常改变的东西可以放在计算属性里

实例：computed和methodsduibi

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios测试</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p>methods里面的：{{ aa1() }}</p>
			<p>computed里面的：{{ aa2 }}</p>
		</div>
		<script type="text/javascript">
			var vm = new Vue({ 
				el: '#app',
				data: {
					msg:"时间"
				},
				methods: {
					aa1: function(){
						return Date.now();
					}
				},
				computed: {
					aa2: function(){
						this.msg;
						return Date.now();
					}
				}
			})
		</script>
	</body>
</html>
java 知识点 19（Vue、 element UI、axios、npm）
java 知识点 19（Vue、 element UI、axios、npm）

1.9、slot标签（插槽、挖坑）

2.6.0 中， v-slot 指令取代了 slot 和 slot-scope

<slot></slot>，可以想象成jsp里面的挖坑填坑模型，slot标签就是用来占坑的（相当于占位符）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios测试</title>
		<script src="https://cdn.staticfile.org/vue/2.6.0/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<m>
				<n1></n1>
				<n2></n2>
			</m>
		</div>
		<script type="text/javascript">
			Vue.component("m",{
				template: 
					'<div>'+
					'<slot></solt>'+
					'</div>'
			});
			Vue.component("n1",{
				template: "<h1>我的坑位</h1>"
			});
			Vue.component("n2",{
				template: "<h2>不，也是我的坑位</h2>"
			});
			
			var vm = new Vue({ 
				el: '#app'
			})
		</script>
	</body>
</html>
java 知识点 19（Vue、 element UI、axios、npm）

1.10、$emit 自定义事件

1.10.1、$emit() 自定义事件属性

先回忆一下，html标签里的onclick事件

java 知识点 19（Vue、 element UI、axios、npm）

$emit(“自定义的事件属性名”)

$emit相当于就是一个起名的
java 知识点 19（Vue、 element UI、axios、npm）

新建自定义事件步骤

1、先新建一个自定义标签，在标签里面自定义一个事件触发方式的名字

2、使用vue对象新建一个方法

2、使用自定义标签，并在里面使用自定义事件（v-on:事件触发方式名 = “方法名”）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.staticfile.org/vue/2.6.0/vue.min.js"></script>
	</head>
	<body>
		
		<div id="app">
			<my-button v-on:abc="sayHi"></my-button>
		</div>
		
		<script type="text/javascript">
			Vue.component('my-button', {
				template: `<button v-on:click="$emit('abc')">点我</button>`
			});

			new Vue({
				el: '#app',
				methods: {
					sayHi: function() {
						alert('Hi!')
					}
				}
			});
		</script>
	</body>
</html>

1.10.2、利用this.$emit() 实现不同组件间传递方法

在不同组件里使用自定义事件

组件：就是自定义标签 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.staticfile.org/vue/2.6.0/vue.min.js"></script>
	</head>
	<body>

		<div id="app">
			<my-button v-on:haha="sayHi"></my-button>
		</div>

		<script type="text/javascript">
			Vue.component('my-button', {
				template: '<button v-on:click="abc">点我</button>',
				methods: {
					abc: function() {
						this.$emit('haha');
					}
				}
			});

			new Vue({
				el: '#app',
				methods: {
					sayHi: function() {
						alert('Hi!')
					}
				}
			});
		</script>
	</body>
</html>
java 知识点 19（Vue、 element UI、axios、npm）

2、Vue项目

之前我们写在html里面仅仅是vue基本使用，现在我们来构建vue项目。

2.1、第一个vue-cli项目

vue-cli是一个vue官方开发的vue项目模板。

开始创建项目：

系统环境：Windows
开发工具：HBuilderX

打开HBuilderX-文件-新建-项目

java 知识点 19（Vue、 element UI、axios、npm）

点击创建后，右下角会有个正在创建，需要稍等一会才能创建完成。

java 知识点 19（Vue、 element UI、axios、npm）
如果不使用HBuilderX，在系统环境下创建，需要安装Node.js

创建完项目后，点击构建项目

java 知识点 19（Vue、 element UI、axios、npm）

第一次构建会提示，使用内部命令还是外部，点使用内部就行。

构建完成就可以运行了

java 知识点 19（Vue、 element UI、axios、npm）

在浏览器访问: http://localhost:8080/

java 知识点 19（Vue、 element UI、axios、npm）

2.2、目录结构

这里是vue-cli 2.6.10的目录结构，不同的版本，目录结构可能不同。
java 知识点 19（Vue、 element UI、axios、npm）

更完整一点的如下

java 知识点 19（Vue、 element UI、axios、npm）

2.3、系统没安装Node.js，怎么运行npm指令

假设这里要安装vue-router

下面是安装指令，可以在cmd里运行，也可以在HBuilder控制台运行

npm install --save vue-router

如果你的系统（windows）里没有单独安装Node.js，直接在cmd里运行如上指令是会报错的。

不想安装Node.js，可使用HBuilder里面自带的npm插件。

首先你要找到HBuilder里面自带的npm插件在哪儿，

可以从之前构建项目时系统自动运行的指令里找，如下图

java 知识点 19（Vue、 element UI、axios、npm）
java 知识点 19（Vue、 element UI、axios、npm）

2.4、vue-router路由

安装vue-router

npm install --save vue-router

在main.js里面导入VueRouter

java 知识点 19（Vue、 element UI、axios、npm）

修改App.vue

java 知识点 19（Vue、 element UI、axios、npm）

运行

java 知识点 19（Vue、 element UI、axios、npm）

运行成功过后在浏览器访问：http://localhost:8080/

java 知识点 19（Vue、 element UI、axios、npm）

运行后可以不用关闭，往vue里面修改代码会自动载入

2.4.1、不使用router，展示组件

在src-components下新建vue文件haha.vue

java 知识点 19（Vue、 element UI、axios、npm）

如果不使用vue-router，如下图，这样写就可以连接到haha.vue

java 知识点 19（Vue、 element UI、axios、npm）

2.4.2、使用router，展示组件

如图是目录结构（haha.vue、hoho.vue、myRouter.js都是新建的，原项目HelloWorld.vue删除）

java 知识点 19（Vue、 element UI、axios、npm）

在main.js里注册路由

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

Vue.config.productionTip = false;

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

haha.vue

<template>
	<h2>这儿写点页面标签</h2>
</template>

<script>
	export default {
		name: 'h1',
	}
</script>

<style>
</style>

hoho.vue

<template>
	<h2>这是我写的第二个页面组件</h2>
</template>

<script>
	export default {
		name: 'h2',
	}
</script>

<style>
</style>

myRouter.js

import Vue from 'vue'
import myRouter from 'vue-router'
import h1 from '../components/haha.vue'
import h2 from '../components/hoho.vue'

//安装路由
Vue.use(myRouter);

//配置导出路由
export default new myRouter({
	routes:[
		{	
			// 访问路径
			path:'/h1',
			// 跳转组件
			component:h1
		},
		{
			path:'/h2',
			component:h2
		}
	]
});

App.vue

<template>
	<div id="app">
		<h1>haha</h1>
		<router-link to="/h1">页面1 </router-link>
		<router-link to="/h2">页面2 </router-link>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name: 'app'
	}
</script>

<style>
	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>

运行、访问

java 知识点 19（Vue、 element UI、axios、npm）

2.4.3、路由嵌套

java 知识点 19（Vue、 element UI、axios、npm）

2.4.4、去除路径里的#

java 知识点 19（Vue、 element UI、axios、npm）

2.4.5、添加404页面

新建NotFound.vue

java 知识点 19（Vue、 element UI、axios、npm）

导入js路由

java 知识点 19（Vue、 element UI、axios、npm）

2.4.6、进入路由前、后执行

java 知识点 19（Vue、 element UI、axios、npm）

vue里面

java 知识点 19（Vue、 element UI、axios、npm）
java 知识点 19（Vue、 element UI、axios、npm）

2.4.7、重定向

java 知识点 19（Vue、 element UI、axios、npm）

2.5、Vue + element UI

element和bootstrap一样，里面有很多的ui 样式，比bootstrap看起来清爽一些

element官网：https://element.eleme.cn/2.0/#/zh-CN/component/installation

使用element需要安装 element-ui依赖

npm i element-ui -S

如果想直接在html中使用element-ui，可以使用如下标签引入

<!-- 引入样式 -->

<link rel=“stylesheet” href=“https://unpkg.com/element-ui/lib/theme-chalk/index.css”>

<!-- 引入组件库 -->

<script src=“https://unpkg.com/element-ui/lib/index.js”>

在vue项目中使用element-ui需要在main.js 中写入以下内容

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
java 知识点 19（Vue、 element UI、axios、npm）

接下来，在 element-ui中随便找一个我们想用的组件源码

java 知识点 19（Vue、 element UI、axios、npm）

然后新建一个vue组件把源码复制进去

java 知识点 19（Vue、 element UI、axios、npm）

在路由中加入

java 知识点 19（Vue、 element UI、axios、npm）

在主页里就可以使用了

具体的使用方法可以查看官方文档

vue的template里面注意，vue元素不能直接在template标签下

不然会报错，一般我们在里面写个div，再写元素

2.6、传参

vue里：传递键值对

java 知识点 19（Vue、 element UI、axios、npm）

js：url带参

java 知识点 19（Vue、 element UI、axios、npm）

获取参数

java 知识点 19（Vue、 element UI、axios、npm）

另外还可以通过props传参

js

java 知识点 19（Vue、 element UI、axios、npm）

vue

java 知识点 19（Vue、 element UI、axios、npm）

2.7、vue + axios

axios安装

npm install axios -s

在main.js里添加

java 知识点 19（Vue、 element UI、axios、npm）

写一个json

java 知识点 19（Vue、 element UI、axios、npm）

vue里获取数据

java 知识点 19（Vue、 element UI、axios、npm）

运行、访问

java 知识点 19（Vue、 element UI、axios、npm）

3、npm

npm中文文档：https://www.npmjs.cn/getting-started/what-is-npm/

npm：是js世界的下载、安装、管理工具，功能像linux里的yum一样。

3.1、安装

安装npm：

下载地址：https://nodejs.org/en/download/
java 知识点 19（Vue、 element UI、axios、npm）
如果使用Hbuilder，里面自带npm
大致路径是：HBuilderX\plugins\npm\npm.cmd
           
如果安装了node.js，里面也自带npm

3.2、下载慢？使用淘宝镜像

像maven一样，npm也有一个淘宝镜像

安装镜像

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

安装完成以后所有npm的指令就可以用cnpm代替

3.3、常用指令

安装、卸载、更新软件包

安装XXX包
npm install -s XXX

卸载XXX
npm uninstall XXX -S

更新XXX到最新版本
npm install [email protected] --save-dev-g

更新XXX到指定版本
npm install [email protected]

更新npm

更新全局包：
npm update -g

更新生产环境依赖包：
npm update --save

更新开发环境依赖包：
npm update --save-dev

查看全局依赖包

npm ls -g

-s或- -save：表示更新到本项目

-g或- -global：表示更新到全局

3.4、Vue-npm指令

安装vue脚手架

npm install vue-cli –g

进入目录

vue init 目录名

运行vue测试 server

npm run dev

构建vue项目

npm run build

运行vue

npm run server
Java系列 vue javascript npm
上一篇: 关于chrome控制台那些事输出信息到控制台console.logconsole.tableconsole.assertconsole.countconsole.dir
下一篇: spring-cloud之openfeign

继续阅读