Html

1.基本标签

html 复制代码

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

2.文本格式化

html 复制代码

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

3.链接

html 复制代码

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img decoding="async" src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:[email protected]">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

4.图片

html 复制代码

<img decoding="async" loading="lazy" src="URL" alt="替换文本" height="42" width="42">

5.无序列表

html 复制代码

<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

6.有序列表

html 复制代码

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

7.表格

html 复制代码

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

8.表单

html 复制代码

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

Css

1.选择器

css 复制代码

/*id选择器*/
#p {
    text-align:center;
    color:black;
    font-family:arial;
}
/*class选择器*/
.center {text-align:center;}

2.文本和字体

css 复制代码

h1 {text-align:center;}
p.date {text-align:right;}

h1 {font-size:40px;}

3.链接

css 复制代码

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

4.隐藏

css 复制代码

h1.hidden {display:none;}

5.定位position

css 复制代码

p.pos_fixed
{
    position:fixed;   /* 元素的位置相对于浏览器窗口是固定位置 */
    position:relative; /* 相对定位元素的定位是相对其正常位置 */
    position:absolute; /*绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>*/
}

6.浮动

css 复制代码

/*使元素向左或向右移动，其周围的元素也会重新排列*/
img
{
    float:right;
}

7.对齐

css 复制代码

margin: auto;
text-align: center;
/*依据实际情况还可以使用position: absolute，margin，padding，float 实现*/

8.图像

css 复制代码

img
{
  opacity:0.4;  /* 透明度 */
}
img:hover  /* 悬停 */
{
  opacity:1.0;
}

JavaScript

1.输出

javascript 复制代码

window.alert("") //弹出警告框。
document.write("") //方法将内容写到 HTML 文档中。
document.getElementById("demo").innerHTML = "段落已修改。" //写入到 HTML 元素。
console.log("") //写入到浏览器的控制台

2.函数

javascript 复制代码

function myFunction(a,b){
	// var定义的变量可以修改，如果不初始化会输出undefined，不会报错
	var obj = {name:"Fiat", model:500, color:"white"};
	//const定义的变量不可以修改，而且必须初始化。
	const s = "s";
    return a*b;
}

3.常用事件

javascript 复制代码

onchange	//HTML 元素改变
onclick	//用户点击 HTML 元素
onmouseover	//鼠标指针移动到指定的元素上时发生
onmouseout	//用户从一个 HTML 元素上移开鼠标时发生
onkeydown	//用户按下键盘按键
onload	//浏览器已完成页面的加载

4.DOM

javascript 复制代码

var x=document.getElementById("intro");
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro");

5.改变Html

javascript 复制代码

document.getElementById("p1").innerHTML="新文本!"; // 改变html
document.getElementById(id).attribute="新属性值"; // 改变属性
document.getElementById(id).style.property="新样式" // 改变CSS

6.DOM 元素 (节点)

尾部创建新的 HTML 元素 (节点) - appendChild()

头部创建新的 HTML 元素 (节点) - insertBefore()

移除HTML 元素 - removeChild()

替换 HTML 元素 - replaceChild()

javascript 复制代码

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);

7.字符串

javascript 复制代码

str.match("world");
str.replace("Microsoft","Runoob");

8.弹框

javascript 复制代码

alert("你好，我是一个警告框！"); // 警告框
var r=confirm("按下按钮");
if (r==true){}else{} // 确认框
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){} // 提示框

Vue

创建Vue工程

模板语法

文本插值，原始 HTML，Attribute 绑定，动态参数

html 复制代码

<template>
  <p>{{ msg + '!' }}</p>
  <div v-html="vhtml"></div>
  <div :id="bindId"></div>
  <button :disabled="isButtonDisabled">Button</button>
  <div v-bind="objectOfAttrs"></div>
  <button @click="clk()">按钮</button>
  <hr>
  <a :[attr]="123">动态参数</a>
</template>

<script setup>
import { ref } from 'vue';


const msg = ref("hello world");
const vhtml = '<span style="color: red">This should be red.</span>';
const bindId = "divid";
const isButtonDisabled = true;
const attr = 'href';
const objectOfAttrs = {
  id: 'divid',
  class: 'wrapper'
}
function clk(){
  msg.value='clik !';
}
</script>
<style>
#divid{
  background: blue;
  width: 100px;
  height: 100px;
}
.wrapper{
  margin: 50px;
}
</style>

