Vue 基础入门 - 看这一篇就够了！！！

二品翻译官

已于 2022-09-05 17:21:02 修改

阅读量5.8k

点赞数 9

分类专栏：前端文章标签： vue.js javascript ecmascript

于 2022-09-05 17:05:11 首次发布

本文链接： https://blog.csdn.net/niubiwhat/article/details/126709020

版权

前端专栏收录该内容

5 篇文章 2 订阅

订阅专栏

少则得，多则惑，其出弥远，其知弥少！

小白眼中的前端开发：

◆ 会写 HTML+CSS+JavaScript 就会前端开发
◆ 需要美化页面样式，就拽一个bootstrap过来
◆ 需要操作DOM或发起Ajax请求，再拽一个jQuery过来
◆ 需要快速实现网页布局效果，就拽一个Layui过来

实际前端开发：

◆ 模块化（js的模块化、css的模块化、资源的模块化）
◆ 组件化（复用现有的UI结构、样式、行为）
◆ 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
◆ 自动化（自动化构建、自动部署、自动化测试

Vue2.0-1 Vue简介

Vue2.0-2 Vue基本用法初体验

Vue2.0-3 Vue六大指令

Vue2.0-4 综合案例

Vue2.0-5 入门总结

Vue2.0-6 过滤器

Vue2.0-7 侦听器

Vue2.0-8 computed计算属性(了解)

Vue2.0-9 axios专注数据请求

Vue2.0-10 vue-cli

Vue2.0-11 组件

Vue2.0-12 组件的props

Vue2.0-13 scoped属性解决样式冲突

Vue2.0-14 组件的声明周期

Vue2.0-15 数据间传值

Vue2.0-16 $refs 引用

Vue2.0-1 Vue简介

① 官方概念：Vue是一套用于构建用户界面的前端框架。

√1、构建用户界面：用vue往html页面中填充数据，非常方便。

√2、框架：我们要学习Vue的指令、组件（是对UI结构的复用）、路由、vuex、vue组件库。

② vue的特性：数据驱动视图和双向数据绑定

特性	作用	说明
数据驱动视图	数据的变化会驱动视图自动更新	页面结构会被vue自动渲染
双向数据绑定	form表单负责采集数据，Ajax负责提交数据到js数据中	vue自动获取表单数据

③ MVVM是vue实现数据驱动视图和双向数据绑定的MVVM核心原理，它把每个HTML页面拆分成了三部分：

√1、Model：表示当前页面渲染时所依赖的数据源

√2、View：表示当前页面所渲染的DOM结构

√3、ViewModel：表示vue实例，它是MVVM的核心

Vue2.0-2 Vue基本用法初体验

 <body>
     <!-- 3、希望vue控制下面的div，帮我们把数据填充到div内部 -->
     <div id="app"> {{ message }} </div>
 
     <!-- 1、导入vue库文件，在window全局就有了vue这个构造函数 -->
     <script src="./lib/vue-2.6.12.js"></script>
 
     <!-- 2、创建vue实例对象 -->
     <script>
        const vm = new Vue({
            // el属性是固定写法，表示当前实例要绑定哪个区域
            el: "#app",
            // data对象就是要渲染到页面上的数据
            data: {
                message: "hello world !!"
            }
        })
    </script>
</body>

Vue2.0-3 Vue六大指令

注意：指令是vue开发中最基础、最常用、最简单的知识点

序列	按照用途分类	命令
①	内容渲染指令	v-text="message"、{{ message }}、v-html="message"
②	属性绑定指令	v-bind:value="message" 简写用冒号:value="message"
③	事件绑定属性	v-on:click 简写用@click
④	双向绑定指令	v-model="message"
⑤	条件渲染指令	v-if="true"移除元素 v-show="false"修改display:none
⑥	列表渲染指令	v-for="(item,index) in list"

① 内容渲染指令

 <body>
     <div id="app">
         <!-- v-text 指令缺点：会覆盖元素内部原有内容 -->
         <p v-text="message"></p>
         <!-- {{ }} 插值表达式，实际开发中最常用，不会覆盖原有内容 -->
         <p> {{ message }} </p>
         <!-- 可以将带标签的字符串渲染为页面的HTML元素 -->
         <div v-html="info"></div>
     </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                message: "hello world !!",
                info: "<h4 style='color:red'> v-html语法 </h4>"
            }
        })
    </script>
