欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 文化 > vue入门

vue入门

2024/11/30 14:45:50 来源:https://blog.csdn.net/m0_67496588/article/details/140619292  浏览:    关键词:vue入门

vue入门

vue介绍

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其他大型框架不同,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,并且非常容易学习和集成到其他库或现有项目中。另一方面,当与现代工具链和支持库结合使用时,Vue 也完全能够为复杂的单页面应用程序提供驱动。

核心特性
  1. 响应式数据绑定: Vue 的核心是一个响应系统,它能使视图与数据自动保持同步。当数据改变时,视图会自动更新。
  2. 组件系统: 组件是 Vue.js 中最强大的功能之一。通过拆分成小的、可复用的组件,可以更容易地管理大型项目。
  3. 虚拟 DOM: Vue.js 使用虚拟 DOM 以获得更高效的渲染性能。虚拟 DOM 是轻量级的 JavaScript 对象,用来描述 DOM 结构。每当状态改变时,Vue 将虚拟 DOM 树与先前的树进行比较,并只应用实际变化的 DOM 元素。
  4. 指令系统: Vue 提供了一套丰富的内置指令,如 v-ifv-forv-bind,用于处理常见的 DOM 操作。
  5. 单文件组件 (SFC): 单文件组件 (.vue 文件) 是将 HTML、JavaScript 和 CSS 代码组合在一个文件中的机制,便于组织和复用代码。

新建vue项目

创建web-projects文件夹,进入文件夹在命令行输入:

yarn create vite vue-demo --template vue

其中vue-demo为新建的项目名

然后进入文件并运行项目:

cd:vue-demo
yarn
yarn dev

然后就可以在localhost:5173访问到vue页面了。

注:这种启动项目方法为yarn+vite,特点是速度快。

打开vue项目

使用webstorm,点击open,选择web-projects中新建的vue-demo项目。

里面的文件夹介绍:

.vscode:建议使用vscode打开此项目

node_modules library root:配置依赖

public:用于存放静态资源,比如图片,css样式等

src:assets:也是用来存放静态资源;components:组件,可以重用的文件;APP.vue:入口模板,main.js:vue首先找的文件,类似于之前的main方法,style.css:样式

gitignore:从git下载的文件存放处

index.html:首页

package.json:存放版本信息,不建议改动

vite.conf.js:配置文件,可以在中间配置信息,如端口:

