Vue2入门 从0到1

已于 2023-09-18 16:22:57 修改
阅读量57 收藏
点赞数
分类专栏： Vue2 文章标签： javascript 前端 vue.js vue2
于 2023-09-18 15:40:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mebell/article/details/132981509
版权

Vue2.x 基础代码使用说明以及提供一个开箱即用的demo用于练习

安装

开箱即用（学习推荐，最好上手）

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

开始使用

创建一个Vue实列

var App = new Vue({
  el: '#app', // 实列化dom的选择器
  components: {}, // 组件注册
  data: {}, // 数据
  methods: {} // 函数
})

生命周期

总共分为8个阶段：创建前/后,挂载前/后,更新前/后,销毁前/销毁后。

挂载
beforeCreate（创建前）created（创建后）beforeMount（挂载前）mounted（挂载后）

更新（元素或组件的变更操作）
beforeUpdate（更新前）updated（更新后）

销毁（销毁相关属性）
beforeDestroy（销毁前）destroyed（销毁后）

以上生命周期常用的最常用的是mounted（挂载后） 前置数据的获取处理在这里，因载入前dom并没有渲染到页面上，我们需要操作dom时会获取到undefined。

其次是destroyed（销毁后）是saas中使用到的，用于组件中定时任务的清除。

数据绑定与渲染

1.{{xxx}}

模板写法
例子 <h3>{{ message }}</h3>

2.v-bind:xxx

绑定内容到html属性中
例子 <h3 v-bind:class="xxx"></h3>
简写 <h3 :class="xxx"></h3>

3.v-model

双向绑定
例子 <input v-model="xxx">

4.v-html

以html的形式在标签内部渲染内容
例子 <div v-html="xxx"></div>

5.v-show

是否显示dom
例子 <div v-show="true||fasle"></div>

6.v-if，v-else

是否渲染dom
需要注意v-else永远跟随前面一个v-if，并且不提供else if功能
例子 <div v-if="boolean"></div><div v-else></div>

7.v-for

列表渲染
例子 <li v-for="(item, index) in list" :key="唯一标识"></li>

事件处理

事件绑定 v-on:xxx
例子 <button v-on:click="changeColor">切换颜色</button>
简写 <button @click="changeColor">切换颜色</button>

事件绑定分为带括号和不带括号，是否有括号对事件的影响是不同的，如下
<button @click="funcDemo">无括号</button>
<button @click="funcDemo($event)">有括号时传入事件对象</button>
<button @click="funcDemo('arg1')">有括号传参1</button>
<button @click="funcDemo('arg1', 'arg2')">有括号传参2</button>
<button @click="funcDemoObj1({a:1,b:2,c:3})">传入对象</button>
<button @click="funcDemoObj2({a:1,b:2,c:3})">传入对象 解构赋值</button>

当参数传入对象时，会因为接收方式的不同改变参数格式，如下
funcDemoObj1(obj){} 接收整个对象
funcDemoObj2({a, b, d = 4}){}只接收对象中的a和b，并声明一个包含默认值的属性

有意思的是时间函数不管是否传入$event在函数中都可以通过event获取事件对象

组件注册

全局注册
Vue.component('component-a', { /* ... */ })

局部注册
定义组件 var ComponentA = { /* ... */ }
然后在 components 选项中定义你想要使用的组件,如：components: { ComponentA }

Html中引入 或者 在模块化开发中当组件不使用插槽时可直接作为自合闭标签来使用如 或者 。
其中全大写的写法，只能在模块化开发中使用，同时也推荐在模块化开发中使用，以便于我们能快速查找代码位置与区分组件的来源。现在项目中，我们自己封装或者二次封装的组件就是使用的这种风格。

自定义组件

以下是一个公共基础组件代码的声明

