【vue2】03_vue基础入门

于 2022-05-15 00:00:00 发布
阅读量114 收藏
点赞数
分类专栏： 【前端】 # vue 文章标签： vue.js javascript 前端

文章目录

watch 侦听器

1. 什么是 watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
语法格式如下：

const vm = new Vue({
    el: "#app",
    data: {
        username: ''
    },
    // 所有侦听器，都应该被定义到watch节点下
    watch:{
        // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
        // 新值在前，旧值在后
        // newVal 是变化后的值，oldVal 是变化之前的值
        username(newVal, oldVal){
            console.log('监听了', newVal, oldVal)
        }
    }
})

2. 使用 watch 检测用户名是否可用

监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：

 watch:{
      // 监听 username 值的变化
     async username(newVal){
     	if(newVal === '') return
     	// 使用axios发起请求，判断用户名是否可用
     	const{data:res} = await.axios.get('https://www.escook.cn/api/finduser/' + newVal)
          console.log(res)
      }
  }

3. immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使
用 immediate 选项。示例代码如下：

watch:{
	username: {
		handler: async username(newVal){
     	if(newVal === '') return
     	// handler 是固定写法，表示当 username 的值变化时，自动调用handler处理函数
     	const{data:res} = await.axios.get('https://www.escook.cn/api/finduser/' + newVal)
          console.log(res)
      },
      //表示页面初次渲染好之后，就立即触发当前的侦听器
      immediate: true
	} 
  }

4. deep 选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选 项，代码示例如下：

const vm = new Vue({
    el: "#app",
    data: {
       info:{ username: 'admin'}
    },
    watch:{
       info:{
       	handler(newVal) {
       		consol.log(newVal.username)
       	},
       	deep: true
       }
    }
})

5. 监听对象单个属性的变化

如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器：

const vm = new Vue({
    el: "#app",
    data: {
       info:{ username: 'admin'}
    },
    watch:{
       'info.username':{
       	handler(newVal) {
       		consol.log(newVal.username)
       	}
       }
    }
})

6. 总结

  • 方法格式的监听器
    • 缺点1： 无法在刚进入页面的时候，自动触发
  • 对象格式的监听器
    • 缺点2：如果侦听的是 一个对象，如果对象中的属性发送了变化，不会触发侦听器！
    • 好处1：可用通过immediate选项，让侦听器自动触发 ！
    • 好处2：可用通过deep选型，让侦听器深度侦听属性的变化！

计算机属性

1. 什么是计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.6.12.js"></script>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
    }
  </style>
</head>

<body>
  <div id="app">
    <div>
      <span>R：</span>
      <input type="text" v-model.number="r">
    </div>
    <div>
      <span>G：</span>
      <input type="text" v-model.number="g">
    </div>
    <div>
      <span>B：</span>
      <input type="text" v-model.number="b">
    </div>
    <hr>

    <!-- :style 代表的动态绑定一个样式对象，它的值是一个{} 样式对象 -->
    <!-- 当前的样式对象中，只包含backgroundColor -->
    <!-- 专门用户呈现颜色的 div 盒子 -->
    <div class="box" :style="{ backgroundColor: rgb }">
      {{ `rgb` }}
    </div>
    <button @click="show">按钮</button>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        // 红色
        r: 0,
        // 绿色
        g: 0,
        // 蓝色
        b: 0
      },
    //   所有的计算属性，都要定义在computed节点下
      computed: {
        // rgb 作为一个计算属性，被定义成了方法格式
        // 最终，在这个方法中，要返回一个生成好的rgb（x,x,x)的字符串
        rgb() {
            return `rgb(${this.r},${this.g},${this.b})`
        }
      },
      methods: {
        // 点击按钮，在终端显示最新的颜色
        show() {
          console.log(`rgb(${this.r}, ${this.g}, ${this.b})`)
        }
      },
    });
    console.log(vm)
  </script>
</body>

2. 计算属性的特点

① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性
② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

vue-cli

1. 什么是单页面应用程序

单页面应用程序（英文名：Single Page Application）简称 SPA，顾名
思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能
与交互都在这唯一的一个页面内完成。

2. 什么是 vue-cli

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

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

中文官网：https://cli.vuejs.org/zh/

3. 安装和使用

vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：

npm install -g @vue/cli

基于 vue-cli 快速生成工程化的 Vue 项目：
vue create 项目的名称

请添加图片描述
空格选中你要的组件
请添加图片描述
下载完成
请添加图片描述
访问localhost:8080端口
请添加图片描述

注意： 窗口在加载过程中，鼠标不要去点击，否则会暂停下载，使用ctrl+c解决

vue项目中src目录的构成：

assets 文件夹：存放项目中用到的的静态资源 例如:css 样式表、图片资源
component 文件夹：程序员封装的、可复用的组件
main.js: 项目运行的入口，项目运行，先执行main.js
App.vue: 项目的根组件

4. vue 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中：
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

