vue概念知识(一)

双向事件绑定原理

它适用的是MVVM概念

M model：代表vue中data的数据
V view ：代表视图中的数据
VM view-model: 数据和视图的控制(当view或model数据发生改变则双方都变成改之后的数据)

当页面数据发生变化时,则通过dom监听将数据传给model; 当model的数据发生变化时,则通过数据绑定 绑定到页面中

计算属性与方法的区别

不通点：

计算属性：

1. 如果调用一次以上则有缓存的机制，所以只会调用一次属性方法把计算的值缓存下来以便下次使用
2. 计算属性调用时只能写方法的名子 (类似于调用属性的感觉)
   
   

方法调用:

1. 没有缓存的机制，调用多次，则计算多次
2. 方法可以省略()也可以添加()

相同：都是可运行的方法,

总结：如果要计算一个重复调用的方法值还不变 , 首选计算属性的方法

VUE中虚拟DOM概念

什么是虚拟DOM？
vue会预先加载好虚拟DOM，浏览器需要时直接取就能用，而非在去加载html Dom在用；大大节省了浏览器主动加载模板中数据的时间

使用vue中的v-for循环，遍历时会在虚拟DOM对象中保存遍历的数据方便用户对数据进行操作

vue对象的生命周期

什么是钩子函数？

整个VUE有一个完整的执行的过程,如果用户需要对vue的对象，进行额外的扩展时,可以采用预留的 “接口” 进行扩展，我们把项目中提前设定好的"接口"在vue中称之为钩子函数

钩子函数作用: 对vue原有的生命周期函数的接口进行扩展

vue预留的接口函数(8个)

初始化触发的函数接口4个 ：

接口	功能
beforeCreate()	在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
created()	在实例创建完成后被立即调用,此时html页面还没渲染完成
beforeMount()	在挂载开始之前被调用：相关的 render 函数首次被调用
mounted()	实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了，运行此方法时html页面已经渲染好了

数据被修改后触发的函数接口2个 ：

接口	功能
beforeUpdate()	数据更新时调用，发生在虚拟 DOM 打补丁之前，修改数据时执行
updated()	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子，修改数据时执行

当销毁vue生命周期时触发函数接口2个：

接口	功能
beforeDestroy()	实例销毁之前调用。在这一步，实例仍然完全可用
destroyed()	实例销毁后调用

当vue生命周期运行到mounted()方法时标识VUE对象实例化成功
生命周期函数,是VUE对象独有的内容，注意写法不要放到methods中
VUE一般不使用before开头的生命周期接口，使用created接口比较多（页面加载成功之前）

Vue组件化思想

概念

• 组件系统是 Vue 的另一个重要概念，因为它是一种抽象
• 它允许我们使用小型、独立和通常可复用的组件构建大型应用
• 任意类型的应用界面都可以抽象为一个组件树

优势：

1. 使用组件可以将一些重复的内容进行封装.
2. 各个组件单独维护.体现了分治的思想
3. 在由个个小的组件合成一个大项目

组件化思想

