Vue 成长之旅 | Vue 基础用法Ⅱ

vue-cli 是一套完整的，辅助我们快速配置webpack的工具，
具体安装参考官网：https://cli.vuejs.org/zh/guide/

如下是通过vue-cli 创建的一个vue 项目

image.png

vue 项目的运行流程

在工程化项目中，vue要做的事情： 通过main.js 把App.vue 渲染到 public/index.html的指定区域中

1、App.vue 用来编写待渲染的模板接口
2、index.html中需要预留一个el区域
3、main.js把App.vue渲染到了index.html所预留的区域中

Vue 组件

使用组件的三个步骤

第一步：导入组件

  // import 后面的名字可以自定义
 import HelloWorld from './components/HelloWorld'        

第二步： 在 components 中声明这个

export default {
  name: 'App',
    data(){
      return{
          msg :'欢迎使用 VUE'
      }
    },
   // 通过 components 注册的是 私有子组件
  components: {
      // 标准的 组件引用， 如果名称是一样的， 可以简写，不要key(例如Right组件)
      'HelloWorld' : HelloWorld,Right,
  }
}

在components 中声明的组件是私有 子组件，不能在其他地方使用

注册全局组件

注册全局组件，那么在其他Vue页面也都可以使用这个组件，

在main.js 中 导入组件， 并使用 Vue.component 方法注册

import HelloWorld from './components/HelloWorld'
// 注册全局组件， 前面的名称可以自定义，后面的参数是组件名称
Vue.component('HelloWorld',HelloWorld)

第三步： 以标签的形式使用组件

在模板标签中使用组件时，如果组件命名是 首字母大写的形式，那么在使用的时候，可以两种方式使用如下：

  // 1、 字母全部小写，并以大写字母为分割，中间以- 为分割使用
  
  // 2、直接以注册的名称使用
  

自定义组件中声明外接变量

在自定义组件中，需要对外提供一个变量，方便使用组件时，修改组件里面的数据，需要用到 props 属性

props 是组件的自定义属性 ， 在封装通用组件的时候， 合理使用props可以提高组件的复用性

通过打印当前组件对象this,可以查知道，props 里面声明的变量，也会出现在this对象里面， 所以在页面中可以直接使用。

需要注意的地方：

1、props 声明的变量虽然可以直接使用， 但是这里的变量是只读的，如果修改，在控制台会报错，但不影响使用 ；如果要在当前组件中，修改传进来的数据，那么可以在data中声明一个变量，把传进来的变量值赋值给data中的变量：

export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    data() {
        return {
            // 在当前组件中， 直接使用和修改myMsg 变量即可
            myMsg : this.msg
        }
    }
}

2、用数组的形式，声明有局限性，建议用对象的形式声明

export default {
    // VUE 规定， props 封装的属性是只读的，不能直接修改里面属性的值
    props:{
        msg:{
            // 给一个默认值（在使用改组件时，可以不传这个参数）
            default:'12',
            // 限定类型（Number 、 String  、Object）, 只能传指定的类型
            type:String,
            // 限定这个参数是否必须，如果是true, 那么在使用时，必须添加这个属性参数
            require:true
        }
    },
    data(){
        return{
            myMsg:this.msg
        }
    }
}

组件之间的样式冲突

由于vue 文件都会编译成js css 用于到 一个html 文件中，所以如果在某个vue 中定义了一个公共的 样式（h3{color:red}），那么在其他 多个vue 页面中使用到这个公共组件(h3) ， 就会有影响。

解决思路：给当前vue组件都添加一个 唯一属性， 并在样式中也组合属性使用例如： h3[data-v-123]{color:red} , 那么就会限定只有

且带有data-v-123 属性的标签生效

vue 也为我们提供了这个解决方案，就是在 style 标签添加一个属性 scoped

// 这样在编译的过程中， 就会给每个元素添加一个随机属性，且在样式里面也添加这个随机属性

如果当前vue页面中引用了第三方的组件， 同时修改了第三方组件中的部分元素的样式，使用scoped ，也会让第三方组件中的元素样式失效，那么可以在指定的样式前面添加一个 /deep/ 样式穿透

/deep/ 样式穿透

这样编译器，会在当前vue页面生成 特殊的样式
[dev-v-123] h3{ color : red }
这样是一个组合样式， 那么在子组件中的h3标签组件， 也能生效

生命周期

image.png

beforeCreate

这个方法，只是实例化了组件， 组件的data 、methods、props 等等所有属性都不能使用

created

这个方法中， 初始化了组件的数据，组件的data、methods、props等等属性都可以使用，常在这个方法中请求网络

beforeMount

这个方法中，内存中的组件还没渲染到页面上， 不能通过docoument 去操作页面元素

mounted

这个方法 ， 会把内存中的组件元素渲染到页面上，可以操作dom结构了

beforeUpdate

当data里面的数据发生变化的时候，会调用这个函数，此时data里面的数据已经发生过了改变，但是dom上对应的元素还是旧数据，即最新的数据还没有渲染到页面上

Update

data最新的数据已经渲染到页面上

beforeDestory

准备删除组件，调用的函数，此时还没有开始删除

destroyed

v-if 条件表达式，条件为false，就会删除组件
删除组件

组件间数据传输

第一种情况： 父向子组件传数据

通过子组件自定义属性的方式(props)传递
传递基础类型和Object 对象类型的区别
基础类型，是把数据复制一份，传递给子自福建
对象类型，是把对象的引用传递给子组件

第二种情况：子组件向父组件传数据

在子组件中调用 this.$emit()方法

// 子组件 方法
methods:{
    changeCount(){
        this.count ++
        // 第一个参数是自定义的监听事件名称，第二个是传递的参数对象（可以是基础数据(countChangeXX)，也可以是object对象）
        this.$emit("countChangeXX",this.count)
    }
},

// 父组件 方法
// .. 在父组件，使用子组件的时候， 通过@指令绑定子组件中this.$emit 定义的监听事件名称(countChangeXX)，然后绑定一个回调函数 （curCountFun）

// 
methods:{
    curCountFun(val){
        // 在父组件这里， 就可以拿到子组件的数据了
        this.curCount = val
    }
},

第三种情况：兄弟组件之间的数据传输

image.png