【pzs0221】html、css、JavaScript、webserver 使用
HTML 大小写不敏感，javaScript大小写敏感
0、调试
Vue的调试工具
在chrome浏览页面上右键–>检查，快捷键F12。
运行：
npm（Node Package Manager）执行项目中定义的构建脚本。npm 是 Node.js 的包管理器，用于管理项目中的依赖和执行脚本。
npm run：用于运行 package.json 文件中定义的脚本。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
npm run serve：启动开发服务器，监听文件变化并自动刷新浏览器。
npm run build：构建生产环境的静态资源。
1、VUE
https://cn.vuejs.org/
https://cn.vuejs.org/api/
https://www.vue3js.cn/
vue文档：组件选项
vscode + Volar插件
【2023最新版】Vue3从入门到精通，零基础小白也能听得懂
黑马程序员前端Vue3小兔鲜电商项目实战
Vue项目实战 (使用 Vue3.2 + Ant Design 搭建通用权限管理系统)
vue入门教程（详细版）
vue性能优化（详细版）
vue环境搭建（npm run serve）
ant-design-vue使用指南
1.1 安装
1、安装node
2、更改npm包路径：
#以管理员权限启动cmd
npm config ls
npm config set prefix "D:\npm\npm_modules"
npm config set cache "D:\npm\npm_cache"
#将上面2个路径加入path
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v
安装包查询：https://www.npmjs.com/
3、脚手架安装Vue-cli(基于webpack)、create-vue(基于vite)
cli：
npm install -g @vue/cli
vue -v
vue create project1 #不支持驼峰命名，可以短横线方式
#选择各种模块
cd project1
npm run serve
create-vue：(node>16.0)
npm init vue@latest
cd projectName
npm install
npm run dev
4、cli项目设置端口号：
（1）package.json方式（不推荐）
//package.json中加入下列，注意双引号
"vue":{
"devServer":{
"port": "8088",
"open": true
}
}
（2）vue.config.js
在项目的根目录下创建vue.config.js文件
module.exports = {
devServer:{
port: 8088,
open: true
}
}
5、启动流程
main.js //启动vue
App.vue //主页（组件）
index.js //路由
1.2 创建项目
npm init vue@latest
Project name: //只能小写
cd projecName
npm install / cnpm install
nmp run dev
目录结构：
1.3 setup组合式api
export default{
data(){
return {
showLogin:true,
// def_act: '/A_VUE',
msg: 'hello vue',
user:'',
homeContent: false,
}
},
methods:{
}
}
老的选择式api写法:
import { defineComponent } from 'vue'
export default defineComponent({
name:'Component',
components: {},
emits: {},
props: {
goback: Boolean,
showTitle: {
type: Boolean,
default: true,
},
header: {
type: Object,
default: () => ({}),
},
},
data() {
return { count: 1 }
},
methods: {
increment() {
this.count++
}
}
})
setup()函数:
setup() 函数中手动暴露大量的状态和方法非常繁琐
import { defineComponent } from 'vue'
export default defineComponent({
name:'Component',
components: {},
emits: {},
props: {
goback: Boolean,
showTitle: {
type: Boolean,
default: true,
},
header: {
type: Object,
default: () => ({}),
},
},
setup(props,context) {
const count = 1
increment() {
this.count++
}
return {count,increment}
}
})
组合式api:
<script setup lang="ts">
import { useRouter } from 'vue-router';
const emit = defineEmits(['change', 'delete'])
interface Props {
menu: string;
isRunning?: boolean;
}
const props = withDefaults(defineProps<Props>(), { menu: '' });
const route = useRouter();
const onMenuClick = () => {
route.push('/');
};
</script>
setup是Vue3 的一大特性函数, 它有几个特性:
1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数
2、setup函数是 Composition API（组合API）的入口
3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用
setup函数的注意点：
1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法
2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined
3、setup函数只能是同步的不能是异步的
1.4 响应式数据
reactive:
<script setup>
import { reactive } from 'vue'
//参数为对象类型
const state= reactive({
count：0
}）
const setCount = () => {
state.count++
}
</script>
<template>
<button @click="setCount">{{ state.count }}</button>
</template>
ref：（推荐使用）
<script setup>
import { ref } from 'vue'
//参数的对象类型或简单类型
const count = ref(0)
const setCount = () => {
count.value++ //用.value是因为ref返回的是对象
}
</script>
<template>
<button @click="setCount">{{ count }}</button>
</template>
1.5 各种指令
1.5.1 v-on：@
Vue中的v-on
监听 DOM 事件
//v-on, @是v-on缩写
<button v-on:click="fn">click</button>
<button @click="del(index)">删除</button>
//v-on={事件1,事件2}
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键 触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
1.5.2 v-bind：（:）
Vue - v-bind
在绑定class或style特性时，支持其它类型的值，如数组或对象。
在绑定prop时，必须在子组件中声明。
<input type="radio" :checked="picked"/>
<h2 :class="className">v-bind动态绑定class</h2>
<Child info="父组件传过来的信息" :money = money></Child>
<img v-bind:src="imageSrc">
<img :src="imageSrc">
<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<button :[key]="value"></button>
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- prop 绑定。“prop”必须在子组件 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
绑定多个值：
const objectOfAttrs = {
id: 'container',
class: 'wrapper'
}
<div v-bind="objectOfAttrs"></div>
1.5.3 v-model：
//v-model指令来实现表单元素和数据的双向绑定
1.5.4 v-once:当数据改变时，插值处的内容不会更新
<p>{{ message }}</p>
<span v-once>这个将不会改变: {{ message }}</span>
1.5.5 v-html: 输出 html 代码
<div id="example1" class="demo">
<p>使用双大括号的文本插值: {{ rawHtml }}</p>
<p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>
<script>
const RenderHtmlApp = {
data() {
return {
rawHtml: '<span style="color: red">这里会显示红色！</span>'
}
}
}
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>
1.5.6 v-if
v-if 指令会基于表达式 seen 的值的真假来移除/插入该
元素
<p v-if="seen">Now you see me</p>
1.5.7
1.6 组件间通信
props、custom event、event bus、v-model、useAttrs、ref-$parent、provide-inject、pinia、slot
bilibili-Vue项目（硅谷甄选）
Vue 学习笔记
1.6.1 props
Vue – props
父组件向子组件传递，只读
父组件：
<template>
<div class="box">
<h1>我是父组件</h1>
<Child info="父组件传过来的信息" :money = money></Child>
</div>
</template>
<script setup lang="ts">
import Child from "./Child.vue";
import { ref } frome "vue";
let money = ref(10000);
}
</script>
子组件：选择式Api（老的）
<template>
<div class="son">
<h1>我是子组件</h1>
<p>{{info}}</p>
</div>
</template>
<script>
export default{
props:['info','money']
}
</script>
子组件：组合式Api（新的）
<template>
<div class="son">
<h1>我是子组件</h1>
<p>{{props.info}}</p>
<p>{{info}}</p> <!---props可省略前面的名字---->
</div>
</template>
<script setup lang="ts">
//defineProps()方法无需声明、引用, 声明的变量props是代理对象，使用时可省略
let props = defineProps(['info','money']);
}
</script>
1.6.2 自定义事件
【Vue】组件自定义事件
子组件向父组件传递，
1.6.3 全局事件总线
1.6.4 v-model
1.6.5 useAttrs
1.7 属性
computed、methods、watch、mounted
Vue中关于computed、methods、watch，mounted的区别
1.7.1 computed
计算属性：对已有的属性(Vue实例中的data属性的属性值)进行加工得到的全新属性。
vue中computed的详细讲解
<template>
<div>
<div>
姓：<input type="text" v-model="firstName" />
</div>
<div>
名：<input type="text" v-model="lastName" />
</div>
<!-- 调用两次fullName -->
<div>姓名：{{ fullName }}</div>
<div>姓名：{{ fullName }}</div>
</div>
</template>
<script>
export default {
data() {
return {
firstName: "张",
lastName: "三",
};
},
computed: {
fullName() {
console.log("这是fullName");
return this.firstName + this.lastName;
}
}
};
</script>
1.7.2 methods
使用methods属性给 Vue 定义方法，将所有方法放到这个属性里头，我们可以直接利用方法名称就可以直接调用这个方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
<h1>点击按钮修改名字</h1>
<div id="app">
<p>{{message}}</p>
<button @click="change">点我改名</button>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
message: "小飞侠"
}
},
//------------------------
methods:{
change(){
this.message = "水星仔" // 改变data中属性的值
}
}
})
</script>
</body>
</html>
1.7.3 watch
监听属性的数据变化。语法格式：
watch: {
监听的属性: {
handler(数据改变后新的值, 数据改变前旧的值) {
编写处理逻辑
}
}
}
例子：
data (){
return {
currentCity: "深圳"
｝
｝
watch:{
'currentCity':{
handler:function (val,oldval) {
this.ctFontSize = val.length > 3 ? true: false;
}
}
}
//当currentCity的值发生变化时就会运行上面的代码
1.7.4 mounted
【Vue】created、mounted、updated详解
//监听路由去请求方法更新数据
...
ref="demoRef"
...
created() {},
mounted() {},
updated() {},
watch: {
$route(a, b) {
if (a.path != b.path) {
this.init();
}
},
//-----或-----
$route(-) {
this.init();
},
},
methods: {
init() {
this.detail();
...
}
},
}
2、TS（TypeScript）
官网：https://ts.nodejs.cn/
菜鸟TS教程
W3C的TS教程
npm i -g typescript #安装
tsc -v #查看版本
tsc init #生成tscconfig.json
2.1 箭头函数
3、ui库
3.1 Ant vue Design
官网：https://ant-design.antgroup.com/index-cn
安装：
npm i --save ant-design-vue
在main.js中导入：
import Antd from 'ant-design-vue';
import 'ant-desing-vue/dist/antd.css';
createApp(App).use(Antd).mount('#app')
3.2 Element Ui
官网：
https://element.eleme.cn/#/zh-CN
https://element-plus.org/zh-CN/#/zh-CN
在vue项目端口中输入：
npm i element-ui -S
在main.js中加入：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
3.2 Three.js
4、Ajax、Axios
官网：http://www.axios-js.com/
文档：https://www.kancloud.cn/yunye/axios/234845
npm i axios #安装axios
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
