vue 基础入门

这篇具有很好参考价值的文章主要介绍了vue 基础入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

vue 基础入门

vue 简介

1、vue 的特性

vue 的基本使用

1、基本使用步骤

2、vue 的调试工具

vue 的指令

1、内容渲染指令{{ }}

2、属性绑定指令 v-bind:

3、事件绑定  v-on:   @

4、双向绑定指令 v-model

5、 条件渲染指令 v-if v-show 

 6 、列表渲染指令 v-for

vue过滤器 

1、定义过滤器基本使用

2、 私有过滤器和全局过滤器

3、过滤器的注意点

watch 侦听器

1、使用 watch 检测用户名是否可用 

2、侦听器的格式

对象侦听器

deep 选项   

 计算属性

1、计算属性的特点

vue-cli 的使用 

1、安装和使用

2、vue 项目中 src 目录的构成:

3、vue 项目的运行流程

 

vue 组件

1、vue 组件的三个组成部分

template

script

style

2、组件之间的父子关系

3、通过 components 注册的是私有子组件

4、注册全局组件

5、组件的 props

6、组件之间的样式冲突问题

7、组件的生命周期

 8、组件之间的数据共享


vue 基础入门

vue 简介

是一套用于构建用户界面的前端框架

1、vue 的特性

  • 数据驱动视图
  •  双向数据绑定

数据驱动视图

vue 会监听数据的变化,从而自动重新渲染页面的结构

双向数据绑定

填写表单 时,双向数据绑定可以辅助开发者在 不操作 DOM 的前提下 自动 把用户填写的内容 同步到 数据源中

MVVM

MVVM 是 vue 实现数据驱动视图双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel,

vue 的基本使用

1、基本使用步骤

  1. 导入 vue.js 的 script 脚本文件
  2.  在页面中声明一个将要被 vue 所控制的 DOM 区域
  3. 创建 vm 实例对象(vue 实例对象)
    <!-- 希望 Vue 能够控制下面的这个 div,帮我们在把数据填充到 div 内部 -->
      <div id="app">{{ username }}</div> //视图部分
    
      <!-- 1. 导入 Vue 的库文件,在 window 全局就有了 Vue 这个构造函数 -->
      <script src="./lib/vue-2.6.12.js"></script>
      <!-- 2. 创建 Vue 的实例对象 -->
      <script>
        // 创建 Vue 的实例对象 
        const vm = new Vue({
          // el 属性是固定的写法,表示当前 vm 实例要控制页面上的哪个区域,接收的值是一个选择器
          el: '#app',
          // data 对象就是要渲染到页面上的数据
          data: {
            username: 'zhangsan'
          }
        })
      </script>

2、vue 的调试工具

Chrome 浏览器 在线安装 vue-devtools :
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
安装 vue-devtools 调试工具
点击 Chrome 浏览器右上角的 按钮,选择 更多工具 -> 扩展程序 -> Vue.js devtools 详细信息

vue 的指令

指令的概念

指令(Directives)是 vue 为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构

vue 中的指令 按照不同的用途 可以分为如下 6 大类:
  1. 内容渲染指令
  2. 属性绑定指令
  3. 事件绑定指令
  4. 双向绑定指令
  5. 条件渲染指令
  6. 列表渲染指令

1、内容渲染指令{{ }}

内容渲染指令 用来辅助开发者 渲染 DOM 元素的文本内容 。常用的内容渲染指令有如下 3 个:
  •  v-text
  •  {{ }}
  • v-html

v-text 语法

<div id="app">
    <p v-text="username"></p>
    <p v-text="gender">性别:</p>
</div>
v-text 指令会 覆盖元素内默认的值

{{ }} 语法

vue 提供的 {{ }}  插值表达式  语法,专门用来解决 v-text 会覆盖默认文本内容的问题
<p>姓名:{{ username }}</p>
    <p>性别:{{ gender }}</p>

v-html 语法

v-text 指令和 插值表达式 只能渲染 纯文本内容 。如果要把 包含 HTML 标签的字符串 渲染为页面的 HTML 元素,
则需要用到 v-html 这个指令:
<div v-html="info"></div>

