<h1>最大的标题h1>
<h2> . . . h2>
<h3> . . . h3>
<h4> . . . h4>
<h5> . . . h5>
<h6>最小的标题h6>
<p>这是一个段落。p>
<br> (换行)
<hr> (水平线)
<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> (上标文本)
普通的链接:<a href="http://www.example.com/">链接文本a>
图像链接: <a href="http://www.example.com/"><img decoding="async" src="URL" alt="替换文本">a>
邮件链接: <a href="mailto:webmaster@example.com">发送e-maila>
书签:
<a id="tips">提示部分a>
<a href="#tips">跳到提示部分a>
<img decoding="async" loading="lazy" src="URL" alt="替换文本" height="42" width="42">
<ul>
<li>项目li>
<li>项目li>
ul>
<ol>
<li>第一项li>
<li>第二项li>
ol>
<table border="1">
<tr>
<th>表格标题th>
<th>表格标题th>
tr>
<tr>
<td>表格数据td>
<td>表格数据td>
tr>
table>
<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>
/*id选择器*/
#p {
text-align:center;
color:black;
font-family:arial;
}
/*class选择器*/
.center {text-align:center;}
h1 {text-align:center;}
p.date {text-align:right;}
h1 {font-size:40px;}
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
h1.hidden {display:none;}
p.pos_fixed
{
position:fixed; /* 元素的位置相对于浏览器窗口是固定位置 */
position:relative; /* 相对定位元素的定位是相对其正常位置 */
position:absolute; /*绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于*/
}
/*使元素向左或向右移动,其周围的元素也会重新排列*/
img
{
float:right;
}
margin: auto;
text-align: center;
/*依据实际情况还可以使用position: absolute,margin,padding,float 实现*/
img
{
opacity:0.4; /* 透明度 */
}
img:hover /* 悬停 */
{
opacity:1.0;
}
window.alert("") //弹出警告框。
document.write("") //方法将内容写到 HTML 文档中。
document.getElementById("demo").innerHTML = "段落已修改。" //写入到 HTML 元素。
console.log("") //写入到浏览器的控制台
function myFunction(a,b){
// var定义的变量可以修改,如果不初始化会输出undefined,不会报错
var obj = {name:"Fiat", model:500, color:"white"};
//const定义的变量不可以修改,而且必须初始化。
const s = "s";
return a*b;
}
onchange //HTML 元素改变
onclick //用户点击 HTML 元素
onmouseover //鼠标指针移动到指定的元素上时发生
onmouseout //用户从一个 HTML 元素上移开鼠标时发生
onkeydown //用户按下键盘按键
onload //浏览器已完成页面的加载
var x=document.getElementById("intro");
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro");
document.getElementById("p1").innerHTML="新文本!"; // 改变html
document.getElementById(id).attribute="新属性值"; // 改变属性
document.getElementById(id).style.property="新样式" // 改变CSS
尾部创建新的 HTML 元素 (节点) - appendChild()
头部创建新的 HTML 元素 (节点) - insertBefore()
移除HTML 元素 - removeChild()
替换 HTML 元素 - replaceChild()
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
str.match("world");
str.replace("Microsoft","Runoob");
alert("你好,我是一个警告框!"); // 警告框
var r=confirm("按下按钮");
if (r==true){}else{} // 确认框
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){} // 提示框
创建Vue工程
文本插值,原始 HTML,Attribute 绑定,动态参数
<template>
<p>{{ msg + '!' }}p>
<div v-html="vhtml">div>
<div :id="bindId">div>
<button :disabled="isButtonDisabled">Buttonbutton>
<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 = 'This should be red.';
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>
<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>
<template>
<p>{{ msg }}p>
<p>{{ reverseMsg }}p>
template>
<script setup>
// 计算属性,相比于method有缓存
const msg = 'hello world';
const reverseMsg = computed(()=>{
return msg.split('').reverse().join('');
})
script>
<template>
<p>{{ msg }}p>
<input type="text" v-model="msg">
<p>{{ obj.age }}p>
<button @click="obj.age = 11">改变msgbutton>
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>
<template>
<p :class="{font : true}">hellop>
<p :style="{color : 'red', fontSize : '50px'}">hello!!!p>
template>
<script setup>
script>
<style>
.font{
font-size: large;
color: blue;
}
style>
<template>
<p v-if="type == 'A'">Ap>
<p v-else-if="type == 'B'">Bp>
<p v-else >Cp>
<input type="text" v-model="type">
<template v-if="true">
<p>111p>
<p>111p>
<p>111p>
template>
<p v-show="true">hello!!!p>
template>
<script setup>
import { ref } from "vue";
const type = ref('A')
script>
<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>
<template>
{{ count }}
<button @click="count++">add 1button>
<button @click="addNum(10)">add 10button>
<button @click="eventClik">eventbutton>
<button @click="eventClik2(5, $event)">event2button>
<button @click="addNum(1), addNum(2)">多事件处理+3button>
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>
<template>
<div @click="divClick">
<button @click.stop="btnClick">按钮button>
div>
<div>
<form action="">
<input type="submit" value="提交" @click.prevent="submitClick">
form>
<button @click.once="btnClick">点击一次button>
<div>
<input type="text" @keyup.enter="keyUp">
div>
div>
template>
<script setup>
function divClick(){
alert('父元素');
}
function btnClick(){
alert('子元素')
}
function submitClick(){
alert('提交成功');
}
function keyUp(){
alert('回车确定');
}
script>
<template>
<p>文本:{{ textMessage }}p>
<input type="text" v-model="textMessage">
<div>
<input type="checkbox" v-model="checked">
{{ checked }}
div>
<div>
<p>选取角色:{{ users }}p>
<input type="checkbox" id="tom" value="Tom" v-model="users">
<label for="tom">Tomlabel>
<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>
<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>
<select v-model="english">
<option>Aoption>
<option>Boption>
<option>Coption>
select>
div>
<div>
<p>选择水果:{{ fruits }}p>
<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>
.lazy 懒加载,失去焦点再更新
.number 输出变为数字类型
.trim 去除两端空格
父组件:
<template>
<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>
子组件:
<template>
<div>hellodiv>
{{ msg }}
<div>
<button @click="sendMsgToParent">监听事件传递子组件参数到父组件button>
div>
template>
<script setup>
// 使用父组件传递的参数
defineProps(['msg']);
// 使用自定义组件实现子传父
const emit = defineEmits(['parentValue']);
function sendMsgToParent(){
emit('parentValue', 'from son');
}
script>
父组件:
<template>
<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>
子组件:
<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>
父组件:
<template>
<hello>
<span>123123span>
<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>
子组件:
<template>
<div>
<slot>slot>
<slot name="msg">slot>
<slot name="btn">slot>
div>
template>
安装vue路由:
npm install vue-router@4
视图组件包含:
views/Home.vue
views/Error.vue
views/About.vue:
<template>
<h1>Abouth1>
template>
<script setup>
import { onMounted } from "vue";
import {useRoute} from 'vue-router'
onMounted(() =>{
alert(useRoute().params.id)
})
script>
router/index.js:
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:
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:
<template>
<div>
<h1>Hello App!h1>
<router-link to="/">Go to Homerouter-link>
<div>div>
<router-link to="/about/123">Go to Aboutrouter-link>
<router-view>router-view>
div>
template>
views/Parent.vue:
<template>
<h1>Parenth1>
<router-link to="/parent/children1">Go to Children1router-link>
<div>div>
<router-link to="/parent/children2">Go to Children2router-link>
<router-view>router-view>
template>
index.js:
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
<template>
<h1>Pageh1>
<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:
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:
<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:
常用来做路由间跳转的判断,规定用户或权限
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})
安装axios:
npm install axios
vite.config.js:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
proxy: {
'/path': {
target: 'https://i.maoyan.com', // 替换地址
changeOrigin: true, // 开启跨域
rewrite: path => path.replace(/^\/path/, '') // 重写路径
}
}
}
})
使用方:
<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>
存储文件:
import { reactive } from "vue";
export const store = reactive({
count: 0,
increment(){
this.count++
}
})
调用方:
<template>
<div>
<span>{{ store.count }}span>
div>
<button @click="store.increment">按钮button>
template>
<script setup>
import { store } from './store/index';
script>
安装Pinia:
npm install pinia
main.js:
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:
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}
})
使用:
<template>
<div>
{{ ageStore.age }}
{{ ageStore.getAge }}
div>
<button @click="ageStore.addAge">addbutton>
template>
<script setup>
import {useAgeStore} from './store/ageStore';
const ageStore = useAgeStore()
script>