vue基础语法创建vue项目,使用终端打开我们想要放置创建的vue的文件夹然后输入这段语法npm create vite

准备工作

创建vue项目,使用终端打开我们想要放置创建的vue的文件夹然后输入这段语法npm create vite@latest，然后输入我们想创建的项目名称，然后选择我们想要的框架，选择vue,选择我们想要使用的语言，这样我们就创建好了一个使用vue框架的vite项目，然后在编译器里面会有一个package.json文件这个文件里面记录着这个vite项目需要的依赖，所以我们直接在这个项目里面打开终端，npm i下载就可以了，然后我们看到这个文件里面有一个key为dev,这个dev记录着vite项目，所以我们直接npm run dev,就可以就这个项目跑起来了

可以看到这个vite项目默认是跑在本机的5173端口的，Ctrl加单击就能打开这个端口

我们要知道vue是单页框架，只用创捷一个html文件，vue后缀的文件都只是代码块，那怎么将vue引入html中呢，我们创建的vite项目有一个main.js文件，import {createApp} from vue是指在vue中引入了一个创建函数createApp,import App from './App.vue'是指你引入了一个根组件'./App.vue'并用App进行了代表，create(App).mount('#app')表示创建了一个应用实例，并将它挂在了id为app的DOM元素上，接下来我们就可以去vue里面写代码块了

vue基础语法

我们要先装个插件

然后我们打开'./App.vue'，把初始化生成的默认代码删除，输入vb3s快捷生成一段vue格式的代码，在vue中的代码无法被浏览器识别，它里面不是真实的html代码，而是字符串，所以我们可以用一些vue打造好的语法。

响应式

reactive 函数负责将一个对象变成响应式，这个对象中任何属性值修改都会触发页面更新
ref 函数负责将一个原始值变成响应式。

<template>
  <div>
    <button>0</button>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

我们用button创建一个容器里面放了数字0 页面上就会有一个数字0

那现在我们想要实现一个功能使按钮每点击一次就加一

<template>
  <div>
    <button @click="add">{{state.count}}</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
const state =  reactive({
  count:0
})
function add (){
  state.count++
}
</script>

<style lang="scss" scoped>

</style>

我们直接给这个容器绑定一个名为add的监听事件，然后容器里的也要改成一个变量，然后我们接着写点击后的函数，然后因为页面加载完后不会因为js中的函数变化而重新渲染，所以我们要在js中要发生变化的对象添加一个响应式，从vue中引入这个响应式

但是这里的rective只能把引用类型变为响应式，如果我们定义的是基本类型，怎么实现这个效果呢

<template>
  <div>
    <button @click="add">{{num}}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const num =ref(100)
function add(){
  num.value++
}
</script>

<style lang="scss" scoped>

</style>

那我们就要使用ref这个函数使基本类型变成响应式，而且最后修改这个值的时候要带上value这个属性。

组件化

组件化：将某些具有独立功能或者可复用的代码单独封装成一个组件，在引入其它页面中使用

因为我们使用vue框架的目的是实现复用，所以我们使用单页应用，就一个html文件，其它的都是后缀为vue的代码块，上面那个app.vue是唯一会拿html上显示的代码，所以我们尽量在别的vue后缀文件中写代码块，再引入app.vue,具体怎么操作看下面

我们先在components文件夹下面创建一个demo1文件，写两个input框，然后此时在项目里是看不到这个代码块的效果的，因为main.js只引入了app.vue所以我们要将这段代码引入app.vue，当成组件使用，才能在html文件上生效

用import引入进来，用变量名demo去接收，然后我们直接用demo1做成一个标签使用

这样，我们就成功将demo1.vue文件当成代码块引入html中了，我们知道了这两个语法，那让我们来写一些小demo吧

小demo

demo2

1.实现一行文字每次点击都会在黄色和红色之间切换

2.实现鼠标点击下去就变为绿色，放开又变回来

3.实现在html中用js的内容绑定样式