2、属性绑定指令 v-bind:

注意:插值表达式只能用在元素的内容节点中,不能用在元素的属性节点中!

  • 在 vue 中,可以使用 v-bind: 指令,为元素的属性动态绑定值;

  • 简写是英文的 :

  • 在使用 v-bind 属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号,例如:

    <div :title="'box' + index">这是一个 div</div>

3、事件绑定  v-on:   @

  1. v-on: 简写是 @

  2. 语法格式为:

    <button @click="add"></button>
    
    methods: {
       add() {
                // 如果在方法中要修改 data 中的数据,可以通过 this 访问到
                this.count += 1
       }
    }
  3. $event 的应用场景:如果默认的事件对象 e 被覆盖了,则可以手动传递一个 $event。例如:

    <button @click="add(3, $event)"></button>
    
    methods: {
       add(n, e) {
                // 如果在方法中要修改 data 中的数据,可以通过 this 访问到
                this.count += 1
       }
    }
    
  4. 事件修饰符:

    • .prevent  阻止默认行为

      <a @click.prevent="xxx">链接</a>
      
    • .stop  阻止事件冒泡

      <button @click.stop="xxx">按钮</button>
      vue 基础入门,vue2,javascript,vue.js,javascript,前端,前端框架,npm
  5. 按键修饰符
    <div id="app">
        <input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">
      </div>

4、双向绑定指令 v-model

<div id="app">
    <p>用户的名字是:{{ username }}</p>
    <input type="text" v-model="username">
    
    <hr>
    <select v-model="city">
      <option value="">请选择城市</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">广州</option>
    </select>
  </div>
  1. input 输入框
    • type="radio"
    • type="checkbox"
    • type="xxxx"
  2. textarea
  3. select
v-model 指令的修饰符

 vue 基础入门,vue2,javascript,vue.js,javascript,前端,前端框架,npm

语法:

 <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1 + n2 }}</span>

5、 条件渲染指令 v-if v-show 

  1. v-show 的原理是:动态为元素添加或移除 display: none 样式,来实现元素的显示和隐藏
    • 如果要频繁的切换元素的显示状态,用 v-show 性能会更好
  2. v-if 的原理是:每次动态创建或移除元素,实现元素的显示和隐藏
    • 如果刚进入页面的时候,某些元素默认不需要被展示,而且后期这个元素很可能也不需要被展示出来,此时 v-if 性能更好

在实际开发中,绝大多数情况,不用考虑性能问题,直接使用 v-if 就好了!!!

v-if 指令在使用的时候,有两种方式:

  1. 直接给定一个布尔值 true 或 false

    <p v-if="true">被 v-if 控制的元素</p>
    
  2. 给 v-if 提供一个判断条件,根据判断的结果是 true 或 false,来控制元素的显示和隐藏

    <p v-if="type === 'A'">良好</p>

 6 、列表渲染指令 v-for

vue 提供了 v-for 列表渲染指令,用来辅助开发者 基于一个数组来循环渲染一个列表结构 。v-for 指令需要使 用 item in list  形式的特殊语法,其中:
  • list 是待循环的数组
  •  item 是被循环的每一项
<tr v-for="(item, index) in list" :key="item.id">
          <td>{{ index }}</td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
        </tr>
使用 key 维护列表的状态
列表的数据变化 时,默认情况下,vue 会 尽可能的复用 已存在的 DOM 元素,从而 提升渲染的性能 。但这种 默认的性能优化策略,会导致 有状态的列表无法被正确更新
为了给 vue 一个提示,以便它能跟踪每个节点的身份, 从而在 保证 有状态的列表被正确更新 的前提下, 提升渲 染的性能 。此时,需要为每项提供一个 唯一的 key 属性
key 的注意事项
key 的值只能是 字符串 数字 类型
key 的值 必须具有唯一性 (即:key 的值不能重复)
建议把 数据项 id 属性的值 作为 key 的值(因为 id 属性的值具有唯一性)
使用 index 的值 当作 key 的值 没有任何意义 (因为 index 的值不具有唯一性)
建议使用 v-for 指令时 一定要指定 key 的值 (既提升性能、又防止列表状态紊乱)

