Vue2框架

Vue2框架

Vue定义

Vue.js是一种构建用户界面的渐进式框架，提供了MVVM模型数据绑定和一个可组合的组件系统，具有简单灵活的API，采用自底向上逐层应用

Vue安装

/ 浏览器安装Vue Devtools 可以在界面审查金额调试Vue应用/
安装方法：新手推荐用script引用
1.直接用<script>引入---Vue注册为全局变量
	开发版本--vue.js文件(包含完整的警告和调试模式)
	生产版本--Vue.min.js(删除了警告)

2.NPM安装-构建大型应用推荐使用
	npm install vue

3.命令行工具(CLI)--Vue脚手架
	为单页面应用(SPA)快速搭建脚手架--具体查看Vue CLI文档

Vue插值

Mustache语法：{{ }}
页面插值：1.`v-text`
		2.`{{}}`：绑定文本类型的值或单个表达式
        3.`v-once`
        4.`v-html`
        5.`v-bind`

指令：
	1.`v-text`：绑定元素内容
	2.`v-once`：只渲染元素或组件一次
	3.`v-html`：将数据作为html内容绑定
	4.`v-bind`：绑定属性
	绑定属性：`<div v-bind:id="myId"></div>`  -- myId动态
	绑定属性名：`<div bind:[key]="val"></div>` -- key和val动态，vue2.6.0+支持
	5.`v-show`：通过css中的display属性显示或隐藏元素
	6.`v-if v-else-if v-else`：通过销毁或重建显示或隐藏元素
	7.`v-for`：遍历循环
	8.`v-on`：绑定事件
	9.`v-slot`：插槽
	10.`v-cloak`：绑定到元素上只到对应的实例编译完成
	11.`v-model`：表单内容绑定
	12.`v-pre`：不需要编译

Vue生命周期--钩子函数

创建Vue对象 new Vue()--->
/执行beforeCreate事件钩子 /--->
开始监控Data对象数据变化 --->
Vue内部初始化事件init Events--->
/ 执行created事件钩子(可以执行ajax请求) /--->
判断有无el挂载选项 ---？
	无--->当Vm.$mount(el)被调用执行下一步
	有--->判断有无模块选项---？
			无--->编译外部HTML作为模块
			有--->执行模块渲染函数
--->
 / 开始执行beforeMount事件钩子/--->
 将模块编译好的html内容替换el挂载指向的DOM对象或标签内容--->
 / 开始执行mounted事件钩子(此时挂载完成)/--->
进入Mounted监控数据变换实时更新DOM---<
     --[当data数据改变]--->
 /执行beforeUpdate事件钩子 /--->
     --[虚拟DOM重新渲染页面]--->
 /执行Updated事件钩子/ --->
                >---->
 当vm.$destriy()被调用--->
 /开始执行beforeDestory事件钩子 /--->
 销毁监控，子模块和事件监听--->
 Destroyed--->
 / 开始执行destroyed事件钩子/

Vue条件与循环

#条件：
	(1)v-if控制切换一个元素是否显示(根据v-for后面的表达式是否为true或false显示内容)
        eg:
        <div id="app-3">
          <p v-if="seen">现在你看到我了</p>
        </div>
        var app3 = new Vue({
          el: '#app-3',
          data: {
            seen: true
          }
        })
    (2)v-else 是v-if的语句块，当v-if为false显示的内容，不需要表达式，但前面必须出现v-if或v-else-if
    	eg:
		<div v-if="Math.random() > 0.5">Now you see me</div>
        <div v-else> Now you don't </div>
	(3)v-show是根据表达式之真假值，切换元素的 CSS中display属性
    #注意 v-if和v-show的区别
    v-show是通过元素的display属性控制内容显示与隐藏，而v-if是销毁或重建元素控制内容显示,而且v-show用于切换频繁时使用

#循环
	v-for基于源数据多次渲染元素或模板块,渲染的参数可以是：Array | Object | number | string | Iterable
	语法：v-for="(item,[index,key] in list"
	参数：
	eg: <div v-for="(item, index) in items"></div>
        <div v-for="(item,index) in array"></div>---值，下标
        <div v-for="(val, name, index) in object"></div>---值，名，索引
	#注意 v-for 的默认行为会尝试原地修改元素而不是移动它们，要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示
     eg:<div v-for="item in items" :key="item.id">
      		{{ item.text }}
    	</div>

Vue事件绑定

v-on指令---简写@
	用法：在元素绑定事件：<div v-on:click="fun()"></div>
					//<div @click="fun()"></div>
					  fun()应该在Vue实例的methods中进行定义
         绑定动态事件：<div v-on:[event]="fun()"></div>
