• 过滤器（filter）、watch 侦听器 、计算属性 、axios、vue-cli 的使用 、vue组件化

    过滤器（filter）、watch 侦听器 、计算属性 、axios、vue-cli 的使用 、vue组件化

    1.过滤器（filter）

    可以用在插在表达式中和v-bind属性绑定，过滤器是一个函数{{message| capitalize}}，添加在js表达式的尾部，

    过滤器的注意点

    1. 要定义到 filters 节点下，本质是一个函数
    2. 在过滤器函数中，一定要有 return 值
    3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
    4. 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“
    5. 过滤器中一定要有一个返回值
    6. 字符串中有charAt方法，接收索引值，表示字符串中吧索引值对应的字符获取出来
        <script>
        const vm = new Vue({
            el:'#app',
            data: {
                message: 'hello vue.js',
                info: 'title info'
            },
            // 过滤器函数，必须被定义到filters节点之下
            // 过滤器本质上是函数
            filters: {   
                // 注意: 过滤器函数中的形参中的val，永远是管道符前面的那个值
                //在filters节点下定义“过滤器”
                capitalize(str) {//把首字母转为大写的过滤器
                    // 字符串有charAt方法，这个方法接收索引值，表示从字符串中吧索引值对应的字符提取出来
                    // val.charAt(0)
                    const first = val.charAt(0).toUpperCase()
                    // 字符串的slice方法，可以截取字符串，从指定索引往后截取
                    const other = val.slice(1)
                    // 强调：过滤器中，一定要有一个返回值
                    return first + other
                }
            }
        })
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    定义全局变量
    // 使用Vue.filter() 定义全局过滤器
