Vue2基础学习

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

Vue基础指令

v-show 和 v-if

Vue2基础学习,vue.js,学习,前端

应用场景:
这里的请登录注册,对于已经登录的用户是不需要展示的;而购物车,当鼠标移入的时候会显示,鼠标移出隐藏…
Vue2基础学习,vue.js,学习,前端

v-on指令

以下演示了如何定义方法,如何获取data中的变量
Vue2基础学习,vue.js,学习,前端
以下演示函数传参
Vue2基础学习,vue.js,学习,前端

v-bind指令

作用:动态设置html标签属性->src、title、url,可使用简写,:src:url
Vue2基础学习,vue.js,学习,前端
练习:
Vue2基础学习,vue.js,学习,前端

v-bind操作class

Vue2基础学习,vue.js,学习,前端

v-bind 操作style

适应场景:某个具体属性的动态设置
Vue2基础学习,vue.js,学习,前端

v-for 指令练习:图书管理案例

Vue2基础学习,vue.js,学习,前端

v-model

作用:给表单元素使用,双向数据绑定,可以快速获取或设置表单元素内容
Vue2基础学习,vue.js,学习,前端

v-model原理

Vue2基础学习,vue.js,学习,前端

指令修饰符

Vue2基础学习,vue.js,学习,前端

v-model指令修饰符

Vue2基础学习,vue.js,学习,前端

@click.stop-》阻止冒泡

Vue2基础学习,vue.js,学习,前端

按键修饰符

Vue2基础学习,vue.js,学习,前端

阻止默认行为

Vue2基础学习,vue.js,学习,前端

计算属性

计算属性简写

基于现有的数据,计算出来的新属性。依赖的数据变化,自动重新计算。
Vue2基础学习,vue.js,学习,前端

computed计算属性VS方法methods

Vue2基础学习,vue.js,学习,前端

计算属性完整写法

计算属性默认的简写,只能读取访问,不能"修改"。如果要"修改"→需要写计算属性的完整写法。
Vue2基础学习,vue.js,学习,前端
Vue2基础学习,vue.js,学习,前端

watch 侦听器(监视器)

watch 侦听器简写

作用:监视数据变化,执行一些 业务逻辑 或 异步操作
Vue2基础学习,vue.js,学习,前端

watch 侦听器完整写法

完整写法>添加额外配置项
(1) deep: true 对复杂类型深度监视
(2) immediate: true 初始化立刻执行一次handler方法
具体查看视频:https://www.bilibili.com/video/BV1HV4y1a7n4?p=33&spm_id_from=pageDriver&vd_source=c3fc4867486b99c0b85501121f575279

Vue生命周期

Vue生命周期钩子函数

Vue生命周期:一个Vue实例从 创建到销毁的整个过程生命周期四个阶段: 创建挂载更新销毁
Vue生命周期过程中,会自动运行一些函数,被称为[生命周期钩子],让开发者可以在[特定阶段] 运行自己的代码
Vue2基础学习,vue.js,学习,前端

Vue-cli

使用步骤

1.全局安装(一次): yarn global add @vue/clinpm i @vue/cli -g
2.查看 Vue 版本:vue --version
3.创建项目架子:vue create project-name (项目名-不能用中文)
4.启动项目: yarn servenpm run serve (找package.json)

项目目录介绍

Vue2基础学习,vue.js,学习,前端

项目支持Less

如下图,要想在代码中写less样式,得安装相关依赖:

  • 给style加上 lang="less"
  • 安装依赖 yarn add less less-loader -D
    Vue2基础学习,vue.js,学习,前端

普通组件的注册

局部注册

局部注册:只能在注册的组件内部使用

  • 创建vue组件(比如在components目录下)
  • 在使用的组件内导入并注册
<template>
  <div class="app">
    <MyHeader></MyHeader>
    <MyMain></MyMain>
    <MyFoot></MyFoot>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyMain from './components/MyMain.vue'