export default defineConfig({plugins: [vue()],server:{//服务器配置port:7777//服务器端口}
})

yarn.lock:存放的版本信息以及唯一标识,不能改动。

.vue文件内容格式:

<!--script标签上存在lang属性,表示当前脚本使用的语言类型每一个script标签在vue3中使用ts的时候都会有一个setup属性-->
<script setup lang="ts"></script><!--template表示页面要使用的模板,也就是html页面
每个template标签中建议只存在一堆根标签-->
<template></template><!--当前template中需要使用的CSS样式-->
<!--style标签如果具有scoped属性,说明当前定义的css样式只能针对
当前的teemplate生效,如果没有则是全局css样式-->
<style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

模板语法

1.文本插值
<script setup lang="ts">import {ref} from "vue";let text1 = ref<string>("Hello yarn vite")let text2 = ref<number>(2)</script><template><div><!--vue对文本数据的插入值,有两种方式--><p>{{text1}}</p><p v-text="text2"></p></div>
</template>
2.html插值
<script setup lang="ts">import {ref} from "vue";let htmlContent = ref<string>("<h2>Hello World!</h2>");</script><template><div><div v-html="htmlContent"></div> </div>
</template>
3.属性绑定
<script setup lang="ts">
import {ref} from "vue";
let inputType = ref<string>("password")
let myClass = ref<string>("class1")
let colorR = ref<string>("red")
</script><template><div><!--对标签属性的绑定,有两种写法,v-bind:属性<=> :属性--><input v-bind:type="inputType"><input :type="inputType"><p v-bind:class="myClass"></p><div :style="{color: colorR}">我是红色的</div></div>
</template>
4.事件绑定
<script setup lang="ts">let click = function (){console.log("Hello!")}let click2 = () => {console.log("World!")}
</script><template><div><!--以点击事件为例,有两种写法,v-on:click <=> @click--><a v-on:click="click">点我</a><a @click="click2">点我</a></div>
</template>
5.条件渲染
<script setup lang="ts">
import {ref} from "vue";let flag = ref<number>(1)
let page = ref<number>(10)
let names = ref<string[]>(["张三","李四"])
let salaries = ref<number[]>([6000,8000,12000])
</script><template><div><!--条件渲染--><span v-if="flag===1">flag=1</span><span v-else-if="flag===2">flag=2</span><span v-else>flag=3</span><br/><span v-show="page>=2">下一页</span><br/><span v-for="name in names">{{name}}</span><br/><span v-for="(salary,index) in salaries">{{index+1}}:{{salary}}</span></div>
</template>
6.表单输入
<script setup lang="ts">
interface User{username: stringpassword: string
}
import {ref} from "vue";
let user = ref<User>({username: '',password: ''
})
</script><template><div><!--表单输入绑定,输入与变量双向绑定--><form>账号:<input type="text" :value="user.username">密码:<input type="password" :value="user.password"><input type="submit" value="登录"></form></div>
</template>

导入导出

新建一个index.ts:

/*** 将时间转换为字符串* @param time*/
//export表示定义了一个可以导出的函数,这个函数如果需要再其他
//地方使用,那么首先要从ts文件导入
export function date2str(time: Date){let year :number = time.getFullYear();let month:number = time.getMonth();let day:number = time.getDate();let hour:number = time.getHours();let minute:number = time.getMinutes();let second:number = time.getSeconds();return year + "-" + zerofill(month,2) + "-" + zerofill(day,2) + " " + zerofill(hour,2) + ":" + zerofill(minute,2) + ":" + zerofill(second,2);
}/*** 零填充* @param num* @param len*/
function zerofill(num:number,len:number): string{let str: string = num + '';while(str.length<len){str = str + '0'}return str;
}

在vue文件中导入并使用

<script setup lang="ts">import {ref} from "vue";
//导入一些类型的文件时可以省略导入文件的后缀名(比如js,ts,vue)
//如果导入的文件在文件夹中是以index命名,那么这个index也可以省略
import { date2str } from "./components/date";let showTime = function (){console.log(date2str(new Date()));
}</script><template><div><input type="button" @click="showTime" value="查看当前时间"></div>
</template>

使用element-plus美化界面

使用yarn下载:

yarn add element-plus

完整引入:

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import zhCn from 'element-plus/es/locale/lang/zh-cn';import App from "./components/App.vue";const app = createApp(App);app.use(ElementPlus, { locale: zhCn });app.mount('#app');

vue中使用:(以校验表单为例)

<script setup lang="ts">
import { FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue';const loginForm = ref<FormInstance | null>(null);
const user = reactive({username: '',password: ''
});
const loginRules = reactive<FormRules>({username: [{ required: true, message: "请输入账号", trigger: ["blur", "change"] }],password: [{ required: true, message: "请输入密码", trigger: ["blur", "change"] }]
});const login = () => {if (loginForm.value) {loginForm.value.validate((valid) => {if (valid) {console.log("校验通过");} else {console.log("校验不通过");}});}
};
</script><template><el-form :model="user" :rules="loginRules" ref="loginForm" class="login-form"><el-form-item prop="username"><el-input type="text" v-model="user.username" placeholder="用户名"/></el-form-item><el-form-item prop="password"><el-input type="password" v-model="user.password" placeholder="密码"/></el-form-item><el-form-item><el-button type="primary" @click="login">登录</el-button></el-form-item></el-form>
</template><style scoped>
.login-form {width: 300px;margin: 100px auto;
}
</style>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com