响应式基础

html 复制代码

<template>
  <p>{{ reactiveMsg.msg + '!' }}</p>
  <p>{{ refMsg }}</p>
  <button @click="clk()">按钮</button>
</template>

<script setup>
import { reactive, ref } from 'vue';

// ref用于普通类型，使用需要.value；reactive用于复杂类型（对象类型），使用不需要.value
// 建议优先使用ref
const reactiveMsg = reactive({'msg':'hello world'});
const refMsg = ref('123');
function clk(){
  reactiveMsg.msg='clik !';
  refMsg.value = 'clik!';
}
</script>

计算属性

html 复制代码

<template>
  <p>{{ msg }}</p>
  <p>{{ reverseMsg }}</p>
</template>

<script setup>
// 计算属性，相比于method有缓存
const msg = 'hello world';
const reverseMsg = computed(()=>{
  return msg.split('').reverse().join('');
})
</script>

侦听器

html 复制代码

<template>
  <p>{{ msg }}</p>
  <input type="text" v-model="msg">
  <p>{{ obj.age }}</p>
  <button @click="obj.age = 11">改变msg</button>
</template>

<script setup>
import { ref, watch, reactive } from "vue";

const msg = ref('hello world');
const obj = reactive({ count: 0,age: 1,name:'qwe' })
// watch监听器，当某一个值改变时进入
watch(msg, (newValue, oldValue) => {
  console.log(oldValue);
  console.log(newValue);
})
// 加上immediate代表初始化也会进入
watch(msg, (newValue, oldValue) => {
  console.log(oldValue);
  console.log(newValue);
},  { immediate: true })
// 监听对象时，自动为深度监听，监听每一个属性变化，影响性能
watch(obj, (newValue, oldValue)=>{
  console.log(newValue);
})
// 监听对象某一个属性
watch(() => obj.age, (newValue, oldValue) => {
  console.log(newValue);
})
</script>

Class 与 Style 绑定

html 复制代码

<template>
  <p :class="{font : true}">hello</p>
  <!-- 推荐使用驼峰命名 -->
  <p :style="{color : 'red', fontSize : '50px'}">hello!!!</p>
</template>

<script setup>
</script>

<style>
.font{
  font-size: large;
  color: blue;
}
</style>

条件渲染

html 复制代码

<template>
  <p v-if="type == 'A'">A</p>
  <p v-else-if="type == 'B'">B</p>
  <p v-else >C</p>
  <input type="text" v-model="type">
  <!-- 因为v-if是一个指令，他必须依附于某个元素。如果我们想要切换不止一个元素 <template> 元素上使用 v-if，
    这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素 -->
  <template v-if="true">
    <p>111</p>
    <p>111</p>
    <p>111</p>
  </template>
  <p v-show="true">hello!!!</p>
</template>

<script setup>
import { ref } from "vue";

const type = ref('A')
</script>

列表渲染

html 复制代码

<template>
  <ul>
    <li v-for="person in persons" :key="person">{{ person }}</li>
  </ul>
  <button @click="addItem()">增加元素</button>
  <ul>
    <li v-for="(person,index) in persons" :key="index">{{ person }} -> {{ index }}</li>
  </ul>
  <ul>
    <li v-for="obj in objs" :key="obj.name">{{ obj.name }} : {{ obj.age }}</li>
  </ul>
</template>

<script setup>
import { reactive } from "vue";

const persons = reactive(['aaa','bbb','ccc']);
const objs = [{'name':'qqq','age':1},{'name':'www','age':2}]
function addItem(){
  // 数组变化
  // push() 末尾添加
  // pop() 末尾删除
  // shift() 首位删除
  // unshift() 首位添加
  // splice() 删除，插入，替换
  // sort() 排序
  // reverse() 反转
  persons.push('ddd');
}
</script>

事件处理

html 复制代码

