Vue+elementUI的学习笔记

vue

重点

网络通信 axios

页面跳转 vue_router

状态管理 vuex

Vue-ui：ICE

关注度分离原则

单页面应用

SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的

前端为主的MV*时代

MVC（同步通信为主）：Model、View、Controller

MVP（异步通信为主）：Model、View、Presenter

MVVM（异步通信为主）：Model、View、ViewModel

集大成者：MVVM+Dom

ViewModel：能够观察到数据的变化，并对视图对应的内容进行更细；能够监听到视图的编号，并能够通知数据发生改变

Vue的集成优点

Vue吸取了Angular（模块化）和React（虚拟Bom）的长处，并拥有自己独特的功能，如：计算属性

语法

v-bind 缩写 :

v-on 缩写 @

<script scoped>当前的页面生效

简单的例子

例子1：

<div>{{message}}</div>

<script> src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
var vm = new Vue({
	el:"#app",
	data:{
		message:"hello"
	}
});
</script>

例子2：

<div id="app">
	<input type="text" v-model="message">{{message}}
</div>

<script>
var vm = new Vue(){
	el:"#app",
	message:'"123"
}
</script>

例子3：

<select  v-model="selected">
	<option value="disable">---请选择---</option>
	<option>男</option>
	<option>女</option>
</select>
<span>您选择的是：{{selected}}</span>

<script>
var vm = new Vue(){
	el:"#app",
	data:{
		selected:''
	}
}
</script>

例子4：

<div id="app">
	<命名 v-for="item in items" v-bond:命名2="item">	</命名>
</div>

Vue.component("命名",{
	props:['命名2']
	template:'<li>hello</li>'
});

var vm = new Vue({
	el:"#app"
	data:{
		items:['java','vue','linux']
}
});

用于用户刷新页面时不会显示{{}}这种格式，直接变成瞬间的白屏加载

<style>
	[v-clock]{display:none;}
</style>

计算属性

计算出来的结果，保存在属性中、内存中运行：虚拟Dom

插槽

<slot name=""></slot>

事件分发

this.$emit('','')

CommonsJS

服务器端的 NodeJS遵循CommonsJS规范，该规范核心思想是允许模块通过require方法来同步加载所需依赖的其它模块，然后通过exports或model.exports来导出需要暴露的接口

require("model");

require("../module.js");

export.doStuff = function(){};

module.exports = someValue;

安装的命令

常用命令

• 下载名为test的vue文件

  vue init webpack test

• 安装粒子背景

  npm install --save vue-particles

  import VueParticles from 'vue-particles'
  Vue.use(VueParticles);
  

• 安装vue-router

  npm install vue-router --save-dev

  import router from './router'
  

• 安装elemenet ui

  npm i element-ui -S

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

• 安装依赖

  npm install

• 安装SASS加载器

  cnpm install sass-loader node-sass --save-dev

  npm install sass-loader@10.2.0 node-sass@6.0.1 --save-dev --force

• 安装axios

  npm install axios -S

• 安装echarts

  npm install echarts@4.9.0 --save

  import echarts from 'echarts'
  Vue.prototype.$echarts = echarts;
  

• 启动测试

  npm run dev(用命令行创建启动)
  npm run serve(用Vue可视化页面创建启动)

ES6

• 命令行

  npm install webpack -g

  npm install webpack-cli -g

• Teminal

  webpack打包ES6

  webpack --watch监听webpack

命令解释：

-g是将模块安装到全局，具体安装到磁盘哪个位置，要看npm config prefix

–save是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写

–save-dev是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-S为该命令的缩写

配置webpack.config.js

entry：入口文件，指定WebPack用哪个文件作为项目的入口

output：输出，指定WebPack把处理完成的文件放置到指定路径

module：模块，用于处理各种类型的文件

plugins：插件，如：热更新、代码重用等

resolve：设置路径指向

watch：监听，用于设置文件改动后直接打包

views放视图组件、components放功能组件

把用户登录的账号同步到主页面

Main.vue

<router-link to="{name:'/userMain',params:{id:1}}"></router-link>

<el-main>111
  <router-view></router-view>
</el-main>

index.js

{
  path: '/main/:name',
  name: 'main',
  component: Main,
  props:true,
  children:[{
    path: '/userMain/:id',
    component: UserMain,
    props:true
  }]
},

export default new VueRouter({
  mode:'history'//解决浏览器#号
}];

UserMain.vue

<template>
  <div>{{$route.params.id}}</div>
</template>

触发事件

export default {
  props:['id'],
  name: "UserMain",
  beforeRouteEnter:(to,from,next)=>{
    console.log("进入路由之后");
    next();
  },
  beforeRouteLeave:(to,from,next)=>{
    console.log("进入下一路由之后");
    next();
  }
}

参数说明

to：路由将要跳转的路径信息

from：路由跳转去的路径信息

next：路由的控制参数

• next()跳转下一页面
• next(’/path’)改变路由的跳转方向，使其跳到另一个路由
• next(false)返回原来的页面
• next(vm=>{})仅在beforeRouteEnter中可用，vm使组件实例

经验总结

1、el-menu标签添加router属性

2、菜单的跳转路径由index属性来决定

3、主页面要设置标签

4、路由js设置父子页面的关系

5、一个vue页面只能有一个主<div>，其他<div>要嵌套在一个主<div>中