Vue.component('component-a', {
  props: ['title'],
  template: '<h3 @click="func">A Num：{{clickNum}} ------ {{title}} <slot></slot></h3>',
  data () {
    return {
      clickNum: 0
    }
  },
  watch: {
    clickNum: {
      handler(newV, oldV) {}
    }
  },
  // ...生命周期
  methods: { 
    func() {
      this.clickNum++
      this.$emit('callback', '组件A参数1', '组件A参数2')
    }
  }
})

在父组件中使用 <component-a title="xxx" ></component-a>

Props

父组件通过props向子组件传递数据 父组件中写法<component-a title=”xxx”/>
上面的基础组件代码中的写法是一个基础写法，只包含了参数名称
更加复杂严谨的写法如下：

props: {
  // 限制类型
  a: Number,
  // 多个可能类型
  b: [String, Number],
  // 必填
  c: {
    type: String,
    required: true
  },
  // 带有默认值
  d: {
    type: Number,
    default: 100
  },
  // 对象默认值
  e: {
    type: Object,
    default() {
      return { message: 'hello' }
    }
  }
}

其中必填和默认值这两项不需要同时存在选择其一即可
Props是单向数据流绑定，子组件中通过$emit调用父组件暴露给子组件的函数进行参数传递修改。代码如下：
父组件暴露函数给子组件：
<component-a title="xxx" @xxx=”()=>{}”></component-a>
子组件调用：
this.$emit('xxx')
this.$emit('xxx', ...参数)

Template

是模板代码书写位置，写法和html完全相同
当使用模块化开发时，此处代码放到文件中的<template></template>标签中
<slot></slot>插槽：
子组件中需要的地方加入<slot></slot>即可在加入的位置渲染父组件调用子组件时在组件标签中写入的内容。

Data

这里并不像之前的实列化Vue一样是一个对象，组件中的data必须一个函数，每个实列化的组件单独维护一份被返回对象，因此我们可以再同一个页面中多次引入一个相同的组件而不会相互影响

Watch

以下是一个简单的监听器代码结构：

watch: {
  xxx(newValue, oldValue) {}
}

也可以这么写：

watch: {
  xxx: {
    // 是数据改变时触发的函数
    handler(newValue, oldValue) {}
  }
}

xxx是要监听的属性名称，如需监听对象中的某个属性写法为 'obj.xxx'字符串,如下：

watch: {
  'obj.xxx': {
    // 是数据改变时触发的函数
    handler(newValue, oldValue) {}
  }
}
Methods

函数代码位置，函数中的this指向当前实列对象，因此可以再函数中通过this.xxx获取所有当前组件中的内容