</body>

② 属性绑定指令

<!-- v-bind 为元素属性动态绑定值，简写用英文冒号: -->
<input type="text" v-bind:placeholder="message">
<input type="text" :placeholder="message">

<!-- Vue支持javascript表达式的运算 -->
{{ number + 1 }}
{{ ok ? 'yes' : 'no' }}
{{ message.split('').reverse().join('') }}
<div :id = "'list' + id"></div>

③ 事件绑定指令事件修饰符按键修饰符

 <!-- v-on:为事件绑定指令，简写用@符号，原生DOM对象有onclick、oninput、onkeyup等 -->
 <button v-on:click="sub">-1</button> <span> {{ count }} </span> <button @click="add(3)">+3</button>
 
 <!-- 当不传参时，默认参数会存在event事件，同时vue也提供了内置变量叫$event，但不经常用 -->
 <button @click="changeColor">虽不传参，但默认会含有event参数</button>
 <button @click="changeColor1(2,$event)"> $event 是vue提供的内置变量 固定写法 </button>
 
 <!-- vue提供的事件修饰符替代事件处理函数中调用了event.preventDefault()或event.stopPropagation() -->
 <a href="http://www.baidu.com" @click.prevent="show">跳转到百度</a>

<!-- 按键修饰符 -->
<input type="text" @keyup.esc="clear" @keyup.enter="submit">

<script src="./lib/vue-2.6.12.js"></script>
<javascript>
  const vm = new Vue({
    el: "#app",
    data: {count: 0},
    methods: {
      sub(){ this.count-- ; },
      add(n){ this.count += n ; },
      changeColor(e){ e.target.style.backgroundColor = 'red'; },
      changeColor1(n,e){ e.target.style.backgroundColor = 'blue'; },
      show(){ console.log("事件修饰符，阻止a标签跳转"); }
    }
  })
</javascript>

事件/按键修饰符	说明（红色为常用事件）
.prevent	阻止默认行为（例如：阻止a连接的跳转、阻止表单的提交等）@click.prevent
.stop	阻止事件冒泡
.capture	以捕捉模式触发当前的事件处理函数
.once	绑定的事件只触发一次
.selt	只有在event.target是当前元素自身时触发事件处理函数
.enter（按键修饰符）	按下Enter键时触发相应功能例如:@keyup.enter = "submit"
.esc（按键修饰符）	按下Esc键时触发功能例如：@keyup.esc = "clearValue"

④ 双向绑定指令

 <!-- html代码 -->
 <select v-model="city">
   <option value="1">北京</option>
   <option value="2">杭州</option>
   <option value="3">苏州</option>
 </select>
 <!-- 当失去焦点时，实现数据更新 -->
 <input type="text" v-model.lazy="message">
 <!-- js代码 -->
data: {
  city: 2
}

v-model专用修饰符	作用	实例
.number	自动将用户的输入值转为数值类型	<input v-model.number="age" />
.trim	自动过滤用户输入的首尾空白字符	<input v-model.trim="msg" />
.lazy	在"change"时而非"input"时更新	<input v-model.lazy="msg" />

⑤ 条件渲染指令

<!-- type值为A 实现if判断 -->
<div v-if = "type === 'C'">加油</div>
<div v-else-if = "type === 'B'">良好</div>
<div v-else = "type === 'A'">优秀</div>
<!-- v-show指令 flag为真显示 为false隐藏元素 -->
<div v-show = "flag">当flag为true时，显示该元素</div>

⑥ 列表渲染指令

 <!-- html代码 -->
 <!-- 官方建议使用循环要绑定:key属性，不要用索引做key值 key可以是字符串也可以是数字 -->
 <div v-for="(item,index) in list" :key="item.id">
   <p> {{"索引"+index}}: {{item.name}} </p>
 </div>
 <!-- data中数据内容 -->
 data: {
   list: [
     {id:"A",name:"张三",age:"20"},
    {id:"B",name:"李四",age:"80"}
  ]
}

Vue2.0-4 综合案例

① 案例界面

