前端知识点总结 -- VUE

旧城等待， 2024-04-17 17:36 100阅读 0赞

一. Vue中基础知识  
1. 指令-插值 : \{ \{ \}\} 、v-html  
插入文本：双花括号  
语法：<any>\{ \{ mes \}\}</ant>  
作用：将数据绑定到视图

插入HTML: v-html  
语法：<any v-html="rawHtml"></any>  
作用：输出真正的html  
  
2. 指令-循环指令 : v-for  
语法1:   
    <any v-for="item in array"></any>  
语法2：  
    <any v-for="(item,index) in array"></any>  
作用：  
    在遍历array集合时，将临时变量保存在 item 、index 中，  
    创建多个any标签  
  
3. 指令-选择指令 : v-if、v-else  
语法：<any v-if="表达式"></any>  
     <any v-else-if="表达式"></any>  
     <any v-else="表达式"></any>  
作用：  
     根据表达式执行结果的真假，来决定是否将当前元素挂载到DOM树  
  
4. 指令-事件绑定 : v-on  
语法：  
    <any v-on:eventName="handleEvent"></any>  
简写：  
    <any @:eventName="handleEvent"></any>  
作用：  
    给指定的元素 将handleEvent的方法绑定给指定eventName事件  
  
5. 指令-属性绑定 : v-bind  
语法：  
    any v-bind:myProp="表达式"></any>  
简写：  
    <any :myProp="表达式"></any>  
作用：  
    将表达式执行的结果 绑定 到当前元素的myProp属性

动态绑定src:   
    <img v-bind:src="'img/'+myImg" alt="">

动态绑定style:  
    <p :style="\{backgroundColor:myBGColor\}">动态样式绑定</p>

动态绑定class:  
    <div :class="\{ active: isActive \}"></div>  
    <div :class="\{ active: isActive, 'text-danger': hasError \}"></div>  
    <div v-bind:class="\[isActive ? activeClass : '', errorClass\]">  
    <div v-bind:class="\[\{ active: isActive \}, errorClass\]">  
  
6. 指令-双向数据绑定 : v-model  
方向1: 数据绑定到视图  
方向2：将视图中（表单元素）用户操作的结果绑定到数据   
基本语法：<表单元素 v-model="变量"></表单元素>  
1  
2  
3  
二. 组件化  
1. 组件的创建  
1.全局组件  
Vue.component('my-com',\{  
   template: '<div>A custom component!</div>'  
\})

2.局部组件  
var Child = \{  
  template: '<div>A custom component!</div>'  
\}

new Vue(\{  
  // ...  
  components: \{  
    // <my-component> 将只在父组件模板中可用  
    'my-component': Child  
  \}  
\})