以下是包含上述内容的dome

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      
      <h3>{{ message }}</h3>
      
      <input v-model="message" @change="funcDemo('change', message)" @focus="funcDemo('focus', message)">
      
      <h3 :class="color">颜色</h3>
      
      <div>
        <button v-on:click="changeColor">切换颜色</button>
        <br /><br />
        <button @click="funcDemo">无括号</button>
        <button @click="funcDemo($event)">传入事件对象</button>
        <button @click="funcDemo('arg1')">传参1</button>
        <button @click="funcDemo('arg1', 'arg2')">传参2</button>
        <button @click="funcDemoObj1({a:1,b:2,c:3})">传入对象</button>
        <button @click="funcDemoObj2({a:1,b:2,c:3})">传入对象 解构赋值</button>
        <br /><br />
      </div>
      
      <h3 v-html="html"></h3>
      
      <ul>
        <li v-for="(item, index) in list" :key="item">no:{{index}} val:{{item}}</li>
      </ul>
      
      <component-a title="组件1" @callback="funcDemo">插槽区域提示的内容</component-a>
      <component-a title="组件2"></component-a>
      <component-b :a="3" b="字符串或者数字" c="必填项" d="改变默认值" :e="{message: '改变对象默认message的值'}"></component-b>
    </div>
    
  </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  Vue.component('component-a', {
    props: ['title'],
    template: '<h3 @click="func">A Num：{{clickNum}} ------ {{title}} <slot></slot></h3>',
    data () {
      return {
        clickNum: 0,
      }
    },
    watch: {
      clickNum: {
        handler(newV, oldV) {
          console.log('clickNum oldV', oldV, 'clickNum newV', newV)
        }
      }
    },
    methods: { 
      func() {
        this.clickNum++
        this.$emit('callback', '组件A参数1', '组件A参数2')
      }
    }
  })
  
  var ComponentB = {
    props: {
      // 限制类型
      a: Number,
      // 多个可能类型
      b: [String, Number],
      // 必填
      c: {
        type: String,
        required: true
      },
      // 带有默认值
      d: {
         type: String,
         default: '默认值'
      },
      // 对象默认值
      e: {
        type: Object,
        // 对象或数组默认值必须从一个工厂函数获取
        default() {
          return { message: '对象中message' }
        }
      },
    },
    template: `<div>
      <h4>A：{{a}}</h4>
      <h4>B：{{b}}</h4>
      <h4>C：{{c}}</h4>
      <h4>D：{{d}}</h4>
      <h4>E：{{e.message}}</h4>
    </div>`,
    data() {
      return {}
    }
  }
  
  var App = new Vue({
    el: '#app',
    components: {ComponentB},
    data: {
      color: 'red',
      message: 'Hello Vue!',
      html: '<span class="blue">这是一端蓝色文字的html渲染</span>',
      list: ['a','b','c']
    },
    mounted() {
      console.log('mounted...')
    },
    methods: {
      changeColor() {
        if (this.color == 'blue') {
          this.color = 'red'
        } else {
          this.color = 'blue'
        }
      },
      funcDemo(arg1, arg2 = '默认的值2') {
        console.log('参数1', arg1, '参数2', arg2)
      },
      funcDemoObj1(obj) {
        console.log('参数', obj)
      },
      funcDemoObj2({a, b, d = 4}) {
        console.log('参数a', a ,'参数b', b, '参数d', d)
      }
    }
  })
</script>
<style>
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
</style>



框架搭建整体流程

点击下载步骤 1-7 配置完成的完整 Demo