② 关键代码展示

 <form >
   // 5、实现v-model.trim功能 去除前后空格
   <input type="text" placeholder="请输入品牌名称" v-model.trim="brand">
   // 4、使用.prevent修饰符阻止表单默认提交，并触发add功能
   <button type="submit" @click.prevent="add">添加</button>
 </form>
 <tbody>
   // 1、渲染数据
   <tr v-for="(item,index) in list" :key="item.id">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>
      <div>
        // 2、动态生成checkbox的id属性值，添加v-mode 并做if判断
        <input type="checkbox" :id="'customSwitch'+item.id" v-model="item.status">
        <label :for="'customSwitch'+item.id" v-if="item.status">已启用</label>
        <label :for="'customSwitch'+item.id" v-else>已禁用</label>
      </div>
    </td>
    <td>{{ item.time }}</td>
    <td> 
     // 3、传入id实现删除功能
     <a href="javascript:;" @click="remove(item.id)">删除</a>
    </td>
  </tr>
</tbody>
<script src="./lib/vue-2.6.12.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        brand: "",  // 接收录入的数据
        maxId: 4,   // 设定最大id
        list: [
          {id: 1,name: "宝马",status: true,time: new Date()},
          {id: 2,name: "奔驰",status: false,time: new Date()},
          {id: 3,name: "奥迪",status: true,time: new Date()},
        ]
      },
      methods: {
        // 根据id删除list中数据，练习filter过滤器
        remove(id){ this.list = this.list.filter(item => item.id != id) ; },
        // 添加数据后 清空输入框内容同时让id自增1
        add(){const obj={id: this.maxId,name: this.brand,status: true,time: new Date() };
          this.list.push(obj);
          this.brand = "";
          this.maxId++;
        }
      }
    })
  </script>

Vue2.0-5 入门总结

① 能够知道vue的基本使用步骤

导入vue.js文件
new Vue() 构造函数，得到vue实例对象
声明el和data数据节点
MVVM的对应关系

② 掌握vue中常见指令的用法

插值表达式、v-bind、v-on、v-if和v-else
v-for 和 :key、v-model

③ 掌握vue中过滤器的基本用法

全局过滤器Vue.filter('过滤器名称',function)
私有过滤器filters节点

Vue2.0-6 过滤器

① 私有过滤器

 <!-- 过滤器常用于文本格式化 在双括号中通过"管道符"调用capi 过滤器 -->
 <div id="app"> {{ message | capitalize }} </div>
 
 <script src="./lib/vue-2.6.12.js"></script>
 <script>
   var vm = new Vue({
      el: "#app",
      data: {
        message: "hello !!!"
     },
     // 过滤器定义在filters节点之下，过滤器本身是一个函数
     filters: {
       capitalize (val){
         return val.charAt(0).toUpperCase()+val.slice(1)
       }
     }
  })
</script>

② 全局过滤器

 <!-- #app2 调用全局过滤器 -->
 <div id="app2"> {{ message | capitalize }} </div>
 
 <script src="./lib/vue-2.6.12.js"></script>
 <script>
     // 使用Vue.filter定义全局过滤器
     Vue.filter('capitalize ',function(str){
         // 首字母大写 返回：B：全局过滤器
         return str.charAt(0).toUpperCase()+str.slice(1);
    });
    const vm2 = new Vue({
        el: "#app2",
        data: {
            message: "b:全局过滤器"
        }
    });
</script>

③ 格式化时间过滤器

 <!-- 使用过滤器格式化时间 Fri Sep 02 2022 12:09:47 GMT+0800 (中国标准时间) => 2022-09-02 12:10:13   -->
 <div id="app">  {{ date | capitalize }} </div>
 
 <script src="./lib/dayjs.min.js"></script>
 <script src="./lib/vue-2.6.12.js"></script>
 <script>
     // 调用dayjs库 格式化时间
     Vue.filter('capitalize',function(time){
         return dayjs(time).format('YYYY-MM-DD HH:mm:ss');;
    });
    const vm = new Vue({
        el: "#app",
        data: {
            date: new Date()
        }
    })
</script>

④ 调用多个过滤器 Vue 3.0 剔除了过滤器

 <!-- 过滤器常用于文本格式化 在双括号中通过"管道符"调用capi 过滤器 -->
 <p>  {{ msg | capitalize(arg1,arg2) }} </p>
 
 <script>
  ...
   // 第一个参数永远是管道符前面的值，从第二个参数开始才是传递过去的arg1 arg2...
   Vue.filters('capitalize',( msg,arg1,arg2 ) => {
     //过滤器代码逻辑
   })
 ...
