vue入门
vue介绍
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其他大型框架不同,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,并且非常容易学习和集成到其他库或现有项目中。另一方面,当与现代工具链和支持库结合使用时,Vue 也完全能够为复杂的单页面应用程序提供驱动。
核心特性
- 响应式数据绑定: Vue 的核心是一个响应系统,它能使视图与数据自动保持同步。当数据改变时,视图会自动更新。
- 组件系统: 组件是 Vue.js 中最强大的功能之一。通过拆分成小的、可复用的组件,可以更容易地管理大型项目。
- 虚拟 DOM: Vue.js 使用虚拟 DOM 以获得更高效的渲染性能。虚拟 DOM 是轻量级的 JavaScript 对象,用来描述 DOM 结构。每当状态改变时,Vue 将虚拟 DOM 树与先前的树进行比较,并只应用实际变化的 DOM 元素。
- 指令系统: Vue 提供了一套丰富的内置指令,如
v-if
、v-for
和v-bind
,用于处理常见的 DOM 操作。 - 单文件组件 (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>