脚手架和VUE基础

分类：菜鸟笔记作者：zlflyhhh

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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

vue.js前端前端

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot