Vue2入门从0到1

作者: _Bell_ | 来源:发表于2023-08-09 17:24 被阅读0次

从0到0，从0到1。
从0到1入门Python（笔记1）
ConstraintLayout 从 0「入门」到 1 「放弃
从 0 到 1 认识从 0 到 1
从1到0，0到1。
从0到运营入门
SpriteKit从0到入门
零基础学习weex（二）Vue2.0
从0到1快速入门小程序
从0到1,ThinkPHP框架入门

安装

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

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<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>