<template>
{{ count }}  
<button @click="count++">add 1</button>
<button @click="addNum(10)">add 10</button>
<!-- 只传递event对象时，方法不要加上() -->
<button @click="eventClik">event</button>
<button @click="eventClik2(5, $event)">event2</button>
<!--多事件处理-->
<button @click="addNum(1), addNum(2)">多事件处理+3</button>
</template>

<script setup>
import { ref } from "vue";

const count = ref(0);
function addNum(num){
  count.value += num;
}
function eventClik(event){
  alert('hello ' + count.value)
  console.log(event);
}
function eventClik2(num, event){
  count.value += num;
  console.log(event);
}
</script>

事件修饰符

html 复制代码

<template>
  <div @click="divClick">
    <!-- stop：阻止事件冒泡 -->
    <button @click.stop="btnClick">按钮</button>
  </div>
  <div>
    <form action="">
       <!-- prevent：阻止默认行为 -->
      <input type="submit" value="提交" @click.prevent="submitClick">
    </form>
     <!-- once：只触发一次 -->
    <button @click.once="btnClick">点击一次</button>
    <div>
      <!-- keyup.enter：键盘事件，enter回弹时触发 -->
      <input type="text" @keyup.enter="keyUp">
    </div>
  </div>
</template>

<script setup>
function divClick(){
  alert('父元素');
}
function btnClick(){
  alert('子元素')
}
function submitClick(){
  alert('提交成功');
}
function keyUp(){
  alert('回车确定');
}
</script>

表单输入绑定

html 复制代码

<template>
  <p>文本：{{ textMessage }}</p>
  <input type="text" v-model="textMessage">
  <div>
    <!-- 单个复选框，v-model绑定boolean，代表是否勾选 -->
    <input type="checkbox" v-model="checked">
    {{ checked }}
  </div>
  <div>
    <p>选取角色：{{ users }}</p>
    <!-- 多个复选框，需要设置value，v-model绑定value -->
    <input type="checkbox" id="tom" value="Tom" v-model="users">
    <!-- label可以用来配合input的id，和直接使用字符串没区别 -->
    <label for="tom">Tom</label>
    <input type="checkbox" id="rose" value="Rose" v-model="users">
    Rose
    <input type="checkbox" id="jerry" value="Jerry" v-model="users">
    Jerry
  </div>
  <div>
    <p>pick: {{ picked }}</p>
    <!-- 单选按钮，需要设置value否则返回on，v-model绑定value，可以省略name -->
    <input type="radio" id="one" value="One" v-model="picked">
    One
    <input type="radio" id="two" value="Two" v-model="picked">
    Two
  </div>
  <div>
    <p>选择：{{ english }}</p>
    <!-- 选择器单选，value可以省略 -->
    <select v-model="english">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>
  <div>
    <p>选择水果：{{ fruits }}</p>
    <!-- 选择器多选，value可以省略 -->
    <select v-model="fruits" multiple>
      <option>苹果</option>
      <option>香蕉</option>
      <option>橘子</option>
    </select>
  </div>
</template>

<script setup>
import { ref } from "vue";

const textMessage = ref('文本');
const checked = ref(false);
const picked = ref('');
const english = ref('A');
const users = ref([]);
const fruits = ref([]);
</script>

v-model修饰符

.lazy 懒加载，失去焦点再更新

.number 输出变为数字类型

.trim 去除两端空格

父子组件相互传值

父组件：

html 复制代码

<template>
  <!-- 使用组件，传递参数；此处:msg父传子；@parentValue子传父 -->
  <hello :msg="msg" @parentValue="getValue"></hello>
</template>

<script setup>
// 引入组件
import hello from './components/hello.vue';
const msg = 'app.vue';
// 子组件自定义事件对应方法
function getValue(value){
  alert(value);
}
</script>

子组件：

html 复制代码

<template>
    <div>hello</div>
    {{ msg }}
    <div>
        <button @click="sendMsgToParent">监听事件传递子组件参数到父组件</button>
    </div>
</template>
<script setup>
// 使用父组件传递的参数
defineProps(['msg']);
// 使用自定义组件实现子传父
const emit = defineEmits(['parentValue']);
function sendMsgToParent(){
    emit('parentValue', 'from son');
}
</script>

父子组件相互获取值

父组件：

html 复制代码