v-on修饰符:
    .stop---阻止事件冒泡 eg: <a v-on:click.stop="doThis"></a>
    .prevent---阻止事件默认行为 eg:<form v-on:submit.prevent="onSubmit"></form>
    .capture---添加事件侦听器时使用 capture 模式
    .self---只当事件是从侦听器绑定的元素本身触发时才触发回调。
    .once---只触发一次回调
    .passive---(2.3.0) 以 { passive: true } 模式添加侦听器
    .{keyCode | keyAlias} - ---只当事件是从特定键触发时才触发回调

Vue Class与Style绑定

`v-bind`绑定样式 简写为`:`
#绑定class
	1.以对象的形式绑定class:<h1 v-bind:class="{active:isActive}">
  		active就是类名，isActive是一个布尔值，表示active是否生效
	2.以数组的形式绑定class:<h1 :class="[a,b]">
      	a和b是data中的数据，也可以直接写类的名字
  		也可以在数组中使用三元运算符：<h1 :class="[isActive ? 'active' : '']">
#绑定style
	1.以对象的形式绑定：<h1 :style="{color:'blue',fontSize:font+'px'}">  --  属性名就是样式名，font是data中的变量
   		<h1 :style="styleObj">  --  styleObj是一个样式对象
	2.以数组的形式绑定：<h1 :style="[styleObj,styleObj2]">-本质绑定多个样式对象

Vue表单绑定

v-model指令：只用于<input><select><textarea>标签和components模块
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步
v-mode修饰符：
		.lazy--->为在事件结束之后进行同步，不实时更新
			eg:<input v-model.lazy="msg">
        .number--->自动将用户的输入值转为数值类型
			eg：<input v-model.number="age" type="number">
        .trim--->自动过滤用户输入的首尾空白字符

Vue基础组件

组件注意规范：

# （1） 组件的data必须是一个函数，该函数返回一个对象----由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题
# （2）组件名：1.短横线分隔法：`my-component` 2.大驼峰命名法：`MyComponent`  --  在调用时，直接在DOM中无效，需要使用短横线分隔法调用,可以在template中使用
# （3）组件中的模板只能有一个根元素，需要用一个标签包含模块内容

全局组件

<div id="components-demo">
  <button-counter></button-counter>
</div>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

局部组件

用于实例中创建
let component = {
    template:"",
    data:function(){
        return {
            msg:"Hello"
        }
    }...
}

父子组件

第一种：props+$emit()
第二种：回调函数
第三种：$parent+$children
第四种：provide+inject
第五种：$attrs+$listeners
第六种：ref+$refs

组件传值

`父传子--prop`
    1.传静态值
    <child-component msg="Hello"></child-component>  -- 父
    props:["msg"],
    调用：同data中的值一样         -- 子
    2.传动态值
    <child-component v-bind:mg="msg"></child-component>
    -- msg就是父组件中一个动态值
    注意：1.如果要传递一个具体的数字值，那么要使用v-bind形式，否则会被当成字符串传递
         2.如果要传递一个具体的值，并希望值的类型不被改变，那么就要使用v-bind形式，或者使用动态传值的形式

`子传父:子触发事件，父监听事件`
   单向数据流：父子prop之间是单向下行绑定
    1.子触发事件：vm.$emit("事件名"[,args...])
    2.父监听事件：v-on:事件名="事件处理函数"  --  args会作为回调函数的参数被父接收

 `兄弟传值:父传子，子传父`   

Vue过滤器filter

定义和调用
`定义`
//全局过滤器
Vue.filter("过滤器名",function(data[,args...]){
    //code
    return 格式化之后的文本;
})
//局部过滤器，vue实例的filters选项
filters:{
    filterName(data){
        //code
    }
}
`调用`
//1.在{{}}使用
{{val | filterName}}  --  只有一个过滤器，并且没有第二个参数
{{val | filterName1 | filterName2}}  --  有多个过滤器
{{val | filterName(arg1,arg2...)}} -- 过滤器有参数
//2.在v-bind中使用
<div :attrName="val | filterName"></div>

Vue插槽slot

定义：将元素作为承载分发内容的出口

Vue计算属性computed

Vue混入

混入基础
混入(mixin)：混入可用包含任意组件选项，当混入对象被组件使用时，所有混入对象的选项都将被混合到改组件中的选项
eg:
	//定义一个混入对象
 var Mymixin ={
    created:function(){
    	this.hello()
    },
    methods:{
    hello(){
    	console.log(888)
     }
   }

 }
 //定义一个使用混入对象的组件
 var component=vue.extend({
 	mixins:[Mymixin]
 })
 var component =new Component();//888