为了保证组件化 相互之间互不干扰,则应该在组件内部 单独定义html/js/css
组件中的data是一个函数() , 必须有返回值(相当于返回一个js对象
组件的<template>节点模版必须有一个根目录(例如: <div>) , 否则页面无法渲染
如果组件的名称采用驼峰规则的命名,则引用时标签需要使用 ‘ – ‘线 进行关联

全局组件和局部组件的共同点（一、组件对象和视图）

1.创建组件的模版需要显示的内容

<template id="helloTem">
	<div>
		<h3 @click="test()">我是局部组件A</h3>
		<h3>我的数据信息：{{msg}}</h3>
	</div>
</template>

<template >： 是vue规定的写法标签,所以必须这么写。它的位置必须在当前页面Vue控制标签的外写，否则不生效
template 的id： 用于绑定组件对象的template属性
模板根目录： 定义模版html 模版内必须只能有一个根目录，否则无法渲染页面视图
方法 : test() 是绑定了该组件对象中定义的方法，可按需求添加
属性 : msg 也是绑定了该组件对象中定义的属性，可按需求添加

2.创建组件的一个对象

let hello = {
	data() {
		return {
			msg: '我是组件A----666'
		}
	},
	template:"#helloTem",
	methods: {
			test() {}
	}
}

data属性的不同:

1. data在对象里必须按照data() {}方法的形式；他是一个函数，与Vue中data：{} 属性不同
2. 组件对象的data()内部必须要有返回值，需要定义的属性可以在返回值对象中写
   
   

template属性： 用来定义 html/js/css 或者 绑定html中<template>的标签id
methods: 定义了此组件可以使用的方法

注意 : 定义Vue的组件必须写在实例化vue对象前面 , 否则vue初始化后无法加载

定义全局组件

完成"全局组件和局部组件的共同点"后可在实例化Vue对象前，向Vue添加组件

Vue.component("hello", hello);

参数一： 给该组件取个名字
参数二： 给该组件添加组件对象(创建对象的引用名字)，也就是说该组件需要显示什么内容

注意 : 定义Vue的组件必须写在实例化vue对象前面 , 否则vue初始化后无法加载

定义局部组件

完成"全局组件和局部组件的共同点"后在实例化Vue对象内添加

app = new Vue({
	el: '#app',
	components: {
		//hello1:hello1
		hello1
	}
});

在components的对象内定义组件对象的引用名，如果key和value名字相同可只写一个(简化)
components可以写多个组件对象，组件对象也只能在这里定义

全局组件和局部组件的共同点（二、 组件的引用）

<div id="app" v-cloak>
	<hello></hello>
	<add-Num-Com></add-Num-Com>
</div>

<hello>： 该标签是在实例化Vue对象的内部components里添加的组件对象对写的名字
<add-Num-Com> ： 该标签是在vue添加对象时为该组件起的名字为addNumCom


注意：
因为为组件起名时遵循了驼峰命名法，所以在JS中大写的字母，在定义html标签时前面须加 - 符(因为浏览器在读取html标签时不区分大小写)

VUE Router(路由)

Router说明

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌，包含的功能有：

1. 嵌套的路由/视图表
2. 模块化的、基于组件的路由配置
3. 路由参数、查询、通配符
4. 基于 Vue.js 过渡系统的视图过渡效果
5. 细粒度的导航控制
6. 带有自动激活的 CSS class 的链接
7. HTML5 历史模式或 hash 模式，在 IE9 中自动降级
8. 自定义的滚动条行为

Router存在意义

传统页面跳转：

在之前所有的页面都是由后端服务器进行页面跳转，所有的请求都会经过后端，导致后端服务器压力过大
这种用户只有通过后端服务器才能获取页面相关信息的方式称为 后端路由/服务器端路由
它的弊端是一种集中式的管理. 性能瓶颈在服务器端.

Vue Router的解决策略：

将所有路由的配置生成JS,保存在浏览器中当用户发起某个请求时,浏览器会自己映射到对应的请求页面信息(也就是组件)，之后直接访问静态资源这样的方式速度更快!

上述的方式称之为:前端路由/客户端路由

Router的使用

1.使用Vue的Router(路由)，首先html导入了vue.js，然后再导入vue-router.js；顺序必须对否则程序读取路由时将不会识别

2.首先需要实例化VueRouter对象，定义对象中路由的规则(先定义路由对象)

let router = new VueRouter({
	routes: [
		{path: '/', redirect: '/dog'},
		{path: '/user', component: user},
		{path: '/dog', component: dog, children:[
		    {path: '/dog/samo', component: samo},
		    {path: '/dog/hsq', component: hsq}
	    ]},
	]
})

routes： 储存项目中所有需要跳转的模块(页面)信息; 它是以对象为单位的数组
对象 ： 每个对象都有一个path和一个component或redirect主要的作用就是跳转页面
path： 实现请求地址与Vue的模块进行绑定
component： 它指向的是一个模块的名字，它将于path地址进行绑定；实现通过该请求地址可以访问到此组件
children：

1. 翻译表示孩子们；当子页面发起请求，会在Router找到请求所映射的组件在再子页面内进行渲染显示。如果都写在根目录下，则组件渲染也在根组件页面中
2. 属性可以实现路由的嵌套,通过父子关系,则子组件的渲染,在父组件定义的router-view标签中展现
   
   

redirect： 表示路由的重定向(也就是重定向)

3.将路由对象交给Vue对象管理

let vue = new Vue({
	el: '#app',
	//router: router
	router
})

router： 该属性定义了Vue需要管理的vue Router路由对象的跳转对象
当对象中Key的名称与Value的名字一样时，则可以只写一个(代码的简化)

4.定义路由的链接

<div id="app" v-cloak>
	<router-link to="/user">用户</router-link>
	<router-link to="/dog">狗</router-link>
	<router-view></router-view>
</div>

<router-link to="/user" > :

1. router-link标签在vue解析完成后前端会变成<a>标签
2. to 解析之后就变成了href属性，该属性值对应的就是实例化VueRouter对象时path的地址
3. 当点击该页面点击该标签时会跳转到path所映射的模块
   
   

<router-view> :

1. 该标签表示点击上述标签后模块所显示的位置，如果不指定则页面不会有任何变化
2. 作用是定义路由填充位 该位置用来展现具体页面(组件)

重定向的概念

当浏览器访问默认页面A时,由于业务需要,要求用户看到其他页面B, 则需要使用 .Vue的路由重定向机制,自动跳转

1. 重定向时URL中的请求地址发生变化
2. 重定向时请求发送了多次，多次请求，多次响应
3. 重定向是服务器行为
4. 重定向是不能传递参数

运行逻辑：

1. 客户端请求服务器重定向的接口
2. 服务器会返回头信息为重定向到其他接口链接的响应
3. 客户端接收到该重定向的响应后重写发起新的请求

vue项目发布

说明

在开发时前端是借助tomcat服务器运行的; 但是在生产环境中前端项目都是静态资源文件，我们可以借助依赖服务器运行

打包发布流程

1. 首先需要把全局url配置都改成生产环境下的网址(ajax请求url)
2. 登录vue脚手架将项目编译并压缩(build运行),编译好的文件在VUE项目的根目录下的dist文件夹(内部包含了整个前端的系统)
3. 将打包好的dist文件夹整体复制到自己生产环境下
4. 通过nginx服务器,进行反向代理，即可完成访问

打包过程

打包编译: 前端项目发布实质就是将脚手架中多余的解构进行优化,将有价值的信息打包压缩生成静态资源文件,被用户访问.
编译完成: 户要求就可以通过域名访问dist目录中的index.html文件(首页)