Vue.filter('capitalize', function(str) {
            // 字符串有charAt方法，这个方法接收索引值，表示从字符串中吧索引值对应的字符提取出来
            // val.charAt(0)
            const first = val.charAt(0).toUpperCase()
            // 字符串的slice方法，可以截取字符串，从指定索引往后截取
            const other = val.slice(1)
            // 强调：过滤器中，一定要有一个返回值
            return first + other      
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    2.watch 侦听器

    侦听器的格式

    1. 方法格式的侦听器
    • 缺点1：无法在刚进入页面的时候，自动触发！！！
    • 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'admin'
            },
            // 所有监听器，都应该被定义到watch节点下
            watch: {
                username(newVal) {
                    if (newVal === '') return
                    // 1.调用jQuery中的ajax发起请求，判断newVal是否被占用
                    $.get('https://www.escook.cn/api/finduser' + newVal, function(result) {
                        console.log(result);
                    })
                }
            }
        })
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    1. 对象格式的侦听器
    • 好处1：可以通过 immediate 选项，让侦听器自动触发！！！
    • 好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！
    
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'admin'
            },
            // 所有监听器，都应该被定义到watch节点下
            watch: {
                // 定义对象格式的侦听器
                username: {
                    //侦听器的处理函数
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal);
                    },
                    // immediate 选项的默认值是false
                    // immediate 的作用是： 控制侦听器是否自动触发一次
                    immediate: true
                }
            }
        })
    </script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    1. deep 选项

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    1. 监听对象单个属性的变化
    const vm = new Vue({
	el: '#app',
	data: {
		info: { username: 'admin' }

},
watch: {
	'info.username': {
		handler(newVal) {
			console.log(newVal)
			}
		}
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    3.计算属性

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

    ：style代表动态绑定一个样式对象，它的值是一个{ }样式对象

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                r: 0, g: 0, b: 0
            },
            //计算属性，都要定义到computed节点之下
            // 计算属性在定义的时候，要定义成“方法格式”
            computed: {
                // 返回出来是一个字符串

                rgb() { return `rgb(${this.r}, ${this.g}, ${this.b})`}
            }, 
            methods: {
                show() { consle.log(this.rgb) }
            }
        })
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    特点：

    1. 定义的时候，要被定义为“方法”
    2. 在使用计算属性的时候，当普通的属性使用即可

    好处：

    1. 实现了代码的复用
    2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！

    4.axios

    axios 是一个专注于网络请求的库！

    axios 的基本使用

    在这里插入图片描述

    1. 发起 GET 请求：

      document.querySelector('#btnGet).addEventListener('click', async function () {
const {data: res } = await axios({
    //解构赋值的时候，使用 ：进行重命名
    //1.调用axios之后，使用async/await进行简化
    //2.使用解构赋值，从axios封装的大对象中， 把data属性解构出来
    //3.把解构出来的data属性，使用冒号进行重命名，一般命名为{ data： res}
  // 请求方式
  method: 'GET',
  // 请求的地址
  url: 'http://www.liulongbin.top:3006/api/getbooks',
  // URL 中的查询参数(get传参)
  params: {
    id: 1
  }
})
  console.log(result)
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17

    2. 发起 POST 请求：

      document.querySelector('#btnPost').addEventListener('click', async function () {
  // 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！
  // await 只能用在被 async “修饰”的方法中，可以直接输出数据结果
  const { data: res } = await axios({
    method: 'POST',  
    url: 'http://www.liulongbin.top:3006/api/post',
    //post传参
    data: {
      name: 'zs',
      age: 20
    }
  })

  console.log(res)
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15

    5.vue-cli 的使用

    它简化了程序员基于webpack创建工程化的Vue项目的过程

    1. 在终端下运行如下的命令，创建指定名称的项目：

      vue cerate 项目的名称

      • 1

    在这里插入图片描述

    1. vue 项目中 src 目录的构成：

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

    1. vue项目的运行流程

    通过main.js把App.vue渲染到index.html的指定区域中
    Vue实例的$mount()方法，作用和el属性完全一样！替换

    6.vue组件化

    1. 组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。
    2. vue 中的组件化开发 vue 是一个支持组件化开发的前端框架。 vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
    3. vue 组件的三个组成部分 每个 .vue 组件都由 3 部分构成，分别是：

    template -> 组件的模板结构

    script -> 组件的 JavaScript 行为

    style -> 组件的样式

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

    在这里插入图片描述

    1. 组件组件的父子关系

      组件在被封装后，相互独立，但是在使用组件中，彼此成嵌套关系，形成父子关系、兄弟关系

      4.1 使用组件的三个步骤：①使用import语法导入需要的组件②使用components节点注册组件③以标签的形式来使用刚才注册的组件

      4.2 通过 components 注册的是私有子组件 例如： 在组件 A 的 components 节点下，注册了组件 F。 则组件 F 只能用在组件 A 中；不能被用在组件 C 中

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

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

    export default {
//组件的自定义属性
props: ['自定义属性A', '', ''],
//组件的私有数据
data（） {
	return { }
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

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

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

    props：['init'],
data() {
	return {
	count: this.init//把this。init的值转到count中
}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

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

    export default {
	props: {
	init: {
		//用default属性定义属性的默认值
		default: 0
		}
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

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

    export default {
	props: {
		init: {
			//用default属性定义属性的默认值
			default: 0,
			//用type属性定义属性的值类型，如果传递过来的值不符合此类型，则会在终端报错
			type： Number
}
}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

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

    export default {
	props: {
		init: {
			//值类型为Number数字
			type： Number,
			//必填项校码
			required: true
}
}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    1. 组件之间的样式冲突问题
      默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
      导致组件之间样式冲突的根本原因是：
      ① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
      ② 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

    6.1 思考：如何解决组件样式冲突的问题
    为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域。
    6.2 style 节点的 scoped 属性
    为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题：

    <style lang="less" scoped> 

    • 1

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

    当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到/deep/

    /deep/ h5 {
	color: blue;
}	

    • 1
    • 2
    • 3
  • 相关阅读:
    单片机矩阵键盘
    vue2中seo时使用vue-meta-info
    Linux虚拟机静态IP设置
    JavaScript中函数的声明方式、作用域
    Java安全之Mojarra JSF反序列化
    从零开始搭建一个微服务项目（一）
    leetcode刷题日志-151反转字符串中的单词
    [含毕业设计论文+PPT+源码等]springboot巧匠家装小程序+Java后台管理系统|前后分离VUE
    Linux C 中执行shell命令
    【云原生】EF(filebeat)K 日志收集平台
  • 原文地址：https://blog.csdn.net/weixin_52504437/article/details/130493729