vue基础入门关于(侦听器 计算属性 vue-cli 组件)

目录
侦听器
计算属性
vue-cli
vue-组件

watch侦听器

1.什么是watch侦听器

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

       const vm = new Vue({
            el: '#app',
            data: {
                username: 'admin'
            },
            watch: {
                // 侦听器本质上是一个函数
                username(newVal) {
                    // 新值在前旧值在后
                    $.get('https://www.escook.cn/api/finduser/' + newVal, function (res) {
                        console.log(result);
                    })
                }
            }
        })   

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

注意

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

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

 username(newVal) {
if(newVal==-'')return
    // 新值在前旧值在后
  const{data:res}  await axios.get('https://www.escook.cn/api/finduser/' + newVal, function (res) {
       console.log(res);
       }
   }

3.immediate选项

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

            watch: {
                // 定义对象格式的侦听器
                username: {
                    // 侦听器的处理函数
                    handler(newval, oldVal) {
                        if(newVal==-'')return
    // 新值在前旧值在后
  const{data:res}  await axios.get('https://www.escook.cn/api/finduser/' + newVal, function (res) {
       console.log(res);
                    },
                    // immediate: 选项的默认值是false
                    // 作用是控制侦听器是否自动触发一次 只要是true
                    immediate: true
                }
            }

4.deep选项

如果watch侦听的是一个对象 如果对象中的属性发生变化 则无法监听
此时需要deep选项

 const vm = new Vue({
            el: '#app',
            data: {
                // 用户的信息对象
                info: {
                    username: 'admin'
                }
            },
            watch: {
                info: {
                     handler(newVal) {
                         console.log(newVal.username);
                     }, 侦听到的是 对象的变化
                 deep: true
                }
            }
        })   

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

如果只想监听对象中单个属性的变化 则可以按如下的方式 

const vm = new Vue({
            el: '#app',
            data: {
                // 用户的信息对象
                info: {
                    username: 'admin'
                }
            },
            watch: {
                'info.username'(newVal) {
                    handler(newVal){
                        console.log(newVal);
                    }

                }
            }
        })   

计算属性

1.什么是计算属性

计算属性指的是通过一系列运算之后,最终得到一个属性值
这个动态计算出来的属性值可以被模板结构或methods方法使用

特点：
1.定义的时候 要被定义为方法
2.在使用计算属性的时候 当普通的属性使用

好处：
实现代码复用
只要计算属性中依赖的数据源变化了 则计算属性会自动重新求值

axios

axios是一个专注于网络请求的库
 
axiaos的基础语法

     

 axios({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks'
            // 请求体参数  post用
            data: {}
        }).then(function (result) {
            console.log(result);
        })

1.调用aixos的方法得到的返回值是promise对象

axios的基本使用

发起get请求
       axios({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks'
            // 参数 get用
            params: {
                id: 1
            },
        }).then(function (result) {
            console.log(result);
        })

发起post请求

       axios({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks'
            // 参数 get用
        { name: 'zds', gender: '女' }
        }).then(function (result) {
            console.log(result);
        })

单页面应用程序

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

单页面应用程序(Single Page Application) SPA

指的是一个Web网站中只有唯一的一个HTML页面
所有功能与交互都在这唯一的一个页面内完成

vue-cli

1.什么是vue-cli

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

开发者可以专注在应用上 而不必花几天去纠结webpack配置的问题

2.安装和使用

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

npm install -g@vue/cli

基于vue-cli快速生成工程化的Vue项目:

vue create 项目的名称

vue 项目中src目录的构成:

assets文件夹:存放项目中用到的静态资源文件,例如:css样式表 图片资源

components文件夹 开发者封装的、可复用的组件 都要放到components

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所预留的区域中

vue组件

1.什么是组件化开发

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

2.vue中的组件化开发

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

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

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

每个.vue组件都由3部分构成 
template->组件的模块结构
script->组件的js行为
style->组件的样式

思考:什么是组件

组件是对UI结构的复用

在main.js中
render函数,渲染的是哪个.vue组件 那么这个组件就叫做根组件

4.组件之间的父子关系

封装了3个组件 App Left Right

组件在被封装好之后,彼此之间是相互独立的,不存在父子关系

在项目中使用这三个组件

使用组件的时候 根据彼此的嵌套关系 形成了父子关系 兄弟关系

4.1 使用组件的三个步骤

1 使用import语法导入需要的组件

import Left from '@.components/Left.vue'

2 使用components节点注册组件

export default{
  components:{
    Left
}
}

3 以标签形式使用刚才注册的组件

<div class="box">
  <Left></Left>
</div>

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

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

思考:为什么F不能用在组件C中

因为 C没有components注册F

    
4.3 注册全局组件

有什么好处：只要注册一次,哪个组件都可以导入它    

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

import Count from '@/components/Count.vue'

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

5.组件的props

props是组件的自定义属性 
在封装通用组件的时候,合理地使用props可以极大的提供组件的复原性自定义的名字 封装者自定义的 只要合法
 

props: ["init"],


export default {
  // props是组件的自定义属性 为当前组件指定初始值
  props: ["init"],
  data() {
    return {
      count: 0,
    };
  },
};

5.1 props是只读的

只读:值渲染到页面但不能修改

vue的规定:组件中的封装的自定义属性是只读的 不能直接修改props的值 否则报错

要项修改props的值 可以把props的值转存到data中 因为data中的值是可读可写的

  props: ["init"],
  data() {
    return {
      count: thi.init,
    };
  },

5.2 props的default默认值

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

5.3 props的type值类型

在声明自定义属性时,可以通过type来定义属性的值类型

  props: {
    // 自定义属性A:{ //配置选项}
    // 自定义属性A:{ //配置选项}
    // 自定义属性A:{ //配置选项}
    init: {
      // 如果外界使用Count组件没有传递init属性时 初始值默认生效
      default: 0,
      //   init的值类型必须是number数字
      type: Number,
    },
  },

5.4 props的required必填项

 props: {
    // 自定义属性A:{ //配置选项}
    // 自定义属性A:{ //配置选项}
    // 自定义属性A:{ //配置选项}
    init: {
      // 如果外界使用Count组件没有传递init属性时 初始值默认生效
      default: 0,
      //   init的值类型必须是number数字
      type: Number,
      required: true,
    },
  },

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

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

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

1 单页面应用程序中,所有组件的DOM结构 都是基于唯一的index.html页面进行呈现的

2 每个组件中的样式,都会影响整个index.html页面中的DOM元素

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

解决:
给当前组件中的任何一个标签都加一个固定的自定义属性

6.2/deep/样式穿透

/deep/ h5{

}