-Bell-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue从入门到精通
03-28
vue从入门到精通适合刚入职场的小白，也适合职场多年的前端高手，为您全方位打造
vue 3.0学习笔记(从入门到精通)
10-07
vue 3.0自我学习整理的笔记，有很大的参考价值，包括了所有的知识点，vue的开发环境搭建、组件开发、数据状态管理、vue route、组件之前数据传递等有关知识点
Vue2--Day01(基础代码，响应式，指令）
weixin_72756818的博客
04-17 129
Vue2--Day01(基础代码，响应式，指令）
Vue2学习之第一、二章——Vue核心与组件化编程
Adios_0403的博客
12-26 509
英文官网:中文官网:})注意：必须在new Vue实例之前定义全局过滤器自定义指令总结：定义语法：(1).局部指令：new Vue({directives:{指令名:配置对象}})或new Vue({directives{指令名:回调函数}})(2).全局指令：Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)配置对象中常用的3个回调：(1).bind：指令与元素成功绑定时调用。
vue2.x带你手写响应式代码（响应式原理）
m0_47883103的博客
08-30 4007
vuex响应式原理？其实很简单啦！！一步一步带你写
Vue学习之从入门到神经(两万字收藏篇)
热门推荐
白大锅的博客，毕设WangLoveBai_999
07-20 36万+
Vue史诗级教程系列文章，欢迎订阅专栏
Vue基础知识总结 1：Vue入门
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
vue从入门到精通.rar
03-30
vue入门教程系列源码，小白级别入门教程，包含12个小结的源代码。
Vue从入门到精通基础课程（视频）.txt
06-05
该资源适合新接触Vue的人员进行学习，通过视频进行学习，更方便于理解。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 550
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 1043
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1266
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 806
Vue在表单校验中trigger属性指定何时触发校验规则
vue格网图
最新发布
南北粉面馆
06-16 145
【代码】vue格网图。
vue3 防止按钮的连续点击（连点）
MtangEr的博客
06-13 281
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
？和？？的用法 ---Javascript
weixin_45705239的博客
06-13 197
当你在JavaScript中看到问号（?）和双问号（??）时，它们通常是用于条件处理和空值合并的操作符。
使用nodejs/exceljs读取、操作、写入excel文件
qiuzen的博客
06-12 331
【代码】使用nodejs/exceljs读取、操作、写入excel文件。
Python私教张大鹏 Vue3整合AntDesignVue之Menu 导航菜单
Python私教
06-11 507
何时使用 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。 更多布局和导航的使用可以参考：通用布局。 开发者注意事项 Menu 元素为 ul，因而仅支持 li 以及 script-supporting 子元素。因而你的子节点元素应该都在 Menu.Item 内使用。 Menu 需要计算节点结构，因而其子元素仅支持 Menu.* 以及对此进行封装的 HOC 组件。 必须为 SubMenu 设置唯
07_第七章 前端工程化
weixin_65644655的博客
06-13 765
第七章 前端工程化 一、前端工程化开篇 1.1 什么是前端工程化 前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本。 1.2 前端工程化实现技术栈 前端工程化实现的技术栈有很多,我们采用ES6+nodejs+npm+Vite+VUE3+router+pinia+axios+Element-plus组合来实现 ECMAScript6 VUE3中大量使用ES6语法 Nodejs 前端
Vue2从入门到精通教程
05-20
Vue.js是一款非常流行的前端框架，它可以帮助我们快速构建交互性强、易于维护的Web应用。如果你想学习Vue.js，下面是一个从入门到精通的学习路线： ## 入门阶段 #### 1. 熟悉HTML、CSS和JavaScript 在学习Vue.js之前，你需要对HTML、CSS和JavaScript有一定的了解。如果没有，可以先学习相关基础知识。 #### 2. 学习Vue.js的基本语法 Vue.js的核心是一个响应式的数据绑定系统和一个组件化的架构。你需要学会使用Vue.js的模板语法、指令、计算属性、组件等等。 #### 3. 学习Vue.js的生命周期 Vue.js的生命周期钩子可以让你在组件的不同阶段执行特定的操作。你需要学习各个钩子的作用以及如何使用它们。 #### 4. 学习Vue.js的路由功能 Vue.js提供了一个官方的路由库vue-router，可以帮助你构建单页面应用。学习如何使用vue-router来进行路由管理。 ## 进阶阶段 #### 1. 学习Vue.js的状态管理 Vue.js提供了一个官方的状态管理库vuex，可以帮助你管理应用中的状态。学习如何使用vuex来进行状态管理。 #### 2. 学习Vue.js的动画效果 Vue.js提供了一个官方的动画库vue-animated，可以帮助你实现各种动画效果。学习如何使用vue-animated来创建动画效果。 #### 3. 学习Vue.js的服务端渲染 Vue.js提供了一个官方的服务端渲染库vue-server-renderer，可以帮助你将Vue.js应用渲染成HTML字符串，以提高SEO效果。学习如何使用vue-server-renderer进行服务端渲染。 ## 精通阶段 #### 1. 学习Vue.js的源码 如果你想深入理解Vue.js的实现原理，可以学习Vue.js的源码。Vue.js的源码非常优雅，是学习前端框架设计的绝佳范例。 #### 2. 学习Vue.js的插件开发 Vue.js的插件机制非常灵活，你可以开发各种各样的插件来扩展Vue.js的功能。学习如何开发Vue.js的插件。 #### 3. 学习Vue.js的性能优化 Vue.js的性能优化非常重要，可以帮助你提高应用的响应速度和用户体验。学习如何进行Vue.js的性能优化。 以上就是Vue2从入门到精通的学习路线，希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值