普歌-vue基础入门笔记

vue基础

vue渐进式javaScript框架

一、vue的特点

1. 遵循MVVM模式，编码体积小，运行效率高，适合移动/PC端开发，它本身只关注UI，可以轻松引入vue插件或者其他第三方库开发项目。
2. 它是借鉴angular的模版和数据绑定技术和借鉴react的组件化和虚拟DOM技术。
3. 数据响应式：数据的变化会导致页面内容的变化。

二、vue内置指令

1. v-cloak
   在插值表达式所在的标签中添加v-cloak指令，先通过样式隐 藏内容，然后在内存中进行值的替换，替换好之后在显示最终的结果。
2. v-once
   只编译一次，显示内容之后不再具有响应式功能.如果显示的信息不需要在进行后续修改，可以使用v-once,这样可以提高性能。
3. 数据绑定最常见的形式就是双大括号的文本插值{{}}.
4. v-text
   填充纯文本，相比插值表达式更简洁
5. v-html
   填充HTML片段，存在安全性问题，本网站内部可以使用。
6. v-pre
   填充原始信息，跳过编译过程，分析编译过程。
7. v-model
   双向数据绑定,绑定data中的数据，当一方的数据发生变化，会影响另一方的数据变化。(原理：属性绑定和事件绑定相结合)
8. v-if v-else-if v-else
   会显示页面数据的显示if条件成立元素就会显示。
9. v-show
   控制元素是否显示（已经渲染到页面）。