vue过滤器 

过滤器 Filters )是 vue 为开发者提供的功能,常用于 文本的格式化.
过滤器可以用在两个地方: 插值表达式 v-bind 属性绑定
过滤器应该被添加在 JavaScript 表达式的 尾部 ,由“ 管道符 ”进行调用,

1、定义过滤器基本使用

在创建 vue 实例期间,可以在 filters 节点 中定义过滤器
 <div id="app">
    <p>message 的值是:{{ message | capi }}</p>
  </div>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'hello vue.js'
      },
      // 过滤器函数,必须被定义到 filters 节点之下
      // 过滤器本质上是函数
      filters: {
        // 注意:过滤器函数形参中的 val,永远都是“管道符”前面的那个值
        capi(val) {
          // 字符串有 charAt 方法,这个方法接收索引值,表示从字符串中把索引对应的字符,获取出来
          // val.charAt(0)
          const first = val.charAt(0).toUpperCase()
          // 字符串的 slice 方法,可以截取字符串,从指定索引往后截取
          const other = val.slice(1)
          // 强调:过滤器中,一定要有一个返回值
          return first + other
        }
      }
    })
  </script>

2、 私有过滤器全局过滤器

在 filters 节点下定义的过滤器,称为“ 私有过滤器 ”,因为它 只能在当前 vm 实例所控制的 el 区域内使用 。 如果希望 在多个 vue 实例之间共享过滤器 ,则可以按照如下的格式定义 全局过滤器
语法:
 // 使用 Vue.filter() 定义全局过滤器
    Vue.filter('capi', function (str) {
      const first = str.charAt(0).toUpperCase()
      const other = str.slice(1)
      return first + other + '~~~'
    })

3、过滤器的注意点

  1. 要定义到 filters 节点下,本质是一个函数
  2. 在过滤器函数中,一定要有 return 值
  3. 在过滤器的形参中,可以获取到“管道符”前面待处理的那个值
  4. 如果全局过滤器和私有过滤器名字一致,此时按照“就近原则”,调用的是”私有过滤器“

 连续调用多个过滤器

过滤器传参

第一个参数已经固定,传参只能在第二个

过滤器仅在 vue 2.x 和 1.x 中受支持,在 vue 3.x 的版本中剔除了过滤器相关的功能。

watch 侦听器

watch 侦听器 允许开发者监视数据的变化,从而 针对数据的变化做特定的操作

语法格式如下:

 <div id="app">
    <input type="text" v-model="username">
  </div>

<script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },
      // 所有的侦听器,都应该被定义到 watch 节点下
      watch: {
        // 侦听器本质上是一个函数,要监视哪个数据的变化,就把数据名作为方法名即可
        // 新值在前,旧值在后
        username(newVal,oldVal) {
         console.log(neVal,oldVal)
         
        }
      }
    })
  </script>

1、使用 watch 检测用户名是否可用 

语法:

watch: {
        // 侦听器本质上是一个函数,要监视哪个数据的变化,就把数据名作为方法名即可
        // 新值在前,旧值在后
        username(newVal) {
          if (newVal === '') return
          // 1. 调用 jQuery 中的 Ajax 发起请求,判断 newVal 是否被占用!!!
          $.get('请求url/' + newVal, function (result) {
            console.log(result)
          })
        }
      }

2、侦听器的格式

  1. 方法格式的侦听器
    • 缺点1:无法在刚进入页面的时候,自动触发!!!
    • 缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦器!!!
  2. 对象格式的侦听器
    • 好处1:可以通过 immediate 选项,让侦听器自动触发!!!
    • 好处2:可以通过 deep 选项,让侦听器深度监听对象中每个属性的变化!!!
对象侦听器

immediate 选项语法:

<script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },
      // 所有的侦听器,都应该被定义到 watch 节点下
      watch: {
        // 定义对象格式的侦听器
        username: {
          // 侦听器的处理函数
          handler(newVal, oldVal) {
            console.log(newVal, oldVal)
          },
          // immediate 选项的默认值是 false
          // immediate 的作用是:控制侦听器是否自动触发一次!
          immediate: true
        }
      }
    })
  </script>
deep 选项   

语法:  深度侦听   、  侦听的是对象的子属性的变化

 <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 用户的信息对象
        info: {
          username: 'admin',
          address: {
            city: '北京'
          }
        }
      },
      // 所有的侦听器,都应该被定义到 watch 节点下
      watch: {
        /* info: {
          handler(newVal) {
            console.log(newVal)
          },
          // 开启深度监听,只要对象中任何一个属性变化了,都会触发“对象的侦听器”
          deep: true
        } */
        // 如果要侦听的是对象的子属性的变化,则必须包裹一层单引号
        'info.username'(newVal) {
          console.log(newVal)
        }
      }
    })
  </script>

 计算属性

计算属性指的是 通过一系列运算 之后,最终得到一个 属性值
这个动态计算出来的属性值 可以被模板结构或 methods 方法使用
<script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        // 红色
        r: 0,
        // 绿色
        g: 0,
        // 蓝色
        b: 0
      },
      methods: {
        // 点击按钮,在终端显示最新的颜色
        show() {
          console.log(this.rgb)
        }
      },
      // 所有的计算属性,都要定义到 computed 节点之下
      // 计算属性在定义的时候,要定义成“方法格式”
      computed: {
        // rgb 作为一个计算属性,被定义成了方法格式,
        // 最终,在这个方法中,要返回一个生成好的 rgb(x,x,x) 的字符串
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }
    });

1、计算属性的特点

特点:

  1. 定义的时候,要被定义为“方法”
  2. 在使用计算属性的时候,当普通的属性使用即可

好处:

  1. 实现了代码的复用
  2. 只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值!

vue-cli 的使用 

vue-cli Vue.js 开发的标准工具 。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。
中文官网: https://cli.vuejs.org/zh/

1、安装和使用

vue-cli npm 上的一个 全局包 使用 npm install 命令,即可方便的把它安装到自己的电脑上:
npm install -g @vue/cli     
如果安装报错,检查node.js是否安装正确 ,主要是全局模块的目录和缓存路径,
npm config set prefix "创建的node_global文件夹所在路径"
npm config set cache "创建的node_cache文件夹所在路径"
再配置环境变量
基于 vue-cli 快速生成工程化的 Vue 项目:
vue create 项目的名称   
键盘上下键 选择 vue2  vue3 手动选择    最后一项 初学者
vue 基础入门,vue2,javascript,vue.js,javascript,前端,前端框架,npm
带* 的需要安装 其他不需要  空格选择

vue 基础入门,vue2,javascript,vue.js,javascript,前端,前端框架,npm 选择2.X

 选择

 vue 基础入门,vue2,javascript,vue.js,javascript,前端,前端框架,npm

第一项
vue 基础入门,vue2,javascript,vue.js,javascript,前端,前端框架,npm

2、vue 项目中 src 目录的构成:

assets 文件夹:存放项目中用到的静态资源文件,例如:css 样式表、图片资源
components 文件夹:程序员封装的、可复用的组件,都要放到 components 目录下
main.js 是项目的入口文件。整个项目的运行,要先执行 main.js
App.vue 是项目的根组件。

3、vue 项目的运行流程

在工程化的项目中, vue 要做的事情很单纯:通过 main.js App.vue 渲染到 index.html 的指定区域中。
  1. App.vue 用来编写待渲染的模板结构
  2. index.html 中需要预留一个 el 区域
  3. main.js App.vue 渲染到了 index.html 所预留的区域中vue 基础入门,vue2,javascript,vue.js,javascript,前端,前端框架,npm

vue 组件

组件化开发 指的是:根据 封装 的思想, 把页面上可重用的 UI 结构封装为组件 ,从而方便项目的开发和维护。
vue 是一个 支持组件化开发 的前端框架。
vue 中规定: 组件的后缀名 .vue 。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