<template>
    <div>
        <h2 v-bind:class="[flag?'yellow' : 'red']" @click="handle">Hello World</h2>

        <h3 :class="{'green':isGreen}" @mousedown="down" @mouseup="up">阿炜有点萎了</h3>
        <h4 :style="{color:state.color}">阿炜有点萎了</h4>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
const flag =ref(false)
const handle = () =>{
    flag.value=!flag.value
}
const isGreen = ref(false)
const down = () =>{
    isGreen.value = true
}
const up = () =>{
    isGreen.value = false
}
const state =reactive({
    color:'blue'
})
</script>

<style lang="css" scoped>
.red{
  color: red;
}
.yellow{
  color: yellow;
}
.green{
  color: green;
}

</style>

1,我们h2标签里面给handle绑定一个点击事件，让它每次点击得到的变量在true和false之间变化，并将它变为响应式，然后在标签里面进行判断，如果为true，则就为yello,如果为false则为red。由于属性会发生变化，所以我要要用v-bind去对class进行绑定，最后就可以实现这个效果了

2，我们要给h3绑定两个事件，down是鼠标按下去，up是鼠标松开，按下去则class添加属性green，松开则添加属性green,通过改变isGreen的值，down为true,up为false，这里属性也会发生变化所以也要用v-bind:,不过可以简写为:

3，直接在h4标签里面添加属性，我们想添加js里的对象属性，只需把这个对象变为响应式，再将其属性放在样式里就可以了。

最后记得在app.vue中引入demo2

效果展示

demo3

实现一个功能，就是两段文字内容，只有一段会显示，设置一个按钮，每次点击都会使这两段内容交替显示

<template>
    <div>
        <!-- <h2 v-show="isShow">章总萌萌的</h2> -->
        <h2 v-if="isShow">章总萌萌的</h2>
        <h2 v-else">陈总萌萌的</h2>
        <button @click="toggle">显示隐藏</button>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const isShow = ref(true)
const toggle = ()=>{
    isShow.value = !isShow.value
}
</script>

<style lang="css" scoped>

</style>

一样的我们先给这个button容器添加一个点击事件，再定义一个变量isshow并给他绑定为响应式，初始值为true,每次点击都在true和false之间切换，那这个demo的问题就变成了怎么让一个标签隐藏呢，我们这里用到了v-if/else，判断这个值为ture还是false，为true则显示，为false则隐藏。

最后引入app.vue。

效果展示

demo4

实现一个功能，页面上有一个列表，还有一个input输入框和一个button文本框，我们要将input框输入的内容在button文本框被点击之后添加到列表里

<template>
    <div>
        <input type="text" v-model="data"> 
        <!-- v-model可以将用户输入的内容同步到变量里面 -->
        <button @click="add">添加</button>
        <ul>
            <li v-for="(item,i) in list">{{ i+1 }} -- {{item}}</li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from "vue"
const list = ref(["html","json","css","vue"])
const add = () => {
    //获取用户在 input框中输入的值，再push进list
    list.value.push(data.value)
}
const data = ref("")
</script>

<style lang="scss" scoped>

</style>

我们先在js里面定义一个数组，并绑定响应式，然后在li中使用语法v-for将它们添加进去，item代表内容，i代表小标，然后我们给button绑定一个点击事件，每次点击都往数组里添加input里面输入得内容，但是在js中怎么获取到input框中得内容的呢，使用v-model可以得到input框中的内容，然后在js中定义一个变量data去接收，这样我们就可以拿到点击事件我们想添加的内容了。

效果展示

结语

好啦，到这里我们就把Vue的一些基础知识和小demo都讲完啦。通过这几个小例子，大家应该对Vue的响应式、组件化以及基础语法有了一定的了解。Vue作为一个前端框架，确实非常强大和灵活，能够帮助我们快速开发出各种交互效果丰富的网页应用。希望大家在学习过程中能够多动手实践，把学到的知识真正用起来，这样才能更好地掌握Vue。好啦，今天的分享就到这里啦，感谢大家支持。