目录
前置知识JavaScript-导入导出
正常情况在html导入js文件是全部导入，这样会导致性能上的损失 。
JS提供的导入导出机制,可以实现按需导入
入门操作
变量渲染页面
使用vue将变量内容渲染到页面
html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<!-- 插值表达式 -->
<h1>{{msg}}</h1>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' //导入vue
//创建vue实例
createApp({
data(){
return { msg:"hello vue3"}
}
}).mount("#app") //链式方法 传入div的id值
</script>
</body>
</html>
局部使用vue的实现步骤
准备工作
- 引入Vue模块
- 创建Vue的应用实例
- 定义元素(div)，交给Vue控制
构建用户界面
- 准备数据
- 用插值表达式渲染
vue指令
指令：HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。
v-for
作用：列表渲染，遍历容器的元素或者对象的属性
语法： v-for = "(item,index) in items"
参数说明：
- items 为遍历的数组
- item 为遍历出来的元素
- index 为索引/下标，从0开始 ；可以省略，省略index语法： v-for = "item in items"
案例实现
html
<!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">
<table border="1 solid" colspa="0" cellspacing="0">
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<!-- 哪个元素要出现多次,v-for指令就添加到哪个元素上 -->
<tr v-for = "(i,index) in articleList">
<td>{{i.title}}</td>
<td>{{i.category}}</td>
<td>{{i.time}}</td>
<td>{{i.state}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</table>
</div>
<script type="module">
//导入vue模块
import { createApp } from
'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建应用实例
createApp({
data() {
return {
//定义数据
articleList: [
{
title: "医疗反腐绝非砍医护收入",
category: "时事",
time: "2023-09-5",
state: "已发布"
},
{
title: "中国男篮缘何一败涂地？",
category: "篮球",
time: "2023-09-5",
state: "草稿"
},
{
title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
category: "旅游",
time: "2023-09-5",
state: "已发布"
}
]
}
}
}).mount("#app")//控制页面元素
</script>
</body>
</html>
遍历的数组，必须在data中定义； 要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。
v-bind
- 作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
- 语法：v-bind:属性名="属性值"
- 简化语法：:属性名="属性值"
用于将变量绑定到标签属性中
html
<!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">
<a v-bind:href="url">百度</a>
</div>
<script type="module">
//引入vue模块
import { createApp} from
'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
//定义数据
url:"https://www.baidu.com"
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>
v-bind所绑定的数据，必须在data中定义 。
v-if
v-if
- 作用：用来控制元素的显示与隐藏
- 语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
- 其它：可以配合 v-else-if / v-else 进行链式调用条件判断
- 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
- 场景：要么显示，要么不显示，不频繁切换的场景
html
<!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">
手链价格为: <span v-if="customer.level >=0 && customer.level<= 9.9">9.9</span>
<span v-else-if="customer.level >9.9 && customer.level<= 19.9">19.9</span>
<span v-else="customer.level >19.9">29.9</span>
</div>
<script type="module">
//导入vue模块
import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
//定义消费数据
customer:{
name:"小王",
level:10 }
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>
v-show
- 作用：用来控制元素的显示与隐藏
- 语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
- 原理：基于CSS样式display来控制显示与隐藏
- 场景：频繁切换显示隐藏的场景
v-if 与 v-show的区别
- v-if 是根据条件判断是创建还是移除元素节点（条件渲染）。
- v-show 是根据css样式display来控制元素的显示与隐藏 。
v-if 与 v-show的适用场景
- v-if 适用于显示与隐藏切换不频繁的场景 。
- v-show 适用于显示与隐藏切换频繁的场景 。
v-on
- 作用：为html标签绑定事件
- 语法： v-on:事件名="函数名"
- 简写为 @事件名="函数名"
- 函数需要定义在methods选项内部
createApp({ data(){需要用到的数据}, methods:{需要用到的方法} })
html
<!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">
<button v-on:click="ok1">点我</button>
<button @click="ok2">再点我</button>
</div>
<script type="module">
//导入vue模块
import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
//定义数据
}
},
methods:{
ok1:function(){
alert("你很帅")
},
ok2:function(){
alert("我承认，你真的很帅")
}
}
}).mount("#app");//控制html元素
</script>
</body>
</html>
v-model
- 作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据
- 语法：v-model="变量名"
- v-model 中绑定的变量，必须在data中定义。
给表单元素使用实现双向数据绑定,数据发生变化视图也会跟着变化
html
<!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">
文章分类: <input type="text" v-model="searchconditions.category"/> <span>{{searchconditions.category}}</span>
发布状态: <input type="text" v-model="searchconditions.state"/> <span>{{searchconditions.state}}</span>
<button>搜索</button>
<button v-on:click="clear">重置</button>
<br />
<br />
<table border="1 solid" colspa="0" cellspacing="0">
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr v-for="(article,index) in articleList">
<td>{{article.title}}</td>
<td>{{article.category}}</td>
<td>{{article.time}}</td>
<td>{{article.state}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</table>
</div>
<script type="module">
//导入vue模块
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
//定义数据
searchconditions:{
category:'',
state:''
},
articleList: [{
title: "医疗反腐绝非砍医护收入",
category: "时事",
time: "2023-09-5",
state: "已发布"
},
{
title: "中国男篮缘何一败涂地？",
category: "篮球",
time: "2023-09-5",
state: "草稿"
},
{
title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
category: "旅游",
time: "2023-09-5",
state: "已发布"
}]
}
},
methods:{
clear:function(){
//清空category以及state的数据
//在methods对应的方法里面,使用this就代表的是vue实例
//可以使用this获取到vue实例中准备的数据
this.searchconditions.category = ''
this.searchconditions.state = ''
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>
生命周期
- 生命周期：指一个对象从创建到销毁的整个过程。
- 生命周期的八个阶段：每个阶段会自动执行一个生命周期方法(钩子), 让开发者有机会在特定的阶段执行自己的代码
- 在页面加载完毕时，发起异步请求，加载数据，渲染页面。
