Vue是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合
进入vue.js中文官网 https://cn.vuejs.org/ 下载最新版
第一种安装方法:通过 CDN 使用 Vue3
你可以借助 script 标签直接通过 CDN 来使用 Vue3: Vue3案例预览>>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
第二种安装方法:通过 nodejs 使用 Vue3
1、打开目录 >> cmd >> npm create vite@latest my-vue-app --template vue
my-vue-app 为指定目录可改,--template vue为指定模板也可改为 --template vue-ts用typescript语言
cd my-vue-app
npm install
npm install element-plus
npm run dev
打开生成的网址:http://127.0.0.1:5173/
node_modules --- Vue项目的运行依赖文件夹
public --- 资源文件夹
src --- 源码文件夹
index.html --- 首页html文件
package.json --- 信息描述文件
vite.config.js --- Vue配置文件
使用setup组合式API来写
在 Vue 中,可以通过 v-bind 指令来实现对属性的绑定。绑定的属性可以是 HTML 元素的标准属性,也可以是自定义属性。
v-bind 指令可以简写为冒号“:”。
<template>
<div v-bind:id="appid" :class="msg" v-bind:title="title">测试</div>
<button :disabled="isButtonDisabled">Button</button>
<div v-bind="myobject">测试2</div>
</template>
<script>
export default{
data(){
return{
msg:"active",
appid:"thisip",
title:null,
isButtonDisabled:false,
myobject:{
id:"divid",
style:"color:blue"
}
}
}
}
</script>
<style>
.active{color: red;}
</style>
App.vue 代码
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<HelloWorld/>
</template>
在 Vue 3 中,可以通过 v-if 和 v-show 指令来实现条件渲染。这两种指令都可以根据给定的值(可以是一个 data 属性或计算属性)来显示或隐藏组件或 DOM 元素。
<template>
<h3>条件渲染</h3>
<div v-if="flag">你能看见我吗</div>
<div v-else>那你还是看看我吧</div>
<div v-if="type==='A'">A</div>
<div v-else-if="type==='B'">B</div>
<div v-else-if="type==='C'">B</div>
<div v-else>not A/B/C</div>
<div v-show="flag">你能看见我吗</div>
</template>
<script>
export default{
data(){
return {
flag:true,
type:"D"
}
}
}
</script>
App.vue 代码
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import ifDemo from './components/ifDemo.vue'
</script>
<template>
<HelloWorld/>
<ifDemo/>
</template>
在 Vue 中,我们可以使用 v-for 指令来进行列表渲染。v-for 指令需要接收一个列表数据作为参数,然后将这个列表渲染成多个组件/元素。
<template>
<h3>列表渲染</h3>
<p v-for="item in names">{{ item }}</p>
</template>
<script>
export default{
data(){
return{
names:["xiyueta.com","爱学习","是一件好事"]
}
}
}
</script>
App.vue 代码
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import ifDemo from './components/ifDemo.vue'
import listDemo from './components/listDemo.vue'
</script>
<template>
<HelloWorld/>
<ifDemo/>
<listDemo/>
</template>
开发工具(DevTools)是一组内置于浏览器中的工具,用于帮助开发人员调试、分析和优化其应用程序。
gitbhu介绍网址:https://github.com/vuejs/devtools
不同浏览器安装下载网址:https://devtools.vuejs.org/guide/installation.html
vue2通过CDN使用,一个详细案例1
尝试一下>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1.2插值表达式 -->
<p>{{ title }}</p>
<p>{{ content }}</p>
<p>{{ 1+2+3 }}</p>
<p>{{ 1 > 2 ? '对' : '错' }}</p>
<p>{{ output() }}</p>
<p>{{ output() }}</p>
<p>{{ output() }}</p>
<p>{{ outputComtent }}</p>
<p>{{ outputComtent }}</p>
<p>{{ outputComtent }}</p>
<!-- 4. 指令 -->
<!-- 内容指定 -->
<p v-text="htmlContent">123</p>
<p v-html="htmlContent">123</p>
<!-- 渲染指定 -->
<p v-for="item in 5">这是内容</p>
<p v-for="item in arr">这是内容:{{ item }} </p>
<p v-for="(item,key,index) in obj">这是内容:{{ item }} {{key}} {{index}}</p>
<p v-if="false">标签内容</p>
<p v-show="false">标签内容</p>
<p v-show="boll">标签内容</p>
<!-- 属性指令 -->
<p v:bind:title="title">这是内容</p>
<p :title="title">这是内容</p>
<!-- 事件指令 -->
<button v-on:click="output">按钮</button>
<button @click="output">按钮</button>
<!-- 表单指令:v-model可以实现双向数据绑定 -->
<input type="text" v-model="inputValue">
<p v-text="inputValue"></p>
<!-- 5. 修饰符 -->
<input type="text" v-model.trim="inputValue">
</div>
<!-- <script src="vue.min.js"></script> -->
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
const value='这是内容'
// document.getElementById('app').textContent=value
// 1.响应式数据与插值表达式
const vm=new Vue({
el:'#app',
data(){
return {
title:'这是标题文本',
content:'这是内容文本',
htmlContent:'这是一个<b>标签</b>',
arr:['a','b','c','d'],
obj:{a:10,b:20,c:30},
boll:true,
inputValue:'默认内容'
}
},
// 1.3 methods 属性
methods:{
output(){
console.log('methods执行了')
return '标题为' + this.title + ',内容为' + this.content
}
},
// 2. 计算属性:具有缓存性
computed:{
outputComtent(){
console.log('computed执行了')
return '标题为' + this.title + ',内容为' + this.content
}
},
// 3. 侦听器
watch:{
title(newValue,oldValue){
console.log(newValue,oldValue)
}
}
})
</script>
</body>
</html>
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<div id="app">
<p>{{site}}</p>
<p v-text="url"></p>
<p v-html="author"></p>
<p>{{ details() }}</p>
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>xiyueta.com</h1>
</template>
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
<p> {{ message.split('').reverse().join('') }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
site: "xiyuetaJS库",
url: "www.xiyueta.com",
author: "<font color=red>xiao yun</font>",
use: false,
seen: true,
ok: true,
sites: [
{ name: 'Xiyueta' },
{ name: 'Google' },
{ name: 'Taobao' }
],
message: "xiyueta.com"
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术,更是梦想!";
}
}
})
console.log(vm.author)
</script>
Vue2脚手架:Vue CLI是Vue官方提供的脚手架工具,用于创建和管理Vue项目。可以使用Vue CLI 2或Vue CLI 3来创建Vue2项目。案例:src/App.vue
官网地址:https://v2.cn.vuejs.org/v2/guide/class-and-style.html
npm install -g @vue/cli 命令用于全局安装Vue CLI,它是Vue官方提供的脚手架工具,用于创建和管理Vue项目。
vue create my-vue-project 命令用于创建一个新的Vue项目
或 vue ui 命令用于启动Vue项目的可视化界面管理工具。通过Vue UI,你可以使用图形化界面来管理和配置Vue项目,而不需要手动编辑配置文件。
npm i serve -g 全局安装"serve"模块
cd my-vue-project 使用"cd"命令切换到"my-vue-project"目录
npm run serve 命令将启动Vue项目的开发服务器
npm run build 命令将构建您的 Vue 项目并生成用于生产环境的优化版本(打包) serve dist 启动一个静态文件服务器并提供 dist 目录中的文件
注意:Visual Studio Code终端命令里,提示没有权限时,运行下面命令
打开一个管理员权限的 PowerShell 窗口。
Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope CurrentUser在 PowerShell 窗口中运行以下命令,以确认执行策略已更改为 “Unrestricted”:
Get-ExecutionPolicy -List
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<h1>父组件中接收到的数据:{{ childData }}</h1>
<HelloWorld
msg="Welcome to Your Vue.js App"
:count="parentCount"
@child-count-change="handler"
>
这是默认内容1
<template v-slot:footer="dataObj">第一个footerr{{ dataObj.childCount }}</template>
<template #footer2>第一个footer2</template>
</HelloWorld>
<HelloWorld>这是默认内容2</HelloWorld>
<HelloWorld>这是默认内容3</HelloWorld>
<HelloWorld></HelloWorld>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
data(){
return{
parentCount:300,
childData:0
}
},
methods:{
handler(childCount){
this.childData=childCount
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
案例:src/components/HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<slot>基础的默认内容</slot>
<p>props中的count值{{ count }}</p>
<button @click="handler">按钮</button>
<slot name="footer" :childCount="childCount">第一个footer的默认内容</slot>
<slot name="footer2"></slot>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
// 组件通信
// 1.父传子:通过 props 进行处理
// 2.子传父:通过自定义事件处理
props: {
msg: String,
count:{
type:[String, Number],
default:100
}
},
data(){
return {
childCount:0
}
},
methods: {
handler(){
this.childCount++
this.$emit('child-count-change',this.childCount)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
background-color: blue;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
cmd >> npm init vite@latest vite安装
cmd >> npm i vue-router 安装路由
cmd >> npm i pinia 状态管理
cmd >> npm i axios 发送请求
cmd >> npm i element-plus element库
cmd >> npm i sass sass-loader -D CSS预处理器
cmd >> npm i md5js 加密md5
cmd >> npm i nprogress --save 加载进度条插件