<template>
  <!-- ref可以用来获取该页面dom元素和子组件数据 -->
  <hello ref="helloComponent"></hello>
  <div ref="div"><span></span></div>
</template>

<script setup>
import hello from './components/hello2.vue';
import { onMounted, provide, readonly, ref } from 'vue';
// ref获取dom元素需要先定义
let helloComponent = ref(null);
const div = ref('');
onMounted(() => {
  console.log(helloComponent.value.msg);
  console.log(div.value);
})
// 子获取父数据需要用到provide/inject，setup语法糖只支持一次provide一个变量,readonly只读
provide('div', readonly(div));
</script>

子组件：

html 复制代码

<template>
    {{ msg }}
</template>
<script setup>
import { inject, onMounted, ref } from 'vue';

let msg = '子组件';
// 获取父组件provide的值
const div = inject('div');
// setup语法糖写法下组件是默认私有的，defineExpose就是setup语法糖写法中将特定属性、方法显式暴露的宏指令。
// 只有在子组件通过defineExpose显式暴露的属性、方法才能被父组件通过ref获取并使用。
// 需要注意defineExpose必须写在声明好的属性、方法之下，否则会报错！
defineExpose({
    msg
});
onMounted(() => {
    console.log(div.value);
})
</script>

插槽

父组件：

html 复制代码

<template>
  <hello>
    <!-- 不取名字直接使用 -->
    <span>123123</span>
    <!-- 取名字的插槽需要template包裹 -->
    <template v-slot:msg>
      <h4>来自父组件的信息</h4>
    </template>
    <template v-slot:btn>
      <button>按钮</button>
    </template>
  </hello>
</template>

<script setup>
import hello from './components/hello3.vue';
</script>

子组件：

html 复制代码

<template>
    <div>
        <!-- 插槽相当于占位符 -->
        <slot></slot>
        <slot name="msg"></slot>
        <slot name="btn"></slot>
    </div>
</template>

路由

安装vue路由：

bash 复制代码

npm install vue-router@4

视图组件包含：

views/Home.vue

views/Error.vue

views/About.vue:

html 复制代码

<template>
    <h1>About</h1>
</template>
<script setup>
import { onMounted } from "vue";
import {useRoute} from 'vue-router'

onMounted(() =>{
    alert(useRoute().params.id)
})
</script>

router/index.js:

javascript 复制代码

import {createRouter, createWebHashHistory} from 'vue-router'
// 导入路由组件
import Home from '../views/Home.vue' 
import About from '../views/About.vue'
// 404页面
import Error from '../views/Error.vue'
// 路由映射
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    // :id传参， 传参还可以使用props，接收端需要使用defineProps
    {path: '/about/:id', component: About},
    // 匹配所有路径
    {path: '/:path(.*)', component: Error}
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
// 导出，其他组件才能引入
export default router

main.js:

javascript 复制代码

import router from './router'

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// router必须放在app前面
app.use(router)
app.mount('#app')

App.vue:

html 复制代码

<template>
  <div>
    <h1>Hello App!</h1>
    <!-- 底层为a标签 -->
    <router-link to="/">Go to Home</router-link>
    <div></div>
    <router-link to="/about/123">Go to About</router-link>
    <!-- 视图渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

嵌套路由

views/Parent.vue:

html 复制代码

<template>
    <h1>Parent</h1>
    <router-link to="/parent/children1">Go to Children1</router-link>
    <div></div>
    <router-link to="/parent/children2">Go to Children2</router-link>
    <router-view></router-view>
</template>

index.js:

javascript 复制代码

