vue小结

最新推荐文章于 2024-07-16 17:20:09 发布

你那边天气是怎样

最新推荐文章于 2024-07-16 17:20:09 发布

阅读量869

点赞数 13

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_64505886/article/details/140428823

版权

vue基础

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动Vue的官方网站是: https://cn.vuejs.org/

Vue.js 特点

简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
数据驱动: 自动追踪依赖的模板表达式和计算属性。
组件化：用解耦、可复用的组件来构造界面。
轻量：~33.46KB min+gzip，无依赖。
快速:精确有效的异步批量 DOM 更新。
模块友好: 通过 NPM 或 Bower 安装，无缝融入你的工作流。

如果你喜欢下面这些，那你一定会喜欢 Vue.js：

可扩展的数据绑定机制
原生对象即模型
简洁明了的 API
组件化 UI 构建
多个轻量库搭配使用

vue的常见指令

插值
文本
要进行文本部分替换，可以用 {{}} 将变量元素括起来；

<div id = "app">
    {{message}}
</div>

// Vue实例

var app = new Vue({
     name: "app",
    data: {
        message: 'Hello, Vue'
    }
})

要进行文本全部替换，则可以用 v-text 来进行，比如下面的“测试”将会被 message 的内容所替代；

<div id = "app">
	<h2 v-text="message">测试</h2>
</div>

var app = new Vue({
    name: "app",
    data: {
        message: "hello，world"
    }
})

原始 HTML
双大括号会将数据解释为普通文本，但如果我们要插入原始的 HTMl 内容，此时就需要使用 v-html 指令；

<div id="app">
    <p v-html="rawHtml">
    </p>
</div>

var app = new Vue({
    name: "app",
    data: {
        rawHtml: "<span style="color:red">内容标红</span>"
    }
})

绑定元素属性
要实现给元素绑定属性，可以使用 v-bind 指令，其完整写法是 v-bind:属性名=“表达式”，简写则可以直接省略掉 v-bind，只保留 :属性名=“表达式”，但它属于单向绑定；

<div id = "app">
    <h2 v-bind:title="message">Vue In Action！</h2>
</div>

var app = new Vue({
    name: "app",
    data: {
        message : "Vue 实战！"
    }
})

条件与循环
条件指令，也就是我们日常开发中所使用的 if，用 v-if 指令来进行绑定；

<div id="app">
    <p v-if="found">
         我被你发现了！
    </p>
</div>

var app = new Vue({
   name: "app",
    data: {
        found: true
    }
})

此外，还可以使用 v-else 指令来表示 v-if 的 else 块，它必须紧跟在 v-if 或 v-else-if 元素的后面，否则它将不会被识别；

<div v-if="type === 'A'">
  The answer is A
</div>
<div v-else-if="type === 'B'">
  The answer is B
</div>
<div v-else-if="type === 'C'">
  The answer is C
</div>
<div v-else>
  The answer is D
</div>

循环指令，也就是我们经常用到的 for 循环，用 v-for 指令来进行绑定，根据数据生成列表结构，其语法是 (item, index) in 数据；

<div id="app">
    <ul>
        <li v-for="num in nums">
        	{{num.text}}
        </li>
    </ul>
</div>

var app = new Vue({
   name: "app",
    data: {
        nums: [1, 2, 4]
    }
})

处理用户输入
要进行用户与应用之间的交互，可以使用 v-on 指令来添加事件监听器，通过它来调用 Vue 实例中定义的方法，此外为了减少开发过程中的代码量，我们还可以使用 @ 来替换 v-on ，它俩可以达到同样的效果；

<div id = "app">
    <p>
        {{message}}
    </p>
    <button v-on:click="reverseMessage">
    <!-- <button @click="revuerseMessage"> -->
        消息反转
    </button>
</div>

var app = new Vue({
   name: "app",
    data: {
        message: "我是小学生"
    },
    methods: {
        reverseMessage:function(){
            this.message = this.message.split(' ').reverse().join(' ')
        }
    }
})

为了处理不去处理 DOM 事件细节，而只用纯粹的数据逻辑来进行操作，Vue 中为 v-on 又提供了事件修饰符，常见时间修饰符如下：

事件修饰符说明 .stop 表示阻止事件继续传播
.prevent 表示时间不再重载
.capture 表示使用事件捕获模式
.self 表示是当前元素自身时触发处理函数
.once 表示事件只触发一次
.passive 表示事件立即触发

同时，为了实现表单输入和应用状态之间的双向绑定，我们可以使用 v-model 指令；

通过 v-model 指令，能够便捷的设置和获取表单元素的值，而且绑定的数据会和表单元素值相关联；

<div id="app">
    <p>你的电话号码是：{{ message }}</p>
    更新你的电话号：<input type="text" v-model="message">
</div>

var app = new Vue({
   name: "app",
    data: {
        message: "小学生"
    }
})

元素的显示与隐藏
要实现元素的显示与隐藏，我们可以通过 v-show 这个指令，它会根据表达式的真假，来切换元素的显示和隐藏状态。

<div id="app">
    <img src="11111" v-show="isShow">
</div>

var app = new Vue({
       name: "app",
    data: {
        isShow: true
    }
})

组件通信

一、props （父–>子）

//父组件
<template>
  <div>
    <h1>我是父组件</h1>
    <child :name="name" age = "12"></child>
  </div>
</template>
<script setup lang="ts">
    import child from './child.vue'
    import { ref } from 'vue'
    const name = ref('父亲名字')
</script>

//子组件
<template>
  <div>
    <h1>我是子组件2</h1>
    <p>我收到了父组件的数据：{{ name }}</p>
    <p>{{ props.age }}</p>
  </div>
</template>
<script setup lang="ts">
const props = defineProps(["name", "age"]);
</script>

二、自定义事件（子–>父）

//父组件
<template>
  <div>
    <h1>我是父组件</h1>
    <child @mimi="tingmimi"></child>
    <p>我听到了子组件的秘密 : {{ msg }}</p>
  </div>
</template>
 
<script setup lang="ts">
import child from './child.vue'
import {  ref } from 'vue'
let msg =ref('还没听到秘密')
const tingmimi = function(message:any){
     msg.value = message
}
</script>

//子组件

<template>
  <div>
    <h1>我是子组件2</h1>
    <button @click="saymimi">点我给父组件说我的秘密</button>
  </div>
</template>
<script setup lang="ts">
let $emit = defineEmits(['mimi'])
const saymimi = function(){
    $emit('mimi', '是小学生是我的秘密啦')
}
</script>