1、vue 组件的三个组成部分

  • template -> 组件的模板结构
  • script -> 组件的 JavaScript 行为
  • style -> 组件的样式
其中, 每个组件中必须包含 template 模板结构 ,而 script 行为 style 样式 可选的 组成部分。
template

vue 规定:每个组件对应的模板结构,需要定义到 <template> 节点中。

注意:
  • template vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素
  •  template 中只能包含唯一的根节点
script
vue 规定:开发者可以在 <script> 节点中 封装组件的 JavaScript 业务逻辑
<script > 节点的基本结构如下:
默认导出  固定写法
<script>
// 默认导出。这是固定写法!
export default {
  // data 数据源
  // 注意:.vue 组件中的 data 不能像之前一样,不能指向对象。
  // 注意:组件中的 data 必须是一个函数
  data() {
    // 这个 return 出去的 { } 中,可以定义数据
    return {
      username: 'admin'
    }
  },
  methods: {
    chagneName() {
      // 在组件中, this 就表示当前组件的实例对象
      console.log(this)
      this.username = '123'
    }
  },
  // 当前组件中的侦听器
  watch: {},
  // 当前组件中的计算属性
  computed: {},
  // 当前组件中的过滤器
  filters: {}
}
</script>
vue 组件中的 data 必须是函数
vue 规定: .vue 组件中的 data 必须是一个函数 不能 直接 指向一个数据对象
style
vue 规定:组件内的 <style> 节点是 可选的 ,开发者可以在 <style> 节点中 编写样式美化当前组件的 UI 结构
<script > 节点的基本结构如下:
<style lang="less">
.test-box {
  background-color: pink;
  h3 {
    color: red;
  }
}
</style>

2、组件之间的父子关系

使用组件的三个步骤

步骤1:在<script> 节点中使用 import 语法导入需要的组件

import Left from '@/components/Left.vue'
步骤 2:在export default{ }使用 components 节点注册组件 
  // 2. 注册组件
  components: {
    Left,
    Right,
    Test
  }
步骤 3 以标签形式 使用刚才注册的组件
<div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 3. 以标签形式,使用注册好的组件 -->
      <Left></Left>
      <Right></Right>
    </div>

vscode中配置@路径提示插件 可以参看网上教程 注意:开发的那个项目,就定位到那个项目,然后用vscode打开。(不要有与这个项目无关的文件),不然@路径提示将失效

3、通过 components 注册的是私有子组件

组件 A components 节点下,注册了 组件 F
则组件 F 只能用在组件 A 中;不能被用在 组件 C 中。

4、注册全局组件

vue 项目的 main.js 入口文件中,通过 Vue.component() 方法,可以注册全局组件。示例代码如下:

// 导入需要被全局注册的那个组件
import Count from '@/components/Count.vue'
//参数一:注册名称 参数二:需要注册全局的哪个组件
Vue.component('MyCount', Count)

5、组件的 props

props 是组件的 自定义属性 ,在 封装通用组件 的时候,合理地使用 props 可以极大的 提高组件的复用性
它的语法格式如下:
props: ['自定义属性']
<MyCount :init="6"></MyCount>

加  :   为数值  不加为字符串

vue 规定:组件中封装的自定义属性是 只读的 ,程序员 不能直接修改 props 的值。否则会直接报错
要想修改 props 的值,可以 props 的值转存到 data ,因为 data 中的数据都是可读可写的
data() {
    return {
      // 把 props 中的 init 值,转存到 count 上
      count: this.init
    }
  }
在声明自定义属性时,可以通过 default 定义属性的默认值 
在声明自定义属性时,可以通过 type 定义属性的值类型
在声明自定义属性时,可以通过 required 选项,将属性设置为 必填项 ,强制用户必须传递属性的值。示例代 码如下:
props: {
    // 自定义属性A : { /* 配置选项 */ },
    // 自定义属性B : { /* 配置选项 */ },
    // 自定义属性C : { /* 配置选项 */ },
    init: {
      // 如果外界使用 Count 组件的时候,没有传递 init 属性,则默认值生效
      default: 0,
      // init 的值类型必须是 Number 数字
      type: Number,
      // 必填项校验
      required: true
    }
  },