选项合并
 `混入组件选项属性同名时,数据对象在内部会递归合并，当发生冲突时会以组件数据优先，同名的钩子函数将合并为一个数组，混入对象的钩子将在组件自身钩子之前被调用`

全局混入
混入可用在全局注册中，当会影响每一个之后被创建的Vue实例

Vue操作DOM

1.给DOM绑定vue变量，然后通过改变vue变量的值，来操作DOM
2.给DOM或组件绑定ref属性，然后在实例中可以通过vm.$refs获取到对应的属性，这个属性会指向DOM或者组件
3.可以通过JQ操作DOM：npm i jq -S
				  import $ from "jq"
4.直接写原生JS

Vue特殊属性

(1)key 主要用在Vue的虚拟DOM算法，key会重新排列元素顺序，有相同的父元素的子元素必须有独特的key，重复的key会造成渲染错误,经常与v-for结合使用
<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>
(2)ref 用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，用在普通的DOM对象，引用指向DOM元素，用在子组件上，引用就指向组件实例
  <p ref="p">hello</p>---DOM
<child-component ref="child"></child-component>---子组件

Vue内置的组件

(1)component
(2)keep-alive
	缓存组件的内容，组件内容比较简单可以用v-show实现，复杂的用keep-alive
(3)slot

Vue的hash和history模式

hash模式的改变方法
第一种：
	window.onhashchange事件，事件对象中的location.hash获取到当前hash路径，在页面标志的url中有"#"号
第二种：
	手动更改在网页url路径中加'#',浏览器中前进后退按钮
第三种:
	location.href中连接地址加上'#'

history模式的改变方法
第一种：
	history.pushState()事件切换url路径

Vue路由

Vue路由安装

第一种：#直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js(opens new window)
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

第二种：#NPM
npm install vue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
如果使用全局的 script 标签，则无须如此 (手动安装)。

第三种：#Vue CLI
如果你有一个正在使用 Vue CLI (opens new window)的项目，你可以以项目插件的形式添加 Vue Router。CLI 可以生成上述代码及两个示例路由。它也会覆盖你的 App.vue，因此请确保在项目中运行以下命令之前备份这个文件：vue add router

Vue路由基本配置

配置：
<!--引入vue.js-->
 <script src="vue.js"></script>
<!--引入Vue-router.js-->
 <script src="vue-router.js></script>

DOM样式中
<!--使用router-link组件导航 to直接指定链接-->
<div id='app'>
	<router-link to='/foo'>go to foo</router-link>
	<router-link to='/foo'>go to foo</router-link>
	<!--将路由匹配组件渲染-->
    <router-view><router-view>
</div>
js中
<!--定义路由组件-->
 let Foo={template:'<div>foo</div>'},
 let Bar={templte:'<div>bar</div>'}
<!--创建router实例，配制routes属性-->
 const router =new VueRouter({
     routes:[
         {path:'/foo',component:FOO},
         {path:'/bar',component:bar},
         .......
     ]//可缩写routes
 })
<!--创建和挂载根实例-->
 const app=new Vue({
     el:'#app',//或通过app.$mount('#app')挂载
     router:router,//第二个为router实例名
 })

基础路由

第一步：定义路由组件(可用import导入进来)
const foo={template:`<div>foo</div>`}
第二步：定义路由
const routes={
    path:'/foo',//路由渲染的路径--to
    component:foo,//这个foo为路由组件名
	props:[],
    children:[],
   	.....
}
第三步：创建路由实例，配置路由参数
const router=new VueRouter({
    routes:routes,//第二个routes为路由名
})
第四步：创建和挂载根实例
const app=new Vue({
    el:'#app'
    router:router,//第二个为路由实例名
})

编程式导航

router.push()方法：会向history栈添加一个新记录，当浏览器点后退按钮时，会回到之前的URL

动态路由

动态路由传参
传参模式：
	第一种:路径参数使用`:`
1.router对象的path中：
path:"user/:uid/:uname"  --  表示有两个路径参数，一个为uid，一个为uname
2.URL：user/1/yss  -- uid=1&uname=yss
3.获取：路径参数默认保存在：this.$route.params中
4.页面中获取参数：{{$route.params.uid}}
注意：实例属性方法在实例中，通过this调用；在实例外，通过实例名调用；在模板中，则是直接调用
	第二种：路由组件传参
	将路径参数由$route获取变为props获取
1.router对象的配置中，添加props属性
{
    path:"user/:uid",
    component:User,
    props:true
}
2.组件中，设置props属性
export default {
    props:["uid"]
}
3.模板中获取参数：{{uid}}

导航守卫

全局守卫--路径拦截
局部守卫
beforeRouteEnter(to,from,next)

