您的位置: 首页  >  文章  >  2020-08-28-Vue学习（一）

2020-08-28-Vue学习（一）

分类: 文章 • 2023-11-15 19:57:16

 

前言

前端学习之路，目标Vue+react

 

一、HTML+CSS+JS入门

这些入门知识在各部分可以找到，本人学习是在http://www.lvyestudy.com/（绿叶学习网）总结较为到位，但是因为时间过于久远，有些东西需要补充和更新，可以在 菜鸟教程 和 W3School 对应学习

二、HTML+CSS+JS进阶学习

1.学习网站

绿叶学习网：http://www.lvyestudy.com/

菜鸟教程：www.runoob.com

W3school：https://www.w3school.com.cn/  （中文版的）

B站：https://www.bilibili.com/video/BV1i7411Z7d8?p=92   （html5+css3）

         https://www.bilibili.com/video/BV15741177Eh?p=58     （Vue学习）

         https://www.bilibili.com/video/BV1xW411x7sw?p=9       （es6）

其他：   https://es6.ruanyifeng.com/#docs/spec                          （阮一峰的es6入门）

 

三、Vue学习之路

一、基础知识

（一）、认识

  • 渐进式框架
  • 高级功能
  • 解耦视图和数据
  • 可复用的组件
  • 前端路由技术
  • 状态管理
  • 虚拟DOM

（二）、生命周期（来自之前B站vue的视频，若侵权即删除）2020-08-28-Vue学习（一）

 

（三）、基础语法

  1、Options

  • el 挂载点，绑定DOM元素
  • data 数据对象
  • methods 方法
  • computed 计算属性，类似于methods，但会进行缓存，效   率更高
  • filters 过滤
  • components: 组件

  2、Mustache语法，即通过‘{{}}’使用数据

  3、指令

v-once：元素和组件只渲染一次

v-html：解析html代码并渲染

v-text: 文本

v-pre：跳过这个元素和它子元素的编译过程

v-cloak：斗篷，掩藏未编译的mustache标签

v-bind：动态绑定属性，语法糖“:”

v-on：事件监听，语法糖“@”，可以通过$event传入事件

修饰符：

.stop - 调用 event.stopPropagation()，阻止冒泡。

.prevent - 调用 event.preventDefault()，阻止默认行为。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回 调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

 

v-if、v-else、v-else-if：根据表达式的值在DOM中渲染或销毁元素或 组件。

v-show：决定元素是否渲染，但是通过设置display属性实现

v-for：遍历数组，格式类似(item, index) in items

           使用时加上:key属性，作用主要是为了高效的更新虚拟DOM

 

v-model：实现表单元素和数据的双向绑定，本质上是

                a.v-bind绑定一个value属性

               b.v-on指令给当前元素绑定input事件

               这两个操作的集合

修饰符

.lazy： v-model默认是在input事件中同步输入框的数据的。lazy修饰符 让数据在失去焦点或者回车时才会更新

.number修饰符： 让在输入框中输入的内容自动转成数字类型：

trim修饰符： 过滤内容左右两边的空格

 

二、组件化

（一）、组件的使用：

创建组件构造器，通过Vue.extends()方法

注册组件,通过Vue.component()方法

使用组件。Vue实例范围内使用组件

（二）、全局组件和局部组件

如果注册的组件是挂载在某个实例中, 那么就是一个局部组件

（三）、父组件和子组件

在某个组件构造器中注册使用另一个组件，则两者为父子关系，并且若想在vue实例范围中使用，就要在vue中注册，vue本身可以看作一个root组件

  • 语法糖：省去调用Vue.extend()的步骤，而是直接使用一个对象来代替。在component方法中实现
  • 模板分离写法，使用<script type=“text/x-template”>标签，or    使用<template>标签，不过要通过id绑定到对应组件上

（四）、关于组件部分

Data在组件中必须是一个函数，如果是对象的话，改动会导致相互影响致使连锁反应，且vue实例无法直接访问组件中的数据，组件中也有methods、compute等写法

（五）父子组件间的通信

  • 通过props向子组件传递数据:

在组件的option中使用props使用数组或对象来传递数据，在使用对象时可以指定类型、默认值乃至是否必须传送，在父组件中通过v-bind绑定

  • 通过事件向父组件发送消息：

       主要流程是：

       在子组件中，通过$emit(‘事件名’, 参数)来触发事件。

       在父组件中，通过v-on来监听子组件事件。

（六）、父子组件间的访问

  •  父组件访问子组件：使用$children或$refs：

this.$children是一个数组类型，它包含所有子组件对象。

$refs和ref指令通常是一起使用的。

先通过ref给某一个子组件绑定一个特定的ID。

再通过this.$refs.ID就访问到该组件了

 

  • 子组件访问父组件：使用$parent：

子组件应该尽量避免直接访问父组件的数据，因为这样耦合度 太高

（七）、编译作用域

（八）、Slot插槽

为了让封装的组件更具扩展性，作为组件中的预留内容，完成不同实现

  • 具名插槽：渲染指定的插槽

在向具名插槽提供内容的时候，需要在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称

  • 作用域插槽：父组件替换插槽的标签，但是内容由子组件来 提供。

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。在父级作用域中，使用带值的 v-slot 来定义我们提供的插槽 prop 的名字

  • v-slot指令是新版内容，且只能在templat标签内使用，有参数时刻缩写为” # ”

 

三、其他

（一）模块化规范

  1. CommonJS

导出：module.export = {}

导入：let (...) = require(‘filename’)

  1. ES6模块

导出：

export {...}

export function funcname(argument...){}

export class classname{...}

export default ...(可以由导入者自行命名，且文件中只有一个)

导入：

Import {} from ‘filename’

Import * as ‘alias’ from ‘filename’

 

插槽代码如下（示例）：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

 

<body>

<div id="app">

  <cpn>

<!-- 1、具名插槽的使用 -->

    <!-- <template v-slot:search>此处原为搜索</template> -->

 

<!-- 2,作用域插槽的使用 -->

    <template v-slot:case="slotProps">

      <span>{{slotProps.lang.join('/')}}</span>

    </template>

  </cpn>

 

  <cpn></cpn>

</div>

 

<template id="cpn">

  <div>

    <span>组件模板</span>

    <br>

<!-- 1、具名插槽使用 -->

    <!-- <slot name="search"><button>搜索</button></slot>

    <br>

    <slot name="password"><input type="password"></slot>

    <br>

    <slot name="input"><span>输入</span></slot> -->

 

<!-- 2、作用域插槽的使用 -->

      <slot :lang='pLanguages' name='case'>

        <ul>

          <li v-for="item in pLanguages">{{item}}</li>

        </ul>

      </slot>

  </div>

</template>

 

<script src="../js/vue.js"></script>

<script>

  const app = new Vue({

      el: "#app",

      data: {

        message:"hello"

      },

      components: {

        cpn:  {

          template: '#cpn',

          data(){

            return  {

              pLanguages:['Java', 'C++', 'Go', 'Python', 'PHP', 'C#', 'Vue']

            }

        }

        },

      }

    })

</script>

</body>

</html>


 

总结

第一次写博客，vue的学习总结

相关推荐