6、组件之间的样式冲突问题

默认情况下,写在 .vue 组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题

导致组件之间样式冲突的根本原因是:
① 单页面应用程序中,所有组件的 DOM 结构,都是基于 唯一的 index.html 页面 进行呈现的
② 每个组件中的样式,都会 影响整个 index.html 页面 中的 DOM 元素

 解决组件样式冲突的问题

为每个组件 分配唯一的自定义属性 ,在编写组件样式时,通过 属性选择器 来控制 样式的作用域
style 节点的 scoped 属性
为了提高开发效率和开发体验, vue style 节点 提供了 scoped 属性,从而防止组件之间的样式冲突问题:
<style lang="less" scoped>
/deep/ 样式穿透
​​​​​​​
如果给当前组件的 style 节点添加了 scoped 属性,则 当前组件的样式对其子组件是不生效的 。如果想让某些样 式对子组件生效,可以使用 /deep/ 深度选择器
// h5[data-v-3c83f0b7]
// [data-v-3c83f0b7] h5

// 当使用第三方组件库的时候,如果有修改第三方组件默认样式的需求,需要用到 /deep/
/deep/ h5 {
  color: pink;
}

​​​​​​​注意:/deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代 /deep/

 7、组件之间的数据共享

组件之间的关系
  1. 父子关系
  2. 兄弟关系
父子组件之间的数据共享又分为:
-> 共享数据 :父组件向子组件共享数据需要使用 自定义属性
//父组件
<Left :msg="message" :user="userinfo"></Left>