import MyFoot from './components/MyFoot.vue'
export default {
  components: { // 局部注册
    MyHeader: MyHeader,
    MyMain: MyMain,
    MyFoot: MyFoot
  }
}
</script>
<style lang="less">
.app {
  width: 600px;
  height: 600px;
  background-color: #87ceeb;
}
</style>
<template>
  <div class="header">
    我是头头
  </div>
</template>
<script>
export default {}
</script>

<style>
.header {
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    background-color: pink;
}
</style>

其它两个组件就不粘贴了,一样的写法…

全局注册

  • 创建vue组件(比如在components目录下)
  • main.js进行全局注册
    比如说上面那个例子,header-main-footer结构,我想在三层结构里都加个button,就可以把button定义全局组件,使用的时候
import Vue from 'vue'
import App from './App.vue'
// 引入
import MyButton from './components/MyButton'

Vue.config.productionTip = false

// 进行全局注册,在所有的组件范围内都可以用
Vue.component('MyButton', MyButton) // (组件名,组件对象)

new Vue({
  render: h => h(App),
}).$mount('#app')

在其它组件中直接使用就行了,也无须import引入,后续button有变化,只需要改全局组件即可
Vue2基础学习,vue.js,学习,前端

组件的样式冲突 scoped

Vue2基础学习,vue.js,学习,前端

data是一个函数

一个组件的 data 选项必须是一个函数。 保证每个组件实例,都有独立的一份数据对象
Vue2基础学习,vue.js,学习,前端

组件通信

组件通信,就是指 组件与组件 之间的数据传递

  • 组件的数据是独立的,无法直接访问其他组件的数据。
  • 想用其他组件的数据->组件通信
    组件关系分类: 父子关系 、非父子关系
    Vue2基础学习,vue.js,学习,前端

父->子通信

Vue2基础学习,vue.js,学习,前端
代码如下:

<template>
  <div style="border:3px solid #000; margin:10px">
    我是父组件
    <Son :title="myTitle"></Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  components: {
    Son: Son
  },
  data() {
    return {
      myTitle: "你好呀我是"
    }
  }
}
</script>
<style >
</style>
<template>
  <div style="border:3px solid #000; margin:10px">
    我是Son组件
    {{title}}
  </div>
  
</template>

<script>
export default {
  // 通过 props 接收
  props: ['title']
}
</script>

<style scope>
</style>

子 -> 父通信

Vue2基础学习,vue.js,学习,前端

什么是prop

Vue2基础学习,vue.js,学习,前端
相关视频:https://www.bilibili.com/video/BV1HV4y1a7n4?p=51&spm_id_from=pageDriver&vd_source=c3fc4867486b99c0b85501121f575279

EventBus非父子通信(了解)

Vue2基础学习,vue.js,学习,前端
EventBus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

res 和 refs

Vue2基础学习,vue.js,学习,前端

Vue异步更新和$nextTick

Vue2基础学习,vue.js,学习,前端

slot插槽

适应场景:组件结构一样,内容不一样
Vue2基础学习,vue.js,学习,前端
插槽视频:https://www.bilibili.com/video/BV1HV4y1a7n4?p=66&spm_id_from=pageDriver&vd_source=c3fc4867486b99c0b85501121f575279

ViewRouter

视频地址:https://www.bilibili.com/video/BV1HV4y1a7n4?p=73&spm_id_from=pageDriver&vd_source=c3fc4867486b99c0b85501121f575279

查询参数传参

Vue2基础学习,vue.js,学习,前端

动态路由传参

Vue2基础学习,vue.js,学习,前端

首页重定向和404

Vue2基础学习,vue.js,学习,前端

点击按钮跳转

Vue2基础学习,vue.js,学习,前端
如果跳转的时候传参呢
Vue2基础学习,vue.js,学习,前端
总结
Vue2基础学习,vue.js,学习,前端

Vuex

