vue组件使用技巧｜ 青训营笔记

南岸o0
95 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第7天

  1. 过滤器的使用

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下

  1. 定义一个过滤器


const vm new Vue({
el:'#app',
data:{
    message:'hello vue.js',
    info:'title info'，
}
filters:{//在fi1ters节点下定义"过滤器”
    capitalize(str){//把首字母转为大写的过滤器
    return str.charAt(0).toUpperCase()+str.slice(1)
    }
    
})

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器

  1. 过滤器的传递参数：

  1. 侦听器的使用

\

  1. watch 侦听器

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

const vm new Vue({
    el:'#app',
    data:{
        username:''
        },
    watch:{
        //监听username值的变化
        //newal是"变化后的新值”，oldval是"变化之前的I旧值"
        username(newVal,oldVal){
        console.log(newal,oldVal)
        }}
)

  1. watch 的immediate选项：

  1. watch 的deep选项：

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

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

  1. 计算属性

  1. 计算属性

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

  1. 计算属性的特点

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

  1. AXIOS的使用

  1. 标准写法

  1. 单页面应用

  1. vue-cli的使用

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

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。 引用自 vue-cli 官网上的一句话： 程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题

\

  1. 安装和使用

  1. 安装

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

\

npm install -g @vue/cli

  1. 使用

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

2.选择配置：

\

3.src目录的构成

  • Assets 存放项目中用到的静态资源文件夹，例如：css样式表，图片
  • Components 存放：程序员封装的，可复用的组件，都要放在componengts目录下
  • main.js 是项目的入口文件，整个项目的运行，要先执行main.js(也就是entry)
  • Vue.app是项目的根组件

4.vue运行的流程：

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

  1. vue组件

vue组件都由三个部分构成，分别是：

Template 组件的模板结构

Script 组件的JavaScript行为

Style 组件的样式

<template>
<div class="test-box"><h2>用户自定义组件--{{username}}</h2></div>

</template>
<script>
export default{
    //data 数据源
    //注意vue里的组件的data不能指向对象
    //注意组件里的data必须是一个函数
    data(){
        return{username:'zhangsan '}
    }，
    methods:{
            //在组件中，this就表示组件的实例对象
            changeName() {
                this.username='lisi'
            }
        
    }
}
</script>

<style>
.test-box{
    background-color: pink;
}
</style>

启用less语法，需要在style标签上加上less

avatar
文章
阅读
粉丝