vue狂神说简单笔记

基础

逻辑

• 循环
• 判断

事件

• 浏览器事件：window document
• Dom事件：增，删，便利，修改节点元素内容
• jQuery

视图

• html
• css：难点：BootStrap

通信

• Ajax（xhr（原生js实现））

可视化布局拖拽模块

https://www.bootcss.com/p/layoutit/

css预处理器

• less
• sass

前端打包工具：webpack

TypeScript（自动生成js）

M：模型 V：视图 C：控制器

View：JSP{{}}

DATA：

vm：数据双向绑定

虚拟DOM：利用内存；

计算属性 --> vue特色

Vue：渐进式JavaScript框架

集大成者：MVVM+DOM

大前端时代：后端：轻松、分布式，为服务，大数据

axios (推荐)：前端通信框架；

---

UI框架

• Ant-Design
• ElementUI
• BootStrap
• AmazeUI（上手轻松）

---

JavaScript构建工具

• Babel（用于TypeScript较多）
• WebPack

vue官网：基于vue-element-admin

---

第一个vue程序

MVVM架构

通过ViewModel将view与model进行绑定

---

IDEA开发Vue 插件（vue）

---

导入

vue.js cdn

Day22.3.3

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

var vm = new Vue({
				el:"#app",
				data:{
					message:"hello,world"
				}
			})

---

基本语法

v-开头的都叫做指令，它会渲染Dom

数据绑定：v-bind

---

基础

判断

v-if

示例：

<h1 v-if="ok==='A'">Yes</h1>
<h1 v-else-if="ok==='B'">Yesyes</h1>
<h1 v-else>No</h1>

循环

v-for

示例：

<h1 v-for="item in items">
{{item.message}}
</h1>

---

事件绑定

Tips：方法必须定义在vue对象中

方法绑定：v-on:

var vm = new Vue({
				el:"#app",
				data:{
					message:"hello,world"
				},
				methods:{ //方法必须定义在vue对象中，v-on；事件
					filterUnits
				}
			})；

---

双向绑定

数据双向绑定（略）

视图发生变化时，数据也会更着变化 双向绑定：v-model: 可以通过该绑定实时显示相应的值

---

vue的组件

定义一个vue组件

组件定义：

Vue.component("lvshuai",{
				props:['lv'],
				template: '<li>{{lv}}</li>'
			});

<lvshuai v-for="item in items" v-bind:lv="item"></lvshuai>

Tips:注意组件分隔标点，标点缺失，则组件无法运行成功

---

网络通信

axios：

官网文档：

http://www.axios-js.com/zh-cn/docs/

cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在vm里面添加

mounted() {//钩子函数
					axios.get('data.json').then(response=>(console.log(response.data)));
				},

返回数据后，将数据填入data中，以进行数据上的渲染

示例：

data(){
					return{
						//请求的返回参数合适，必须和json字符串一样
						info:{
							name: null,
							url: null
						}
					}
				},
				mounted() {//钩子函数
					axios.get('data.json').then(response=>(this.info = response.data));
				},

data中的数据可以不写，但写了的话不能写错！

---

解决数据加载过程中的模版显示问题

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

---

计算属性

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

computed

methods,computed方法不能同名，重名之后，只会调用methods中的方法

---

插槽（实现动态拔插）

slot

示例：

Vue.component("todo",{
				template:'<div>\
					<slot></slot>\
					<ul>\
						<slot></slot>\
					</ul>\
					</div>'
			});

插槽实现：

键值对应：主插槽中要填入需要插入的插槽数据，并且在页面html数据中也需要进行slot绑定。

---

自定义事件内容分发

组件调用自定义事件（否则只能使用当前的组件中写的方法）

this.$emit()

---

真实开发

vue-cli脚手架

Vue_cli官方提供的脚手架，用于快速生成vue模版

需要环境

• nodejs

  安装淘宝加速器

  npm install cnpm -g
  

• 安装vue-cli

  npm原生

  npm install vue-cli -g
  

  淘宝镜像

  cnpm install vue-cli -g
  

  测试是否安装成功

  vue list
  

  一般使用webpack创建vue程序

• 创建一个vue项目

  vue init webpack myvue
  

  • 默认名字：myvue
  • 项目描述
  • 作者
  • Vue build standalone（第一个）

• 初始化一个vue项目

  cd myvue
  npm install		//安装
  npm run dev		//启动
  
  

webpack学习使用

本质上，webpack是一个现代的JavaScript打包器

• 安装webpack

  npm install webpack -g
  npm install webpack-cil -g
  

• 测试是否安装成功

  webpack -v
  webpack-cil -v
  

使用webpack

1. 创建项目
2. 创建一个名为modules的目录，用于防治JS模块等资源文件
3. 在modules下创建模块文件，如hello.js，用于编写js相关资源代码

---

Vue：vue-router路由

官方路由管理器

安装vue-router

npm install vue-router --sava-dev	//会保存到config里面

使用

import VueRouter from 'vue-router'

//显示声明使用vuerouter
//安装路由
Vue.use(VueRouter)

//配置导出路由
export default new VueRouter({
		routes:[
      {
				//路由路径
				path:'/content',
				name:'content',
				//跳转的组件
				component:Content
			}
    ]
})

<router-view></router-view>
<router-link></router-link>

scoped：作用域

index.js：一般用作主配置文件命名

vue+elementUI使用

网站快速成型（推荐使用npm安装）

使用流程：

1. 初始化一个webpack项目

   vue init webpack hello-vue
   

2. 安装vue-router

   npm install vue-router --sava-dev
   

3. 安装element-ui

   npm i element-ui -s
   

4. 安装sass加载器

   npm install sass-loader node-sass --save-dev
   //npm无法安装时使用淘宝镜像
   cnpm install sass-loader node-sass --save-dev
   

---

嵌套路由

在路由配置中使用children进行嵌套

---

参数传递及重定向

示例

<router-link to=''></router-link>

重定向

redirect

---

404、路由和钩子

• 路由模式

  两种（mode）

  hash

  history（不带#）

• 跳转404

  路由中配置

  path:‘*’

• 钩子：

  路由钩子与异步请求

  • beforouteEnter：在进入路由前执行

  • beforouteLeave：在离开路由前执行

    //function简写
    ()中为固定参数，不能随意填写
    beforouteEnter(to,form,next)=>{
    		next();//一定需要写，不然会卡在相应位置
    }
    

  • 进入路由之前加载数据

    • axios进行请求的发送

      多看官网文档