import { createRouter, createWebHashHistory } from 'vue-router'
// 导入路由组件
import Parent from '../views/Parent.vue'
import Children1 from '../views/Children1.vue'
import Children2 from '../views/Children2.vue'
// 路由映射
const routes = [
    {
        path: '/parent',
        component: Parent,
        children: [
            {
                path: 'children1',
                component: Children1
            },
            {
                path: 'children2',
                component: Children2
            }
        ]
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
// 导出，其他组件才能引入
export default router

使用js实现路由

html 复制代码

<template>
    <h1>Page</h1>
    <button @click="pageClk">跳转按钮</button>
</template>
<script setup>   
import {useRouter} from 'vue-router'

// useRouter一定要放在setup方法内的顶层，否则作用域改变useRouter()执行返回的是undefined
const router = useRouter();
function pageClk(){
    // js方法实现路由跳转
    router.push('/parent');
}
</script>

命名视图

同时 (同级) 展示多个视图

views/Top.vue

views/Main.vue

views/Foot.vue

index.js:

javascript 复制代码

import { createRouter, createWebHashHistory } from 'vue-router'
// 导入路由组件
import top from '../views/Top.vue'
import main from '../views/Main.vue'
import foot from '../views/Foot.vue'
// 路由映射
const routes = [
    {
        path: '/name',
        components: {
            default: main,
            top,
            foot
        }
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
// 导出，其他组件才能引入
export default router

App.vue:

html 复制代码

<template>
  <div>
    <h1>Hello App!</h1>
    <router-link to="/name">Go to 命名视图</router-link>
    <router-view name="top"></router-view>
    <router-view></router-view>
    <router-view name="foot"></router-view>
  </div>
</template>

路由守卫

index.js:

常用来做路由间跳转的判断，规定用户或权限

javascript 复制代码

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

Proxy跨域

安装axios：

bash 复制代码

npm install axios

vite.config.js:

javascript 复制代码

import { defineConfig } from 'vite'
export default defineConfig({
  server: {
    proxy: {
      '/path': {
        target: 'https://i.maoyan.com', // 替换地址
        changeOrigin: true, // 开启跨域
        rewrite: path => path.replace(/^\/path/, '') // 重写路径
      }
    }
  }
})

使用方：

html 复制代码

<script setup>
import  axios from 'axios';
// 访问域名 https://i.maoyan.com/api/mmdb/movie/v3/list/hot.json?ct=%E6%88%90%E9%83%BD&ci=59&channelId=4
axios.get('/path/api/mmdb/movie/v3/list/hot.json?ct=%E6%88%90%E9%83%BD&ci=59&channelId=4').then((res) => {
  console.log(res);
})
</script>

Vue3状态管理

存储文件：

javascript 复制代码

import { reactive } from "vue";

export const store = reactive({
    count: 0,
    increment(){
        this.count++
    }
})

调用方：

html 复制代码

<template>
  <div>
    <span>{{ store.count }}</span>
  </div>
  <button @click="store.increment">按钮</button>
</template>

<script setup>
import { store } from './store/index';
</script>

Pinia状态管理

安装Pinia：

bash 复制代码

npm install pinia

main.js:

javascript 复制代码

import {createPinia} from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

store.js:

javascript 复制代码

import {defineStore} from 'pinia'
import {ref, computed} from 'vue'

// 按照规范返回值使用use***Store，defineStore第一个参数必须独一无二
export const useAgeStore = defineStore('ageStore', () => {
    const age = ref(0) // state
    function addAge(){ //actions
        age.value ++
    }
    const getAge = computed(() => { // getter
        return age.value + 5
    })
    return { age, addAge, getAge}
})

使用：

html 复制代码

<template>
  <div>
    {{ ageStore.age }}
    {{ ageStore.getAge }}
  </div>
  <button @click="ageStore.addAge">add</button>
</template>

<script setup>
import {useAgeStore} from './store/ageStore';

const ageStore = useAgeStore()
</script>

前端技术Html，Css，JavaScript，Vue3

Html

1.基本标签

2.文本格式化

3.链接

4.图片

5.无序列表

6.有序列表

7.表格

8.表单

Css

1.选择器

2.文本和字体

3.链接

4.隐藏

5.定位position

6.浮动

7.对齐

8.图像

JavaScript

1.输出

2.函数

3.常用事件

4.DOM

5.改变Html

6.DOM 元素 (节点)

7.字符串

8.弹框

Vue

模板语法

响应式基础

计算属性

侦听器

Class 与 Style 绑定

条件渲染

列表渲染

事件处理

事件修饰符

表单输入绑定

v-model修饰符

父子组件相互传值

父子组件相互获取值

插槽

路由

嵌套路由

使用js实现路由

命名视图

路由守卫

Proxy跨域

Vue3状态管理

Pinia状态管理