注意：$mount(‘#app’) 等同于 el: ‘#app’

vue组件

1. 什么是组件化开发

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

2. vue 中的组件化开发

vue 是一个支持组件化开发的前端框架。
vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

3. vue 组件的三个组成部分

每个 .vue 组件都由 3 部分构成，分别是：

  • template -> 组件的模板结构
  • script -> 组件的 JavaScript 行为
  • style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

请添加图片描述

3.1 template

vue 规定：每个组件对应的模板结构，需要定义到 节点中。

<template>
    <div class="test-box">
        <h3>这是自定义的vue ---- {{ username }}</h3>
        <button @click="changeName">修改用户名</button>
    </div>
</template>

注意：

  • template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素
  • template 中只能包含唯一的根节点

3.2 script

vue 规定：开发者可以在 script节点中封装组件的 JavaScript 业务逻辑。
script 节点的基本结构如下：

export default {
    // .vue 组件中的data 不能像之前一样，不能指向对象；必须是一个函数。
    data() {
        // 
        return {
            username: 'admin'
        }  
    },
}
.vue 组件中的 data 必须是函数

vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。
因此在组件中定义 data 数据节点时，下面的方式是错误的：

data: {
	username:'xxx'
}

会导致多个组件实例共用同一份数据的问题，请参考官方给出的示例：
https://cn.vuejs.org/v2/guide/components.html#data-必须是一个函数

3.3 style

vue 规定：组件内的 style节点是可选的，开发者可以在 style 节点中编写样式美化当前组件的 UI 结构。
script 节点的基本结构如下：

请添加图片描述

4. 组件之间的父子关系

请添加图片描述

4.1 使用组件的三个步骤

请添加图片描述

4.2 通过 components 注册的是私有子组件

例如：
在组件 A 的 components 节点下，注册了组件 F。
则组件 F 只能用在组件 A 中；不能被用在组件 C 中。

4.3 注册全局组件

在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下：

// 导入需要全局注册的组件
import Count from '@/components/Count.vue'

// 参数1：字符串格式，表示组件的 注册名称
// 参数2：需要被全局注册的那个组件
Vue.component('MyCount', Count)

5. 组件的 props

props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！
它的语法格式如下：

export default {
    // props 是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值
    // 自定义属性的名字，是封装者自定义的
    props: ['init','aaa','bbb'],
    data() {
        return { }
    }
}

5.1 props 是只读的

vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错：
请添加图片描述

要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！

export default {  
    props: ['init'],
    data() {
        return {
            count: this.init
        }
    }
}

5.2 props 的 default 默认值

在声明自定义属性时，可以通过 default 来定义属性的默认值。示例代码如下：

export default {
   props: {
       // 自定义属性 init
       init: {
           default: 0
       }
   },
}

5.3 props 的 type 值类型

在声明自定义属性时，可以通过 type 来定义属性的值类型。示例代码如下：

export default {
   props: {
       // 自定义属性 init
       init: {
           default: 0,
           type: Number
       }
   },
}

5.4 props 的 required 必填项

在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值。示例代
码如下：

export default {
   props: {
       // 自定义属性 init
       init: {
           default: 0,
           type: Number,
           // 必填
           required: true
       }
   },
}

6. 组件之间的样式冲突问题

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

导致组件之间样式冲突的根本原因是：
① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
② 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

6.1 思考：如何解决组件样式冲突的问题

为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域，示例代码如下：

<template>
  <div class="left-container">
    <h3 data-v-001>Left 组件</h3>
  </div>
</template>

<style lang="less">
/* 通过中括号 属性选择器， 来防止组件之间的 样式冲突问题，
因为每个组件分配的自定义属性是 唯一的 */
.left-container {
  border:1px solid red;
}

</style>

6.2 style 节点的 scoped 属性

为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题：

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
  </div>
</template>

<style scoped>
/* 通过中括号 属性选择器， 来防止组件之间的 样式冲突问题，
因为每个组件分配的自定义属性是 唯一的 */
.left-container {
  border:1px solid red;
}

</style>

6.3 /deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。

// 不加/deep/ h5 [data-v-3c83f0b7] 
// 加/deep/ [data-v-3c83f0b7] h5
// 当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/
/deep/ h5 {
  color: pink;
}

axios的基础语法

官方文档： http://www.axios-js.com/

 <script src="./lib/axios.js"></script>
  <script>
      const result = axios({
          method: 'GET',
          url: ''
      })
      result.then(function(books){
          console.log(books)
      })
  </script>

使用解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btnPost">发送post请求</button>
    <button id="btnGet">发送get请求</button>
    <script src="./lib/axios.js"></script>
    <script>
        document.querySelector('#btnPost').addEventListener('click', async function(){
            // 如果调用某个方法的返回值是promise实例，则前面可用添加await
            // await 只能用在被 async 修饰的方法中
           const result = await axios({
                method: 'POST',
                url: '',
                data:{
                    name:'zs',
                    age: 20
                }
            })
            console.log(result)
        })

        document.querySelector('#btnGet').addEventListener('click', async function(){
            // 解构赋值的时候，使用 ：进行重命名
            // 1. 调用axios之后，使用async/await 进行简化
            // 2. 使用解构赋值，从axios 封装的大对象中，把data属性解构出来
            // 3. 把解构出来的data属性，使用冒号进行重命名，一般都重命名为 {data:res}
           const {data: res}  = await axios({
                method: 'GET',
                url: ''
            })
            console.log(res.data)
        })
        
    </script>
</body>
</html>

发送get请求和post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btnGET">GET</button>
    <button id="btnPOST">POST</button>
    <script src="./lib/axios.js"></script>
    <script>
        document.querySelector('#btnGET').addEventListener('click', async function(){
            const {data:res}  = await axios.get('',{
                params: {id:1}
            })
            console.log(res.data)
        })

        document.querySelector('#btnPOST').addEventListener('click', async function(){
            const {data:res}  = await axios.post('', {
                name:'zs',gender:'女'
            })
            console.log(res)
        })
    </script>
</body>
</html>
追yi个小太阳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值