</script>

Vue2.0-7 侦听器

侦听器格式	优缺点
方法格式侦听器	缺点①：无法自动触发。缺点②：如果侦听对象数据，是不会触发侦听
对象格式侦听器	优点①：使用immediate选项自动触发一次。优点②：通过deep选项，侦听对象数据。

① 侦听器基本语法

 <input id="app" type="text" v-model="username">
 
 <script src="./lib/dayjs.min.js"></script>
 <script src="./lib/vue-2.6.12.js"></script>
 <script>
     const vm = new Vue({
         el: "#app",
         data: {
             username: "侦听器",
        },
        // 所有侦听器 都定义到watch节点下
        watch: {
            // 侦听器是一个函数，要监视哪条数据变化，就把数据名作为方法名 新值在前 旧值在后
            username(newVal,oldVal){
                console.log("监听username的变化:",newVal,oldVal);
            }
        }
    })
</script>

② 判断用户名是否被占用

 <script src="./lib/dayjs.min.js"></script>
 <script src="./lib/jquery.min.js"></script>
 <script>
         const vm = new Vue({
             el: "input",
             data: {
                 username: "侦听器",
             },
             watch: {
                username(newVal,oldVal){
                    if (newVal === "") return alert("不能为空");
                    $.get('https://www.escook.cn/api/finduser/'+newVal,function(result){
                        console.log(result);
                    })
                }
             }
        })
    </script>

③ immediate选项侦听器自动执行一次

 <script>
   const vm = new Vue({
     el: "input",
     data: {
       username: "侦听器",
     },
     watch: {
       username: {
         handler(newVal,oldVal){
        console.log(newVal,oldVal);
      },
      // immediate 默认是false，控制侦听器是否自动执行一次
      immediate: true
    } 
  }
})
</script>

④ 开启deep深度监听对象数据的变化

 <script>
         const vm = new Vue({
             el: "input",
             data: {
                 info: {
                     username: "deep深度侦听"
                 }
             },
             watch: {
                info: {
                    handler(newVal,oldVal){
                        console.log(newVal,oldVal);
                    },
                    // 开启deep深度监听，只要对象中任何一个属性发生变化，都会触发对象侦听器
                    deep:true
                } ,
                // 如果要侦听的是对象的子属性变化，则必须包裹一层单引号
                'info.username': {
                    handler(newVal,oldVal){
                        console.log(newVal);
                    }
                }
            }
        })
    </script>

Vue2.0-8 computed计算属性(了解)

√特点：要被定义为方法，在使用计算时，当普通属性使用即可。

√好处：实现代码复用，只要计算属性依赖的数据源发生变化，则计算属性自动重新求值！

 <div id = "app">
     <input type="text" v-model = "a">
     <input type="text" v-model = "b">
     <input type="text" v-model = "c">
     <!-- :style 代表动态绑定一个样式，它的值是一个 { } 样式对象，当前样式只包含 backgroundColor 背景颜色 -->
     <div class="box" :style="{backgroundColor:rgb}"></div> 
 </div>
 
 <script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            a: 0,
            b: 0,
            c: 0
        },
        computed: {
            // 这里用的 `${}` 表达式获取值
            // rgb作为一个计算属性，被定义成方法，最终返回rgb(x,x,x)的字符串
            rgb(){
                return `rgb(${this.a},${this.b},${this.c})` ;
            }
        }
    })
</script>

Vue2.0-9 axios专注数据请求

① 基本语法

 <script src="./lib/axios.js"></script>
 <script>
     // 1、GET请求
     axios({
         method: 'get',
         url: 'http://www.liulongbin.top:3006/api/getbooks',
         // get 传参用params url中的参数
         params: {
             id: 1
        },
    }).then((result) => {
        console.log(result);
    })

    // 2、POST请求
    document.querySelector('#btn').addEventListener('click',function(){
      axios({
        method: 'post',
        url: 'http://www.liulongbin.top:3006/api/post',
        // post 传参用data 请求体参数
        data: { name: 'zs', age: 19 }
      }).then((result) => {
        console.log(result);
      })
    })
