脚手架和VUE基础

菜鸟笔记 2022-08-26

VUE基础2

vue过滤器

目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值

过滤器只能用在, 插值表达式和v-bind表达式

Vue中的过滤器场景

  • 字母转大写, 输入"hello", 输出"HELLO"
  • 字符串翻转, “输入hello, world”, 输出"dlrow ,olleh"

语法:

  • Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”}) （写在main.js文件当中）
  • filters: {过滤器名字: (值) => {return “返回处理后的值”} （写在default对象当中）

例子:

  • 全局定义字母都大写的过滤器
  • 局部定义字符串翻转的过滤器
<template>
  <div>
    <p>原来的样子: {{ msg }}</p>
    <!-- 2. 过滤器使用
      语法: {{ 值 | 过滤器名字 }}
     -->
    <p>使用翻转过滤器: {{ msg | reverse }}</p>
    <p :title="msg | toUp">鼠标长停</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: 'Hello, Vue'
    }
  },
  // 方式2: 局部 - 过滤器
  // 只能在当前vue文件内使用
  /*
     语法: 
     filters: {
       过滤器名字 (val) {
         return 处理后的值
       }
     }
  */
  filters: {
    toUp (val) {
      return val.toUpperCase()
    }
  }
}
</script>

<style>

</style>

总结: 把值转成另一种形式, 使用过滤器, Vue3用函数替代了过滤器.

全局注册最好在main.js中注册, 一处注册到处使用

vue过滤器-传参和多过滤器

目标: 可同时使用多个过滤器, 或者给过滤器传参

  • 语法:
    • 过滤器传参: vue变量 | 过滤器(实参)
    • 多个过滤器: vue变量 | 过滤器1 | 过滤器2
<template>
  <div>
    <p>原来的样子: {{ msg }}</p>
    <!-- 1.
      给过滤器传值
      语法: vue变量 | 过滤器名(值)
     -->
    <p>使用翻转过滤器: {{ msg | reverse('|') }}</p>
    <!-- 2.
      多个过滤利使用
      语法: vue变量 | 过滤器1 | 过滤器2
     -->
    <p :title="msg | toUp | reverse('|')">鼠标长停</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: 'Hello, Vue'
    }
  },
  filters: {
    toUp (val) {
      return val.toUpperCase()
    }
  }
}
</script>

<style>

</style>

总结: 过滤器可以传参, 还可以对某个过滤器结果, 后面在使用一个过滤器

vue计算属性

目标: 一个数据, 依赖另外一些数据计算而来的结果

语法:

  • computed: {
    "计算属性名" () {
        return "值"
    }
}

需求:

  • 需求: 求2个数的和显示到页面上
<template>
  <div>
    <p>{{ num }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      a: 10,
      b: 20
    }
  },
  // 计算属性:
  // 场景: 一个变量的值, 需要用另外变量计算而得来
  /*
    语法:
    computed: {
      计算属性名 () {
        return 值
      }
    }
  */
 // 注意: 计算属性和data属性都是变量-不能重名
 // 注意2: 函数内变量变化, 会自动重新计算结果返回
  computed: {
    num(){
      return this.a + this.b
    }
  }
}
</script>

<style>

</style>

注意: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同

总结: 一个数据, 依赖另外一些数据计算而来的结果

vue计算属性完整写法

目标: 计算属性也是变量, 如果想要直接赋值, 需要使用完整写法

语法:

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

需求:

  • 计算属性给v-model使用

页面准备输入框

<template>
  <div>
      <div>
          <span>姓名:</span>
          <input type="text" v-model="full">
      </div>
  </div>
</template>

<script>
// 问题: 给计算属性赋值 - 需要setter
// 解决:
/*
    完整语法:
    computed: {
        "计算属性名" (){},
        "计算属性名": {
            set(值){

            },
            get(){
                return 值
            }
        }
    }
*/
export default {
    computed: {
        full: {
            // 给full赋值触发set方法
            set(val){
                console.log(val)
            },
            // 使用full的值触发get方法
            get(){
                return "无名氏"
            }
        }
    }
}
</script>

<style>

</style>

总结: 想要给计算属性赋值, 需要使用set方法

vue侦听器

目标: 可以侦听data/computed属性值改变

语法:

  • watch: {
    "被侦听的属性名" (newVal, oldVal){
        
    }
}

完整例子代码:

<template>
  <div>
    <input type="text" v-model="name">
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      user: {
        name: "",
        age: 0
      }
    }
  },
  watch: {
    name(newVal,oldVal) {
      console.log(newVal,oldVal)
    },
    // 侦听器完整写法
    user: {
      handler(newVal,oldVal) {
        console.log(newVal,oldVal)
      },
      // 深度侦听
      deep: true,
      // 立即侦听
      immediate: true
    }
  }
}
</script>

