1、什么是Vue?
Vue是一款用于构建用户界面的渐进式的JavaScript框架
2
2、局部使用Vue
Vue快速入门
1、准备:
- 准备html页面,并引入Vue块
- 创建Vue程序的应用实例
- 准备元素(div),被Vue控制
2、构建用户界面
- 准备数据
- 通过插值表达式渲染页面
示例
<div id="app">
<h1>{{msg}}</h1> //插值表达式
</div>
<!--引入vue模块-->
<script type="module">
import {createApp} from 'http://unpkg.com/vue@3/dist/vue.esm-browser.js';
/*创建cue的应用实例*/
createApp({
data(){
return{
//定义数据
msg: 'hello vue3'
}
}
}).mount("#app");
</script>
常用指令
指令 | 作用 |
v-for | 列表渲染,遍历容器的元素或者对象的属性 |
v-bind | 为HTML标签绑定属性值,如设置 href , css样式等 |
v-if/v-else-if/v-else | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-show | 根据条件展示某元素,区别在于切换的是display属性的值 |
v-model | 在表单元素上创建双向数据绑定 |
v-on | 为HTML标签绑定事件 |
v-for
- 作用:列表渲染,遍历容器的元素或者对象的属性
- 语法:v-for="(item,index) in items"
- 参数说明
- items为遍历的数组
- item为遍历的元素
- index为索引,从0开始
示例:
<div id="app">
<table border="1 solid" colspa="0" cellspacing="0">
<!--那个元素要出现多次,v-for指令就添加到哪个元素-->
<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'
//创建应用实例
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")//控制页面元素
结果:
v-bind
- 作用:为HTML标签绑定属性值,如设置 href , css样式等
- 语法:v-bind:属性名="属性值"
- 简化::属性名="属性值"
v-bind绑定的数据,必须在data中定义
<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: 'http://baidu.com'
}
}
}).mount("#app")//控制html元素
</script>
v-if&v-show
- 作用:控制元素的显示与隐藏
- v-if
语法:v-if="表达式",表达式为true,显示;
原理:基于条件判断,来控制创建或移除元素节点
场景:不频繁切换的场景
- v-show
语法:v-show="表达式",表达式为true,显示;
原理:基于css样式display来控制显示和隐藏
场景:频繁切换显示隐藏的场景
示例:
<div id="app">
<h1>用户等级为{{customer.level}}</h1>
手链价格为: <span v-if="customer.level>=0&&customer.level<=1">9.9</span>
<span v-else-if="customer.level>=2&&customer.level<=4">19.9</span>
<span v-else>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:2
}
}
}
}).mount("#app")//控制html元素
</script>
结果根据level不同进行展示:
下方的结果使用v-show,注意到使用v-if直接无参数,而使用v-show利用display来隐藏。
v-on
- 作用:为HTML标签绑定事件
- 语法:
v-on:事件名="函数名"
简写为 @事件名="函数名"
示例:
<div id="app">
<button v-on:click="money">点我有惊喜</button>
<button v-on:click="love">再点更惊喜</button>
</div>
<script type="module">
//导入vue模块
import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
//定义数据
}
},
methods:{
money:function(){
alert('命里有官')
},
love:function(){
alert('书不用翻')
}
}
}).mount("#app");//控制html元素
v-model
作用:在表单元素上创建双向数据绑定,方便获取或设置表单数据
语法:v-model="变量名"
3、vue生命周期
- 生命周期:指一个对象从创建到销毁的整个过程。
- 生命周期的八个阶段:每个阶段会自动执行一个生命周期方法(钩子), 让开发者有机会在特定的阶段执行自己的代码
状态 | 阶段周期 |
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 载入前 |
mounted | 挂载完成 |
beforeUpdate | 数据更新前 |
updated | 数据更新后 |
beforeUnmount | 组件销毁前 |
unmounted | 组件销毁后 |