</script>

② 结合 async 和 await 调用axios

 // 如果调用的方法返回值是Promise实例，则前面可以添加 await
 // await 还能用在 async 修饰的方法中
 document.querySelector('#btn').addEventListener('click',async function(){
     const result = await axios({
         method: 'post',
         url: 'http://www.liulongbin.top:3006/api/post',
         data: {
             name: 'zs',
             age: 19
        }
    })
    console.log(result);
})

③ 使用解构赋值

 // 1、调用axios之后，使用async / await 进行简化
 // 2、使用解构赋值，从axios封装的大对象中把 data 属性解构出来
 // 3、把解构出来的 data 属性，使用冒号进行重命名，一般命名为 { data:res }
 document.querySelector('#btnGet').addEventListener('click',async function(){
     const { data:res } = await axios({
         method: 'get',
         url: 'http://www.liulongbin.top:3006/api/getbooks',
         params: {
             id: 1
        }
    })
    console.log(res.data);
})

④ 基于axios发起get和post请求

 // GET请求
 document.querySelector('#btnGet').addEventListener('click',async function(){
     const {data:res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks?id=1')
     console.log('get请求',res);
 })
 
 // POST请求
 document.querySelector('#btnPost').addEventListener('click',async function(){
     const {data:res} = await axios.post('http://www.liulongbin.top:3006/api/post',{username:'zs',age:19})
    console.log('post请求',res);
})

Vue2.0-10 vue-cli

① vue-cli 简介与安装

√vue-cli是Vue.js开发的标准工具，简化了程序员基于webpack创建工程化的Vue项目过程。

√引用vue-cli官网上的一句话：程序员可以专注在撰写应用上，而不必花时间纠结webpack配置的问题。

// vue-cli 是 npm 上的一个全局包 用-g参数安装
E:\Demo\vue-cli>npm install -g @vue/cli

// 查看安装是否成功
E:\Demo\vue-cli>vue -v

// 注意：如果报错 一般是安装的位置不对 将vue-cli东西拷贝到nodejs文件夹内
E:\Demo\vue-cli>npm list --global

② 创建vue项目

 // 1、vue create 项目名称
 E:\Demo\vue-cli>vue create demo-test
 
 // 2、选择手动安装功能
 > Manually select features
 
 // 3、选择babel 和 Css Pre-processors
  (*) Babel                              -- 必须安装babel
  ( ) TypeScript                         -- 微软的脚步语言 比javascript更强大
 ( ) Progressive Web App (PWA) Support  -- 渐进式web框架
 ( ) Router                             -- 路由
 ( ) Vuex                               -- vuex                            
>(*) CSS Pre-processors                 -- 选择CSS 预处理器
 ( ) Linter / Formatter                 -- 格式校验 约束团队使用固定格式，比方说用单引号还是双引号
 ( ) Unit Testing
 ( ) E2E Testing

// 4、选择2.0版本
> 2.x

// 5、选择less
> Less

// 6、选择独立的配置文件
> In dedicated config files    -- 将babel、ESLint等插件放到独立配置文件
  In package.json              -- 将配置文件放到package.json文件中

// 7、选择Y创建成预设配置,然后输入预设名即可

// 8、在VSCode启动终端 访问主页
Terminal -> new Terminal 或 Ctrl + Shift + `
E:\Demo\vue-cli\demo-first> npm run serve
App running at:
 - Local:   http://localhost:8080/
 - Network: http://192.168.1.2:8080/

③ vue项目中src目录的构成

√assets 文件夹：存放项目静态资源，例如：CSS样式表，images图片资源

√components 文件夹：程序员封装的可复用的组件

④ vue项目的运行流程

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

√1、App.vue 用来编写待渲染的模板结构

√2、index.html 中需要预留el区域

√3、main.js 把App.vue 渲染到了index.html 所预留的区域中

⑤ 基本使用

目录结构
|Demo
|----public
|--------index.html
|----src
|--------main.js
|--------Test.vue

<!-- 1、Test.vue 代码 -->
<template>
    <div>
        <p> 这是第一个vue工程项目 </p>
    </div>
</template>

<!-- 2、main.js 代码 -->
import Vue from 'vue'
import Test from './Test.vue'

Vue.config.productionTip = false

new Vue({
  // h(Test) 指向 import Test
  render: h => h(Test),
}).$mount('#app')

Vue2.0-11 组件

① vue 组件的三个组成部分

√什么是组件化开发：根据封装思想，把页面上可重用的UI结构封装为组件，从而方便项目开发和维护

√vue中规定：组件的后缀名是.vue

√vue组件的三个组成部分：

内容	说明
template	组件的模板结构
script	组件的JavaScript行为
style	组件的样式

Test.vue中代码示例：
1、data必须是一个函数，用return返回数据
2、methods方法、watch侦听、computed计算、filters过滤器
3、style中启用less样式

<template>
    <div class="lessTest" @click="btn">
        <h2> 这是第一个 vue 工程项目 {{ msg }} </h2>
        <p>要想使用less样式   必须在style中启用 lang="less"</p>
    </div>
</template>

<script>
// 默认导出 这是固定写法！
export default {
    // 组件中 data 数据源必须是一个函数
    data(){
        // 在这个 return 出去的 { } 中 定义数据
        return {
            msg: 'Hello !!!'
        }
    },
    methods: {
        btn(){
            this.msg = "在vue组件中添加methods方法"
        }
    },
    // 侦听器
    watch: { },
    // 计算属性
    computed: { },
    // 过滤器
    filters: { },
}
</script>

// 启用less样式
<style lang = "less">

.lessTest {
    background-color: pink;
    h2 {
        text-align: center;
        color: white;
    }
    p {
        color: blue;
    }
}

</style>

② 使用组件的三个步骤

◆ 步骤1、使用import语法导入需要的组件

import Left from '@/components/left.vue'
import Right from '@/components/right.vue'

◆ 步骤2、使用 components 节点注册私有组件

export default {
  components: {
    Left,
    Right
  }
}

◆ 步骤3、以标签形式使用刚才注册的组件

<template>
  <div>
    <left></left>
    <right></right>
  </div>
</template>

③ 在main.js中通过Vue.component注册全局组件

import Vue from 'vue'
import App from './App.vue' 

// 导入需要被全局注册的那个组件
import Count from '@/components/Count.vue'
Vue.component('MyCount',Count);

Vue.config.productionTip = false

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

④ 常用的插件

Auto Close Tag -- 自动闭合标签
Chinese (Simplified) (简体中文) Langu… -- 中文支持
open in browser -- 浏览器插件
Path Autocomplete -- 路径补全
// 在VSCode配置文件settings.json中追加以下配置
// 导入文件时是否携带文件的扩展名
"path-autocomplete.extensionOnImport": true,
// 配置 @ 的路径提示
"path-autocomplete.pathMappings": {"@":"${folder}/src"},
Vetur
Vue 3 Snippets

Vue2.0-12 组件的props

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

# 父对象
<template>
  <div>
      <h3>{{ count }}</h3>
      <button @click="add">  +1  </button>
  </div>
</template>

<script>
export default {
  props: ['init'],
  data(){
      return {
          count: this.init
      }
  },
  methods: {
    add(){
      this.count += 1;
    }
  }
}
</script>

#子对象引用
<template>
    <div class="right"> 
        // 结合v-bind使用自定义属性
        <MyCount :init = "2"></MyCount>
    </div>
</template>

② props 的 default 默认值，类型校验，必填校验

export default {
  props: {
    init: {
      // 用default属性定义默认值
      default: 0,
      // init的值必须是指定类型 Number/String/Boolean/Array/Object...
      type: Number,
      // 必填校验项
      require: true
    }
  }
}

Vue2.0-13 scoped属性解决样式冲突

// 只要用到样式就要追加scoped属性，该属性表示样式只在当前文件生效
<style scoped>
  .left {
    border: 1px solid red;
  }

  // 使用deep修改子组件的样式，通常修改第三方组件样式会使用
  /deep/ div {
    border: 1px solid red;
  }
</style>

Vue2.0-14 组件的声明周期

① 生命周期 & 生命周期函数

√生命周期(Life Cycle)是指一个组件从创建->运行->销毁的整个阶段，强调的是一个时间段。

√生命周期函数：是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

√created、mounted、undated 三个周期比较重要

② created生命周期函数很重要

<script>
export default {
  data(){
      return {
          books: []
      }
  },
  methods: {
    initBooks(){ 
      var xhr = new XMLHttpRequest();
      xhr.addEventListener("load",() => {
        var result = JSON.parse(xhr.responseText) ;
        this.books = result.data ;
      })
      xhr.open("GET","http://www.liulongbin.top:3006/api/getbooks");
      xhr.send();
    }
  },
  // created生命周期函数，非常常用。调用methods的方法，然后将请求到的数据转存到data中，供template渲染使用
  created(){
    this.initBooks();
  }
}
</script>

Vue2.0-15 数据间传值

① 父向子传值:父组件向子组件共享数据需要使用自定义属性

② 子向父传值:子组件向父组件共享数据使用自定义事件

③ 兄弟组件间数据共享：使用EventBus

√1、创建eventBus.js模块，并向外共享一个Vue的实例对象

√2、在数据发送方，调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件

√3、在数据接收方，调用bus.$on('事件名称',事件处理函数) 方法注册一个自定义事件

Vue2.0-16 $refs 引用

每个vue的组件实例上，都包含一个$refs对象，默认情况下$refs指向一个空对象

① 使用 ref 引用DOM元素

<template>
  <div>
    // 元素上使用ref属性
    <h2 ref="refDom">App根节点</h2>
    <button @click="btn">实验ref获取DOM元素</button>
  </div>
</template>

<script>

export default {
  methods: {
    btn(){
      // 通过this.$refs获取DOM元素
      this.$refs.refDom.style.color = "red";
    }
  }
}
</script>

② 使用 ref 引用组件实例

<template>
  <div>
    <h2>App根节点</h2>
    <button @click="sonRef">来自父组件的点击</button>
    <hr>
    <Left ref="son"></Left>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'

export default {
  methods: {
    // 使用ref直接调用子组件的reset方法
    resetSon(){
      this.$refs.sonRef.reset()
    }
  },
  components: {
    Left
  }
}
</script>

③ this.$nextTick(cb)的应用场景：

 <div>
    // 显示输入框时 自动获取焦点
   <input type="text" ref="inputRef" v-if="flag" @blur="hidden">
   <button @click="btn" v-else>点击按钮获取输入框，同时获取焦点</button>
 </div>


export default {
  data(){
    return {
      flag: false
    }
  },
  methods: {
    btn(){
      this.flag = true;
      // this.$nextTick(cb)方法：在组件的DOM更新完后执行cb回调函数
      this.$nextTick(()=>{
        this.$refs.inputRef.focus();
      })
    },
    hidden(){
      this.flag = false;
    }
  }
}

④ some循环：满足条件退出循环比forEach性能好

<script>
export default {
  data(){
    return {
      arr: ['A','B','C','D','E']
    }
  },
  methods: {
    forEachBtn(){
      this.arr.forEach((item,index) => {
        if(item === 'B'){
          console.log("forEach循环：",index,item);
          return true;
        }
        console.log("forEach循环：",index,item);
      });
    },
    someBtn(){
      this.arr.some((item,index)=>{
       if(item === 'B'){
          console.log("some循环:",index,item);
          // 当满足条件要退出时，必须写return true
          return true;
        }
        console.log("some循环:",index,item);
      })
    }
  }
}
</script>

⑤ every循环判断是否全选中

export default {
  data(){
    return {
      arr: [
        {name: "A",status: true},
        {name: "B",status: true},
        {name: "C",status: true},
      ],
    }
  },
  methods: {
    ereryBtn(){
      // 当所有数据为true返回true 否则返回false
      const flag = this.arr.every(item=>item.status);
      console.log(flag);
    }
  }
}

⑥ reduce汇总用法和简写用法

methods: {
    reduceBtn1(){
      // 复杂reduce写法 arr.filter(item=>item.status).reduce((累加的结果,item)=>{},初始值)
      const sum = this.arr.filter(item=>item.status).reduce((sum,item)=>{
        return sum += item.price * item.count ;
      },0)
      console.log("reduce:"+sum);
    },
    reduceBtn2(){
      // 简写reduce代码 建议用下面的代码
      const sum = this.arr.filter(item=>item.status).reduce((sum,item)=>sum += item.price * item.count,0)
      console.log("reduce:"+sum);

    }
  }