vue基础

柿子患者
188 阅读7分钟

vue基础入门2

侦听器

什么是watch侦听器

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

const vm=new Vue({
 el:'#app',
 data:{username:''}
 watach:{
 //监听username值的变化
 //newVal 是变化后的新值，oldVal是变化之前的旧值
 //新值在前旧值在后
 username(newVal,oldVal){
 console.log(newVal,oldVal)
 }
 }
})

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

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

 const vm= new Vue({
            el:'#app',
            data:{
                username:''
            },
            //所有侦听器，都应该被定义到watch节点下
            watch:{
                //侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
                //新值在前，旧值在后
                username(newval){
                 if(newval==='') return
                 //调用ajax发起请求，判断newval是否被占用！！
               const{data:res}=await axios.get('https://www.escook.cn/api/finduser/'+newval)
                console.log(result)
               
                                 }
                   }
                    })

immediate 选项

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

const vm= new Vue({
            el:'#app',
            data:{
                username:'admin'
            },
            watch:{
               //定义对象格式的侦听器
               username:{
               //handler是固定写法，表示当username的值变化时，自动调用handler处理函数
                handler(newval,oldval){
                    console.log(newval,oldval)
                },
                //immediate选项的默认值是false
                //immediate的作用是控制侦听器是否自动触发一次
                immediate:true
               }
            }
        })

deep选项

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

监听对象的单个属性变化

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

const vm= new Vue({
            el:'#app',
            data:{
                info:{
                    username:'admin'
                }
            },
            //所有侦听器，都应该被定义到watch节点下
            watch:{
                //函数格式无法监听数据中的 对象中的属性变化，所以使用对象格式的侦听器
               /*  info:{
                    handler(newval,oldval){
                        console.log(newval,oldval)
                    },
                    //开始深度监听
                    deep:true
                }

 */

                //如果要侦听的是对象的子属性，则必须包裹一层单引号
                'info.username'(newVal,oldVal){
                    console.log(newVal,oldVal)
                }

计算属性

什么是计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值。

这个动态计算出来的属性值可以被模板结构或methods方法使用，示例代码如下：

 // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        // 红色
        r: 0,
        // 绿色
        g: 0,
        // 蓝色
        b: 0
      },
      methods: {
        // 点击按钮，在终端显示最新的颜色
        show() {
          console.log(this.rgb)
        }
      },
      //所有的计算属性，都要定义到computed节点之下
      //计算属性在定义的时候，要定义成‘方法格式’
      computed:{
        //rgb作为一个计算属性，被定义成了方法格式
        //最终，在这个方法中，要返回一个生成好的 rgb（x,x,x）的字符串
        rgb(){
          return `rgb(${this.r},${this.g},${this.b})`
        }//声明的时候是方法格式声明，但用的时候就当做vm的属性使用
      }
    })
  console.log(vm)//打印出来vm对象有一个属性rgb及其值

计算属性的特点

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

vue-cli

什么是单页面应用程序

单页面应用程序(Single Page Application)简称SPA，顾名思义，指的是一个web网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面中完成

什么是vue-cli

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

中文官网

安装和使用

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

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

项目的运行流程

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

其中：

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

vue组件

什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用UI结构封装为组件

vue中的组件化开发

vue是一个支持组件化开发的前端框架

vue中规定：组件的后缀名是.vue。之前接触到的App.vue文件本质上就是一个vue的组件。

vue组件的三个组成部分

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

  1. template-->组件的模板结构
  2. script-->组件的JavaScript行为
  3. style-->组件的样式

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

template

vue规定：每个对应的模板结构，需要定义到<template>节点中

<template>

<!--当前组件的DOM结构，需要定义到template标签内部-->

</template>

注意：

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

script

vue规定：开发者可以在script节点中封装组件的JavaScript业务逻辑

script节点的基本结构如下：

image.png

vue组件中的data必须是一个函数

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

image.png 会导致多个组件实例共用同一份数据的问题

style

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

script节点的基本结构如下：

image.png

image.png

组件之间的父子关系

image.png

使用组件的三个步骤

  1. 使用import语法导入需要的组件
  2. 使用components节点注册组件
  3. 以标签形式使用刚才注册的组件

image.png

通过components注册的是私有组件

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

注册全局组件

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

//导入那个需要被全局注册的组件
import count from './components/count.vue'

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

组件的props

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

image.png

props是只读的，程序员不能直接修改props的值。否则会直接报错要想修改props的值，可以把props的值转存到data中，因为data中的数据都是可读可写的

default，type，required

在声明自定义属性时，可以通过default来定义属性的默认值

image.png

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

image.png

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

image.png

组件之间的样式冲突问题

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

导致组件之间样式冲突的根本原因是：

  1. 单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的
  2. 每个组件的样式，都会影响整个index.html页面中的DOM元素

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

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

image.png

  • vue为style节点提供了scoped属性，从而防止组件之间的样式冲突问题

image.png

  • /deep/样式穿透

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

image.png

avatar
文章
阅读
粉丝