路由懒加载

好处：1.缩短路由渲染的时间，网页只需要加载对应的js文件
Vue文件的懒加载
eg:router/index.js
	const routes=[
	{...},{...},
	{path:'/hhh',name:hhh,
		component:()=>{
		import('../views/Home.Vue')
		}
	}
	]

Vue cli

目录结构

build目录:webpack相关配置目录
config目录:项目配置目录
	--index.js --项目相关设置
    	--dev:开发环境相关设置
		--build:生产环境相关设置
node_modules目录:项目依赖第三方包--源代码中一般不包含，通过npm install命令安装
src目录:源文件目录
	--assets目录:静态资源目录--文件会被压缩
    --components目录:组件目录
    --router目录:路由目录
    	--index.js文件:导出路由对象--路由相关设置
	--App.vue文件:根组件
    	>template	组件
		>sctript 	js
		>style  css样式 --scoped 表示只在当前组件中生效
	--main.js文件:根实例所在文件

static目录：项目使用的静态资源
	--.babelrc:转码器配置文件
    --.deitorconfig:编辑器配置文件
    --.gitignore:git会忽略的文件
    --.postcssrc.js:兼容所有浏览器的兼容写法
    --index.html:入口文件
    --package.json:项目设置
    --package-lock.json:记录包的来源与版本

安装依赖

一:Sass文件
	安装scss
	npm install node-sass -D
	npm install sass-loader -D
	安装不成功，错误排除原因
    -->1.使用国内镜像
       2.更改电脑计算机用户的.npmrc文件添加如下内容
       phantomjs_cdnurl=http://cnpmjs.org/downloads
   	   sass_binary_site=https://npm.taobao.org/mirr
   	   registry
   如果编译不成功，排除是否是版本问题：
建议sass-loader安装7.3.1的版本
npm install sass-loader@7.3.1 -D
npm install node-sass@4.14.1 -D
二：ElementUI
	安装：基于Vue2.0的桌面端端口

跨域请求与预检请求

/跨域/
	1.服务器端允许跨域
node.js中设置header:
res.header("Access-Control-Allow-Origin", "*");
//添加content-type,解决跨域请求头content-type类型不符
res.header("Access-Control-Allow-Headers", "content-type,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");

	2.服务端不允许跨域，通过本地代理实现
在本地设置服务器，通过本地的服务器请求跨域资源，这样就将跨域的服务器资源变成了本地资源，然后请求本地资源
vue-cli：config/index.js
dev:{
	proxyTable:{
		"/api":{
			target:"http://域名:端口号/",
			changeOrigin:true,
			pathRewrite:{
				"^/api":""
			}
		}
	}
}

/预检/
1.当请求不是简单请求时就是预检请求
2.表现形式：一个ajax请求会发送两次，但是一次是preflight，从后台来看请求类型是OPTIONS
3.简单请求：满足三个条件
  1.请求类型只能是：GET,POST,HEAD
  2.请求头的content-type只能是：text/plain,application/x-www-form-urlencoded(表单默认数据编码格式)，multipart/form-data(表单上传文件时需要的编码格式)
  3.请求时没有自定义的Head

VueX

vuex概述

（一）定义：VueX是实现组件全局状态（数据）管理的机制，可以方便的实现组件之间数据共享
	特点：1.能够在Vuex中集中管理共享数据，易于开发和维护
2.存储在Vuex的数据是响应式的，能够实时保持数据与页面的同步
3.能够高效实现组件之间的数 据共享

Vuex的基本使用

1.安装：1.使用<script>标签引入
	   2.npm install vuex -S
2.将需要共享的状态(state)保存到仓库(store)中
store.js：
  import Vue from "vue"
  import Vuex from "vuex"
  Vue.use(Vuex)
  const store = new Vuex.Store({
      state:{  //共享的状态（数据）
          msg:""
      },
      mutations:{
          //在组件中更改store状态的方法，state作为第一个参数，data是传递的参数
          changeMsg(state,data){
              state.msg = data;
          }
      }
  })
  export default store
3.在根组件上应用vuex,实现在所有的组件中都可以访问store
  main.js:
  import store from "./store.js"
  new Vue({
      ...
      store:store  //通过store选项将状态挂载
  })
4.组件中访问：1.this.$store.state.msg  -- 实例中访问
		    2.$store.state.msg  --  模板中访问
            3.this.$store.commit("changeMsg","test")
			  -- 组件中更新store的值
            4.computed:{  //通过计算属性监听msg变化
                msg(){
                    return this.$store.state.msg;
                }
            }
			5.watch:{
                msg(newVal){
                    //监听store中的值
                }
            }