10. v-for
    遍历数组v-for="(item,index) in list" {{item} 循环data数据,绑定属性:key用来帮助vue区分不同的元素，从而提高性能。
    遍历对象 v-for="(value, key,index) in obj"
    可以配合v-if来使用
11. v-on
    事件绑定,v-on:click="" 简写 @click="" 绑定事件 后面的函数可以是handle、handle()、handle(item.id);传递参数，如果事件绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数，如果事件绑定函数调用，那么事件对象必须作为最后一个参数进行传递，并且事件对象的名称必须是$event;
12. v-bind
    属性绑定，v-bind:href="" 简写 :href="" 动态参数的:[key]=“url”。
13. 样式绑定
    class样式的处理：
    a. 对象语法v:bind:class="{active:isActive}" 会成=“active”
    b. 数组语法v-bind:class="[activeClass,errClass]" active
    对象和数组语法可以结合使用
    默认的class会和v-bind的class结合到一块
    style样式的处理：
    v-bind:style="{border:borderStyle}"
    v-bind:style="[border]"
    v-bind:style=“objStyle”
    v-bind:style="[objStyle,arrStyle]"

三、vue外置指令

当内置指令不满足需求时，需要外置指令以供需求.虽然代码的复用和抽象的主要形式是组件，但是有的情况下，仍然需要对普通的DOM元素进行底层操作，会用到自定义指令。
Vue.directive(‘focus’,{
//当被绑定的元素被插入到DOM中时
inserted:function(el){el.focus()}
})
注册局部指令
directives:{focus:{}}

四、钩子函数：

一个指令定义对象可以提供如下几个钩子函数（均可选用）:

• bind：只调用一次，指令第一次绑定到元素时调用
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  指令钩子函数会被传入以下参数：
  el：指令所绑定的元素，可以用来直接操作 DOM。
  binding：一个对象，包含以下 property：
  * name：指令名，不包括 v- 前缀。
  * value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。

五、计算属性：

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模版内容更加简洁。
计算属性的用法：computed:{reverse:function(){}}
计算属性中的是基于data中的属性来计算的，发生变化都会变化。

六、侦听器：

侦听器监视数据，数据一旦发生变化就通知侦听器所绑定的方法。
侦听器的应用场景：数据变化时执行异步或开销较大的操作。
侦听器的用法：watch:{}watch中属性的名称要和data中的属性名一致。
比如：采用侦听器，监听用户名的变化，调用后台接口进行验证。根据验证的结果调整提示的信息。

七、过滤器：

格式化数据，比如将字符串格式化为首字母大写…
自定义过滤器：Vue.filter(‘过滤器的名称’,function(val){过滤器的业务逻辑}
过滤器的使用：{{msg | upper}} 属性过滤器 :abc=“msg | upper”
局部过滤器：filters:{upper:function(){}}
带参数的过滤器：第一个参数带来的是数据值，第二个开始以后带的是参数列表

八、生命周期：vue实例

主要阶段：

1. 挂载（初始化相关属性）
   beforeCreate 在实例初始化之后，数据观测和事件配置之前调用。
   created: 在实例创建完成后立即调用。
   beforeMount 在挂载开始之前被调用。
   mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用的钩子。
2. 更新（元素或组件的变更操作）
   beforeUpdate 数据更新时调用。
   updated
3. 销毁
   beforeDestory 实例销毁之前调用
   destroyed 销毁后被调用.
   销毁资源方法 this.$destory();

九、数组方法

1. 变异方法（修改原有数据）
   push(); pop(); shift(); unshift(); splice(); sort(); reverse();
2. 替换数组（生成新的数组）
   filter(); concat(); slice();

十、数组响应式变化 修改响应式数据

Vue.set(vm.items,indexOfltem,newValue);
Vue.$set(vm.items,indexOfltem,newValue)
参数一表示要处理的数组名称
参数二表示要处理的数组的索引
参数三表示要处理的数组的值
Vue.set(vm.list,‘leo’,‘lisi’);

十一、修饰符

1. 事件修饰符：stop阻止冒泡 v-on:click.stop=""
   prevent阻止默认行为 v-on:click.prevent=""
2. 按键修饰符：enter 回车键 .delete:删除键 v-on:keyup.enter=""
3. 自定义按键修饰符：
   全局 config.keyCodes对象
   Vue.config.keyCodes.aaa=65;
   定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
4. 表单修饰符：number:转化为数值 trim:去掉开始和结尾的空格 lazy：将input事件切换为change事件 v-model.number=“age”
   表单选择，value控制.

组件

一、组件特点：

组件化思想的体现：标准，分治 重用  组合

组件化规范 Web Components
我们希望尽可能多的重用代码
自定义组件的方式不太容易
多次使用组件可能导致冲突
Web Components通过创建封装好功能的定制元素解决上述问题
Vue部分实现了上述规范

二、组件的使用:

1. 全局组件：
   Vue.component(组件名称,{data:组件数据,temlate:组件模版内容})
   注意：1. data必须是一个函数： 2、组件模版必须是单个根元素 3、组件模版内容可以是模版字符串
   如果使用驼峰式命名组件，只能在字符串模版中使用驼峰的方式使用组件，但是在普通的标签模版中，必须使用短模版的方式使用组件。
2. 局部组件：
   只能在注册它的父组件中使用
   var HelloWorld = {} components:{‘hello-world’:HelloWorld}
3. 用法：
   可以使用多个相互独立
   每一个组件也都有各种属性方法，和根组件一样。包裹在里面就是子组件，在外面的就是父组件，建议直接写成-式写法。
4. 父组件向子组件传值：
   组件内部通过props接收传递过来的值，接收父组件传递过来的数据。Vue.component(’’,{props:[‘hello’]}); props中的hello就是父组件传递过来的值。
   父组件通过属性将值传递给子组件. msg就是传递到props中的值hello。
   props属性值类型：字符串、数值、布尔值、arr、obj 注意：如果数值和布尔值不用v-bind绑定的话，都是字符串型。
5. 子组件向父组件传值:
   子组件通过自定义事件向父组件传递数据。
   props传递数据原则，单项数据流。
   v-on:click=“$emit{(}^{\prime }enlarge-tex{t}^{\prime })"绑定到子组件上面。父组件通过监听子组件的自定义事件v-on:enlarge-text=""传递参数v-on:click="$emit(‘enlarge-text’,5)” 父中$eventhandle($event); 方法中val接收到传来的参数值。
6. 非父子组件间的传值：
   组件A 事件中心 组件B
   单独的事件中心管理组件间的通信。
   var Hub = new Vue(); 创建的事件中心
   监听事件与销毁事件：
   1、 Hub.$on{(}^{\prime }add-tod{o}^{\prime },(val)=>);val就是兄弟组件传递过来的值2、Hub.$off(‘add-todo’);
   触发兄弟的组件：Hub.$emit(‘addtodo’);
7. 组件插槽：
   父组件向子组件传递内容。
   hi ------> 子组件
   子组件中 在父组件中的hi就会传入到插槽中，如果 中没有值，默认值默认内容就会显示。
   具名插槽的用法： 插槽定义 会自动匹配,

   标题信息

   , 因为p标签中有内容，就会传到插槽中，因为name剧名属性，会自动匹配到name=“header” 的插槽当中。 这个标签会包裹多条标签，但是template标签不会被渲染到页面上。
   作用域插槽：父组件对子组件的内容进行加工处理。子组件 slot插槽，通过自定义绑定一个属性 v-bind:item=“item”; 在父组件中，通过template标签包裹， slot-scope=“slotProps” 这个属性式slot自带的 slotProps自定义名称，通过在父组件中然后在对子组件的内容进行加工处理 slotProps.item 就是拿到在子组件中定义的自定义属性item .id就获取到了id {{slotProps.item.id}}
8. 组件开发步骤： 实现整体布局和样式的效果，划分独立的功能组件，组合所有的子组件形成整体结构，逐个实现各个组件功能。
9. 组件式开发思路：父组件 里面包含多个子组件 把父组件的数据传递到子组件，子组件接收处理 把子组件的数据传递到父组件，父组件接收处理数据。

前后端交互url

1. url Restful形式的url HTTP请求
   接口的调用方式：原生ajax jq的ajax fetch axios
2. 异步调用：
   异步效果分析（定时器、ajax、事件函数）
   多次异步调用的依赖分许：多次异步调用的结果顺序不确定，异步调用结果如果存在依赖需要进行嵌套，回调地狱。
3. Promise是异步编程的一种解决方案，Promise是一个对象，从它可以获取异步操作的消息。可以避免多层异步调用嵌套问题。
4. Promise对象提供简介的API，使得控制异步操作更容易。
5. Promise基本用法：
   实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务。resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果。
   return 出来的就是新的Promise对象。
   Promise常用的API：
   实例方法： p.then() p.catch()获取异常信息 p.finally()成功与否都会执行（尚且不是正式标准）
   对象方法 Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果
   Promise.race(); 并发处理多个异步任务 只要有一个任务完成就可以得到结果 Promise.all([p1,p2,p3]).then();
6. fetch概述：
   基本特性：更加简单的数据获取方式，功能更强大，更灵活，可以看作是xhr的升级版
   fetch(url).then(fn2).then()
   常用配置选项：method(String):HTTP请求方法,默认为GET(GET,POST,PUT,DELETE)
   body(String):HTTP的请求参数
   headers(Object):HTTP的请求头，默认为{}
   ‘Content-Type’:‘application/x-www-form-urlencoded’
   ‘Content-Type’:‘application/json’
   /data/:id req.params.id 动态参数
   fetch响应结果： text(); 将返回体处理成字符串类型 json() 返回结果和JSON.parse(respinseText)一样
   /text方法属于fetchAPI的一部分，它返回一个promise实例对象 //用于获取后台返回的数据
   通过URLSearchParams 传递参数 (application/x-www-form-urlencoded)
7. axios的响应结果： 响应结果的主要属性：
8. axios的全局配置
   axios.defaults.timeout = 3000; 超时时间
   axios.defaults.baseURL = ‘http://localhost:3000’; 默认地址
   axios.defaults.headers['mytoken] = ''设置请求头
9. 拦截器：请求拦截器和响应拦截器 ：
   在向后台发送URl时先发送请求拦截器
   在后台反应数据先经过响应拦截器 处理在返回给客户端数据
10. async/await的基本用法：
    async/await是ES7引入的新语法，可以更加方便的进行异步操作
    async关键字用于函数上 (async函数的返回值是Promise实例对象)
    await关键字用于 async函数当中 (await可以得到异步的结果)

路由

一、路由的基本概念与原理

1. 路由是一个比较广义和抽象的概念,路由的本质就是对应关系
2. 在开发中，路由分为：后段路由和前端路由
3. 后端路由：概念：根据不同的用户URL请求，返回不同的内容本质：URL请求地址与服务器资源之间的对应关系
4. 浏览器-》url地址-》后端路由-》服务器资源
5. 前端路由：概念：根据不同的用户事件，显示不同的页面内容
   本质：用户事件与事件处理函数之间的对应关系
   用户-》用户触发事件-》前端路由->事件处理函数-》事件函数渲染相应内容
6. 后端渲染存在性能问题
   ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
   SPA 单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部跟新实现，同时支持
   浏览器的前进和后退操作
   SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史
   的变化，但是hash的变化不会触发新的url请求）
   在实现SPA的过程中，最核心的技术点就是前端路由
7. window.onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称
8. location.hash获取hash值 switch匹配
9. 根据:is属性指定的组件名称，把对应的组件渲染到component标签所在的位置 可以吧当作是一个组件的占位符

二、vue-router的基本使用

1. 是vue.js官方的路由管理器
2. 它和vue.js的核心深度挤成，可以非常方便的用于SPA应用程序的开发
3. 包含功能有： 支持HTML历史模式或hash模式支持嵌套路由
   支持路由参数
   支持编程式路由
   支持命名路由
4. 基本使用：引入相关的库文件 /vue-router_3.0.2.js
   添加路由链接 to属性会被渲染成href 值会渲染成以#开头的值。
   添加路由填充位 router-view
   定义路由组件 const Login={template:’’}
   配置路由规则并创立路由实例 const router = new VueRouter({//所有的路由规则routes:[{path:/login,compinent:组件名字}]}
   把路由挂载到Vue实例中，/挂载路由实例对象 // router:router
   路由重定向：跳转 通过redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向
5. vue-router嵌套路由
   子路由填充位 在父路由中 children:[{path}]
6. vue-router动态路由匹配：
   通过动态路由参数的模式进行路由匹配
   动态路径参数 以冒号开头 /user/:id 动态匹配 {{$route.params.id}}获取参数id
   通过props传递 props:true;传递:id props:{}; 传递对象 props:route=>(){{id:route.params.id}}
7. vue-router命名路由 的配置规则
   为了更方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由".
   {name:’/user’}
   router-link中 :to="{name:‘user’,params:{id:123}}"
8. vue-router编程式导航
   声明式导航：通过点击链接实现导航的方式，叫做声明式导航
   编程式导航：通过调用js形式的API实现导航的方式，叫做编程式导航
   编程式导航基本用法：常用的编程式导航API如下：
   this.$router.push{(}^{\prime }has{h}^{\prime }地址)this.$router.go(n) 1前进 -1后退