Vue2基础学习,vue.js,学习,前端
store定义
Vue2基础学习,vue.js,学习,前端

Vue2基础学习,vue.js,学习,前端
修改state中的数据
Vue2基础学习,vue.js,学习,前端
调用mutation传参,如果有多个,包装成json对象即可
Vue2基础学习,vue.js,学习,前端文章来源地址https://www.toymoban.com/news/detail-696154.html

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

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

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

相关文章

  • 前端学习---vue2--指令修饰符详解

    写在前面: 前端感觉系统学起来还行,我也不晓得我是咋快速入门1个月就开始看实习公司代码的。然后现在开始系统复习,然后感觉有的封装的还可以,不过就是我不晓得,像这个指令修饰符,其实说逻辑难写,倒是也没有,就是简单不用自己写. 就像后端判断字符串是否为

    2024年02月14日
    浏览(33)
  • 前端小白的学习之路(Vue2 四)

    提示:学习vue2的第四天,笔记记录:混入(mixins),插槽(slot),过渡与动画(transition) 目录 一、混入(mixins) 二、插槽(solt) 1.匿名插槽 2.具名插槽 三、过渡与动画(transition)  1.过渡 1)单元素过渡 Ⅰ.通用类名 Ⅱ.指定类名 2)多元素过渡  2.动画  1.自定义动画 2.使用动画库  混入(M

    2024年04月12日
    浏览(35)
  • Vue2基础学习

    应用场景: 这里的请登录注册,对于已经登录的用户是不需要展示的;而购物车,当鼠标移入的时候会显示,鼠标移出隐藏… 以下演示了如何定义方法,如何获取data中的变量 以下演示函数传参 作用:动态设置html标签属性-src、title、url,可使用简写, :src 、 :url 练习: 适应

    2024年02月09日
    浏览(36)
  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(63)
  • 前端学习---vue2--选项/数据--data-computed-watch-methods-props

    写在前面: vue提供了很多数据相关的。 简单的说就是进行双向绑定的区域。 vue实例的数据对象,会把data的数据转换成getter和setter,从而可以进行响应式的变化, vue实例创建后,可以通过vm.$data.x获取data里面的x,但同时vue实例也代理了其中的对象,所以我们一般使用简单的

    2024年02月14日
    浏览(40)
  • 【前端Vue】Vue学习笔记之基础内容

    Vue实例:通过new Vue()创建的Vue实例,它关联一个DOM元素并提供数据和组件的上下文。 文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一

    2023年04月23日
    浏览(56)
  • 【前端vue面试】vue2

    computed 有缓存,基于响应式依赖数据(基于data中声明过或者父组件传递的props中的数据)发生改变,才会重新进行计算 数据变,直接会触发相应的操作 watch监听引用类型,需要添加deep:true深度监听,拿不到oldVal(旧值),因为新值和老值指针相同。 v-show 和v-if 都是做条件隐

    2024年02月08日
    浏览(39)
  • 前端技术学习第八讲:VUE基础语法---初识VUE

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时

    2023年04月27日
    浏览(47)
  • 前端技术学习第九讲:VUE基础语法---VUE常用指令

    在VUE学习中,通常使用相关指令使VUE对象中的内容与网页进行挂载绑定,是我们的数据与视图之间产生关联,完成渐进式动态效果。VUE指令都会以“v-”开头。 指令名 描述 v-text 将文本内容挂载到页面元素中 v-html 将html代码展示到页面元素中 v-bind 将内容解析成为js,绑定至页

    2024年02月13日
    浏览(42)
  • Vue2 系列:vue.config.js 参数配置

    1. publicPath 默认值:\\\'/\\\' 说明:部署应用包时的基本 URL,例:https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/ 提示:1. 当使用基于 HTML5 history.pushState 的路由时 2.当使用 pages 选项构建多页面应用时。 2. outputDir 默认值:\\\'dist\\\' 说明:打包目录。 提示:目标目录在构建之前会被

    2024年02月11日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包