<style>

</style>

vue组件

组件是可复用的 Vue 实例, 封装标签, 样式和JS代码

组件化 ：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护

一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)

vue组件使用步骤：

1.创建需要复用的vue组件在components文件夹下，例如创建组件 components/Pannel.vue

2.注册组件: 创建后需要注册后再使用

全局注册：全局入口在main.js, 在new Vue之上注册

语法:

import Vue from 'vue'
import 组件对象 from 'vue文件路径'

Vue.component("组件名", 组件对象)

例如：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 1.引入全局组件
import Pannel from './components/Pannel'
// 2.注册组件
Vue.component("Pannel",Pannel)

new Vue({
  render: h => h(App),
}).$mount('#app')

全局注册Panne组件名后, 就可以当做标签在任意Vue文件中template里用

局部注册：

语法:

import 组件对象 from 'vue文件路径'

export default {
    components: {
        "组件名": 组件对象
    }
}

在需要的vue文件中中引入, 注册, 使用

例如：

<template>
  <div>
    <!-- 3.全局组件的使用 -->
    <Pannel></Pannel>
    <Pannel></Pannel>
    <Pannel></Pannel>
    <!-- 4.局部组件的使用 -->
    <PannelJb></PannelJb>
    <PannelJb></PannelJb>
    <PannelJb></PannelJb>
  </div>
</template>

<script>
// 1.引入局部组件
import PannelJb from "./components/Pannel_2"
export default {
  // 2.注册局部组件
  components: {
    PannelJb: PannelJb
  }
}
</script>

<style>

</style>
vue组件的通信

1.父向子传值：（被引入的vue文件是子文件）

步骤:

  1. 创建组件components/MyProduct.vue - 作为子文件组件

  2. 组件内在props定义变量, 用于接收外部传入的值

    <template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'price', 'intro']
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

  3. App.vue中引入注册组件, 使用时, 传入具体数据给组件显示

    <template>
  <div>
    <Product title="好吃的口水鸡" price="50" intro="开业大酬宾, 全场8折"></Product>
    <Product title="好可爱的可爱多" price="20" intro="老板不在家, 全场1折"></Product>
    <Product title="好贵的北京烤鸭" price="290" :intro="str"></Product>
  </div>
</template>

<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './components/MyProduct'
export default {
  data(){
    return {
      str: "好贵啊, 快来啊, 好吃"
    }
  },
  // 3. 注册组件
  components: {
    // Product: Product // key和value变量名同名 - 简写
    Product
  }
}
</script>

<style>

</style>

    注：父向子组件传入数据时，子组件只能读此数据，不能对父传入的数据进行修改

2.子组件向父通信：

使用场景：子组件想要去改变父中的数据

使用语法:

  • 父中: @自定义事件名=“父methods函数”

    <template>
  <div><template>
  <div>
    //此处subprice为自定义事件，需要this.$emit()触发  
    <Product v-for="(obj,ind) in list" @subprice="fn"></Product>
  </div>
</template>

<script>
import Product from "./components/MyProduct _2";
export default {
  components: {
    Product
  },
  methods: {
    fn(i,price) {
      this.list[i].proprice -= price 
    }
  }
};
</script>

<style>
</style>

  • 子组件中: this.$emit(“自定义事件名”, 传值) - 执行父methods里函数代码

<script>
export default {
  props: ['index'],
  methods: {
    sub() {
      // this.$emit()用于触发事件
      this.$emit("subprice",this.index,1)
    }
  }
}
</script>

父传入的数据进行修改

2.子组件向父通信：

使用场景：子组件想要去改变父中的数据

使用语法:

  • 父中: @自定义事件名=“父methods函数”

    <template>
  <div><template>
  <div>
    //此处subprice为自定义事件，需要this.$emit()触发  
    <Product v-for="(obj,ind) in list" @subprice="fn"></Product>
  </div>
</template>

<script>
import Product from "./components/MyProduct _2";
export default {
  components: {
    Product
  },
  methods: {
    fn(i,price) {
      this.list[i].proprice -= price 
    }
  }
};
</script>

<style>
</style>

  • 子组件中: this.$emit(“自定义事件名”, 传值) - 执行父methods里函数代码

<script>
export default {
  props: ['index'],
  methods: {
    sub() {
      // this.$emit()用于触发事件
      this.$emit("subprice",this.index,1)
    }
  }
}
</script>
vue.js前端前端

相关文章

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习...
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面...
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生...
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/v...
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 ...
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服...