Vue2入门从0到1

安装

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

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<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中引入 <component-a></component-a> 或者 <ComponentA></ComponentA>在模块化开发中当组件不使用插槽时可直接作为自合闭标签来使用如<component-a/> 或者 <ComponentA/>。
其中全大写的写法，只能在模块化开发中使用，同时也推荐在模块化开发中使用，以便于我们能快速查找代码位置与区分组件的来源。现在项目中，我们自己封装或者二次封装的组件就是使用的这种风格。

自定义组件

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

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

最后编辑于：2023.09.18 15:36:35

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,547评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,399评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,428评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,599评论 1赞 274
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,612评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,577评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,941评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,603评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,852评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,605评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,693评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,375评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,955评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,936评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,172评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,970评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,414评论 2赞 342

Vue2入门从0到1

Vue2入门从0到1

安装

开始使用

生命周期

数据绑定与渲染

1.{{xxx}}

2.v-bind:xxx

3.v-model

4.v-html

5.v-show

6.v-if，v-else

7.v-for

事件处理

组件注册

自定义组件

Props

Template

Data

Watch

Methods

以下是包含上述内容的dome

框架搭建整体流程

第一步 Vue2 使用 Vue 脚手架 Vue CLI 搭建一个 Vue.js 前端项目框架

第二步 Vue2 vue.config.js 基础配置，路径别名alias

第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局变量

第四步 Vue2 配置ESLint

第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置图片压缩

第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui

第七步 Webpack 配置多环境和全局变量 cross-env 和 webpack.DefinePlugin

推荐阅读更多精彩内容

Vue2入门 从0到1

安装

开始使用

生命周期

数据绑定与渲染

1.{{xxx}}

2.v-bind:xxx

3.v-model

4.v-html

5.v-show

6.v-if，v-else

7.v-for

事件处理

组件注册

自定义组件

Props

Template

Data

Watch

Methods

以下是包含上述内容的dome

框架搭建整体流程

第一步 Vue2 使用 Vue 脚手架 Vue CLI 搭建一个 Vue.js 前端项目框架

第二步 Vue2 vue.config.js 基础配置，路径别名alias

第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局变量

第四步 Vue2 配置ESLint

第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置图片压缩

第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui

第七步 Webpack 配置多环境和全局变量 cross-env 和 webpack.DefinePlugin

推荐阅读更多精彩内容

Vue2入门从0到1