3.直接在template属性中指定模板中内容  
 // 创建实例  
 new Vue(\{  
    // ...  
    components:\{  
        'my-component':myComponent  
    \}  
 \})  
 // 定义模板对象  
 var myComponent=\{  
    template:\`<span>\{ \{mes\}\}<span>\`,  
    data () \{  
      return \{  
        mes: "chenzhijie"  
      \}  
    \},  
    methods:\{\}  
 \}  
  
2. 组件的使用  
作为普通的标签去使用 <my-com></my-com>  
3. 注意事项  
组件的id和使用遵循 a-b-c 命名方式  
全局组件可以在 id 为\#example 的范围内的任何组件直接调用  
局部组件只能在父模板中直接调用  
三. 自定义指令  
创建和使用：  
// 创建  
Vue.directive('change',\{  
  bind:function(el,bindings)\{  
    // 首次调用  
  \}，  
  insert:function(el)\{  
    // 被绑定元素插入父节点时调用  
  \},  
  update:function(el,bindings)\{  
    // 只要有数据变化都会调用  
  \}，  
  unbind:function()\{  
    // 解绑时调用  
  \}  
\})

// 使用  
<any v-change="count"></any>  
  
四. 过滤器  
1. 创建过滤器：  
// 1. 全局过滤器（在创建Vue实例之前定义）  
Vue.filter('myFilter',function(myInput)\{  
    // myInput是在调用过滤器时，管道前表达式执行的结果  
    // 针对myInput，按照业务需求做处理  
    // 返回  
    return '处理后的结果'  
\})  
new Vue(\{  
 ...  
\})

// 2. 局部过滤器 （在组件的选项中定义）  
filters: \{  
  myFilter: function(myInput)\{  
     return '处理后的结果'  
  \}  
\}  
  
2. 使用过滤器:  
在双花括号 \{ \{\}\} 中：   
\{ \{ message | myFilter\}\}

过滤器可以串联：   
\{ \{ message | filterA | filterB \}\}

接收参数：   
\{ \{ message | filterA('arg1', arg2) \}\}

在 v-bind 中 ：   
<div v-bind:id="rawId | myFilter"></div>

五. 常用属性  
1. 计算属性 : computed  
用于模板中，搞定复杂的业务逻辑，因为有依赖缓存

// 指定计算属性  
   computed : \{  
     myHandle : function () \{  
       return 数据  
     \}  
   \}

//  调用  
  <any>\{ \{myHandle\}\}</any>  
  
2. 侦听器 : watch  
表单元素的双向数据绑定

// 监听  
    watch : \{  
      //  如果  myValue  发生改变，这个函数就会运行  
      myValue : function (newValue,oldValue) \{  
          ...  
      \}  
    \}  
  
六. 生命周期  
四个阶段 ( 8个钩子 )  
create ：准备工作（数据的初始化…），beforeCreate / created  
mount ：挂载前后针对元素进行操作，beforeMount / mounted  
update ：数据发生变化，beforeUpdate / updated  
destroy ：清理工作(关闭定时器、集合清空..)，beforeDestroy/ destroyed  
七. 组件间通信  
1. 父与子通信 （props , down）：  
    1.发送  
    <son myName="chenzhijie"></son>

2.接收  
       到son组件：

//  简单语法 数组   
        Vue.component('child', \{  
             // 声明 props  
             props: \['message'\],  
             // 就像 data 一样，prop 也可以在模板中使用  
             // 同样也可以在 vm 实例中通过 this.message 来使用  
             template: '<span>\{ \{ message \}\}</span>'  
        \})

// 对象语法，提供校验  
        Vue.component('child', \{  
          props: \{  
            // 检测类型  
            height: Number,  
            // 检测类型 + 其他验证  
            age: \{  
              type: Number,  
              default: 0,  
              required: true,  
              validator: function (value) \{  
                return value >= 0  
              \},  
              // 检测类型 + default (对象)  
              desc:\{  
                type:Object,  
                default()\{  
                    return \{  
                        all:'全部',  
                        positive:'满意',  
                        negative:'不满意'  
                    \}  
                \}  
              \}  
            \}  
          \}  
  
2. 子与父通信 （events , up）：  
    1.绑定  
    <son @customEvent="handleEvent"></son>  
    methods:\{  
      handleEvent:function(mes)\{  
        // mes 就是子组件传过来的100  
      \}  
    \}  
    2. 触发（子组件）  
    this.$emit('customEvent',100);       
3. 在父组件中，得到子组件中的数据、方法 : ref  
     1. 指定ref属性  
         <son ref="mySon"></son>

2. 根据ref得到子组件实例  
         this.$refs.mySon  
4. 得到父组件实例 ：this.$parent  
5. 兄弟组件通信 ：  
    1 var bus = new Vue();

2.发送方  
    bus.$emit('eventName',123);

3.接收方  
    bus.$on('eventName',function(msg)\{\})  
  
八. 路由模块  
1. SPA的基本概念和工作原理  
SPA：single page application 单一页面应用程序，只有一个完整的页面；   
它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。   
比如 webApp

工作原理  
解析地址栏  
根据路由地址，找到要加载的页面  
发起ajax请求  
向指定的容器中插入加载来的页面  
2. 基本用法  
    1.引入vue-router

2.使用<router-link>组件来导航  
        <router-link to="/a"></router-link>  
        <router-link to="/b"></router-link>  
        <router-link to="/c"></router-link>

3.指定路由出口，路由匹配到的组件在此渲染  
        <router-view></router-view>

4.定义路由组件   
        // 可以从其他文件import  
        const a = \{ template: '<div>a</div>' \}  
        const b = \{ template: '<div>b</div>' \}  
        const c = \{ template: '<div>c</div>' \}

5.定义路由  
        const routes = \[  
          \{ path: '/a', component: a \},  
          \{ path: '/b', component: b \},  
          \{ path: '/c', component: c \}

6.创建 router 实例，然后传 \`routes\` 配置  
        // 还可以传别的配置参数,  
        const router = new VueRouter(\{  
              linkActiveClass:'active',  
              routes // （缩写）相当于 routes: routes  
        \})  
    4.创建和挂载根实例。  
        // 记得要通过 router 配置参数注入路由，  
        // 从而让整个应用都有路由功能  
        new Vue(\{  
          el: '\#app',  
          router,  
          components: \{ App \},  
          template: '<App/>'  
        \});  
  
九. axios  
Axios中文说明  
 ————————————————   
版权声明：本文为CSDN博主「微笑感染唇角的无奈」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/chenzhijie101/article/details/79833313