一口气从零到全栈开发（结合ai快速入门）【视频学习】4-CSDN博客

本文链接：https://blog.csdn.net/XSTIT/article/details/149416221

这篇开始讲解vue的内容，vue官网，vue的作用是将css和html连接起来，让网页动起来

Vue.js - 渐进式 JavaScript 框架 | Vue.js

配置过程中可能遇到的问题

VUE安装及环境配置（完整版）-CSDN博客

视频配置包：

https://pan.baidu.com/s/1JNX44K4WMbzfyhYolbaDGQ?pwd=8xih 提取码: 8xih

如果实在不行，可以直接用网页版先学习：

Vue SFC Playground

将视频配置包中代码粘过来就可，标签问题询问ai

接下里开始讲解

一.创建变量

1.1引入ref

import { ref } from 'vue';

const str =ref("20050810") //输入const str =ref后点击tab自动补全上面那一行！一定要补全这个

1.2打印变量

分两种情况

第一种：如果在script标签中需要

str.value

第二种：如果在template中可以直接

二.事件监听

2.1点击

此处运用@符号就可以完成具体操作是打印某个值的需求

2.2鼠标的移入和移出

2.3输入框双向绑定

输入框和变量中的值会实时相互传递

2.4单选框实现双向绑定

2.4动态绑定

2.5 image标签-动态绑定类名

<div :class="[str?' item completed':'item']">

通过点击addtodo就可以改变，是否划线

三.列表渲染

四.运用上述知识完善todo app

<script setup>

import { ref } from 'vue'

/*1.输入框输入变量*/

const str=ref('')

/* 2.列表中已存在的东西(加ref,放在括号中) */

const list=ref

(

[

{

iscompleted:false,

text:'吃饭'

},

{

iscompleted:false,

text:'睡觉'

},

{

iscompleted:false,

text:'打豆豆'

}

]

)

/* 3.增加函数(直接push进来)

在script标签中想要访问值加.value */

function add()

{

list.value.push

({

iscompleted:false,

text:str.value

}）

/*.输入框输入变量之后将值变为无（初始的哪个）*/

str.value=''

}

/* 3.删除函数，多增一个序号，保证删除准确 */

function del(index)

{

list.value.splice(index,1)

}

</script>

<template>

<div class="todo-app">

<div class="title">XST的TODOapp</div>

<div class="todo-from">



<input v-model="str" class="todo-input" placeholder="add a todo" />

<div @click="add" class="todo-button">add todo</div>

</div>

<div v-for="(item,index) in list" class="item" :class="[item.iscompleted? 'completed':'true']">

<div>

<input v-model="item.iscompleted" type="checkbox" />

<span class="name">{{ item.text}}</span>



</div>

<div @click="del(index)" class="del">del</div> 

</div>

</div>

</template>

五.监视某个变量的变化

5.1当某个变量变化的时候执行某些操作

使用watch方法

<script setup>

import { ref,watch } from 'vue'

/*1.输入框输入变量*/

const str=ref('')

function add()

{

console.log(123);

}

watch(str,add)

</script>

5.2当变量有前后值变化时

<script setup>

import { ref,watch } from 'vue'

/*1.输入框输入变量*/

const str=ref('')

function add(newValue,oldVale)

{

console.log(oldVale);

}

watch(str,add)

5.3深度监听（监视一个对象）

<script setup>

import {ref, watch} from 'vue'

/*1.输入框输入变量*/

const str=ref(

{text:''})

/*初始化一个对象*/

function add(oldValue,newValue)

{

console.log(oldValue,newValue);

}

/*加一个参数，否则无法对于对象执行*/

watch(str,add,{deep:true})

</script>

六.动态选择展示图标

<script setup>

import { ref } from 'vue';

// eslint-disable-next-line @typescript-eslint/no-unused-vars

const bool=ref('123213')

/*1.输入框输入变量*/

</script>

<template>

<div v-show="false" class="todo-app">

v-show,v-if都可以通过布尔值选择是否会展示这个图标

但是：v-show,不展示元素但是隐藏

v-if，不展示元素并且不会创建盒子

七.组件知识

例如某个按钮，每次用都要写，所以给他包装成一个组件

只要能公用都可以理解成组件

7.1创建文件

7.2写组件内容

里面这个成为内组件

<script setup>

</script>

<template>

<div></div>

<div class="button">点我</div>

</template>

<style scoped>

.button

{

margin: 100px;

width: 100px;

height: 50px;

line-height: 50px;

text-align: center;

background-color: aliceblue;

border-radius: 10px;

}

</style>

7.3引入组件文件内容

外面这个成为外组件

7.3父组件向子组件中传值

在子组件中创建一些变量，从父组件中传过来。

<script setup>
import { defineProps } from 'vue';
const props=defineProps(['text'])
定义一个方法




</script>
<template>
<div class="button">{{ props.text }}</div>
</template>

<style scoped>
.button
{
  margin: 100px;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: aliceblue;
  border-radius: 10px;
}

</style>

父组件中：