data() {
    return {
      message: 'hello',
      userinfo: { name: 'zs', age: 18 },
     
    }
//子组件
<p>msg 的值是:{{ msg }}</p>
    <p>user 的值是:{{ user }}</p>



props: ['msg', 'user']


-> 共享数据 :子组件向父组件共享数据使用 自定义事件
//子组件
export default {
  data() {
    return {
      // 子组件自己的数据,将来希望把 count 值传给父组件
      count: 0
      
    }
  },

methods: {
    add() {
      // 让子组件的 count 值自增 +1
      this.count += 1
      // 把自增的结果,传给父组件   定义事件numchange名字
      this.$emit('numchange', this.count)
    }
  }
 //父组件

<Right @numchange="getNewCount"></Right>

data() {
    return {
   
      // 定义 countFromSon 来接收子组件传递过来的数据
      countFromSon: 0
    }
  },

methods: {
    // 获取子组件传递过来的数据
    getNewCount(val) {
      console.log('numchange 事件被触发了!', val)
      this.countFromSon = val
    }
  }
兄弟组件之间的数据共享
vue2.x 中,兄弟组件之间数据共享的方案是 EventBus
EventBus 的使用步骤
  1.  创建 eventBus.js 模块,并向外共享一个 Vue 的实例对象
    import Vue from 'vue'
    
    export default new Vue()
    
  2.  在数据发送方,调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件
    <button @click="send">发给 Right</button>
    
    // 1. 导入 eventBus.js 模块
    import bus from './eventBus.js'
    
    export default {
      data() {
        return {
          str: `hello`
        }
      },
      methods: {
        send() {
          // 2. 通过 eventBus 来发送数据
          bus.$emit('share', this.str)
        }
      }
  3.  在数据接收方,调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件
    // 1. 导入 eventBus.js 模块
    import bus from './eventBus.js'
    
    export default {
      data() {
        return {
          msgFromLeft: ''
        }
      },
      created() {
        // 2. 为 bus 绑定自定义事件
        bus.$on('share', val => {
          this.msgFromLeft = val
        })
      }
    }

 组件的生命周期

生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁

生命周期 & 生命周期函数文章来源地址https://www.toymoban.com/news/detail-515998.html

Vue生命周期:一个Vue实例从 创建 销毁 的整个过程。
生命周期函数 :是由 vue 框架提供的 内置函数 ,会伴随着组件的生命周期, 自动按次序执行
注意: 生命周期 强调的是 时间段 生命周期函数 强调的是 时间点
组件生命周期函数的分类
https://cn.vuejs.org/v2/guide/instance.html# 生命周期图示
vue 基础入门,vue2,javascript,vue.js,javascript,前端,前端框架,npm
 // created 生命周期函数,非常常用。
    // 经常在它里面,调用 methods 中的方法,请求服务器的数据。
    // 并且,把请求到的数据,转存到 data 中,供 template 模板渲染的时候使用!

到了这里,关于vue 基础入门的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 第四章:前端框架Vue基础入门

    本章学习目标: 了解Vue框架架构思想 掌握Vue核心指令 掌握计算属性与监视 掌握组件化开发模式 官方文档:https://cn.vuejs.org/guide/introduction.html. 文档可选择使用optionsAPI(选项式API)阅读,或者CompositionApi(组合式API)阅读。选项式API更适合平滑从vue2过渡,以下示例均以Compositi

    2024年02月12日
    浏览(43)
  • 〖大前端 - 基础入门三大核心之JS篇⑱〗- JavaScript的流程控制语句「break 和 continue语句」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月05日
    浏览(55)
  • 〖大前端 - 基础入门三大核心之JS篇⑯〗- JavaScript的流程控制语句「for循环语句及算法题」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月07日
    浏览(50)
  • 【前端框架】Vue2合集

    1、Vue概念 vue 是一个用于构建用户界面的渐进式框架,由数据驱动 vue 的两种使用方式 vue 核心包开发:局部模块改造 vue 核心包与 vue 插件 工程化开发:整站 开发 2、 创建实例 1、准备容器 2、导包 3、创建Vue实例 4、指定配置项 = 渲染数据 3、插值表达式 插值表达式语法:

    2024年01月19日
    浏览(47)
  • 前端实现websocket通信讲解(vue2框架)

    前言 :最近接到的需求是前端需要实现一个全局告警弹窗,如果使用ajax请求http接口只能用定时器定时去请求是否有告警,这样既消耗资源,又不能实时监测到告警信息。所以这个时候就可以采用websocket来实现通信,因为websocket不用请求一次才响应一次,它可以实现服务器主

    2024年02月12日
    浏览(35)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(75)
  • 关于前端框架vue2升级为vue3的相关说明

    一些框架需要升级 当前(202306) Vue 的最新稳定版本是 v3.3.4 。Vue 框架升级为最新的3.0版本,涉及的相关依赖变更有: 前提条件:已安装 16.0 或更高版本的Node.js(摘) 必须的变更:核心库vue@23、路由vue-router@34、状态管理vuex@34 构建工具链: Vue CLI Vite(摘) 状态管理: Vuex Pi

    2024年02月15日
    浏览(47)
  • web前端框架JS学习之JavaScript类型转换

    vascript有多种数据类型,如字符串、数字、布尔等,可以通过typeof语句来查看变量的数据类型。数据类型转换就是数据类型之间相互转换,比如把数字转成字符串、把布尔值转成字符串、把字符串转成数字等,这在工作也是经常碰到的。 本期我们就给大家说说web前端框架JS学

    2024年02月10日
    浏览(59)
  • vue2基础 入门vue2

    vue项目搭建 vue单文件组件 mustach表达式 vue指令 methods方法 filters过滤器 computed计算属性 watch监听器 vue组件 vue-router 路由 vue生命周期 vue组件通信 slot插槽 vuex 状态管理 vuejs 是一个构建 数据驱动 的渐进式MVVM框架 数据驱动:不用操作dom(vue) 渐进式: 渐进式开发---模块的使用

    2024年02月13日
    浏览(43)
  • 前端学习--vue2--2--vue指令基础

    写在前面: 前置内容 - vue配置 vue指令只的是带有v-前缀的特殊标签属性 插值表达式{{}}是一种vue模板语法。 利用表达式进行差值,渲染到页面。 表达式可以是被求值的代码,js会计算 不能用差值表达式的 不存在的数据 {{data里面不存在的字段 js {{if}} 标签属性 span id=“

    2024年02月14日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包