1.快速入门
vue3使用cdn方式引入的使用方式
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<div id="app">
<h1>{{msg}}</h1>
</div>
<!-- 引入vue模块 -->
<script type="module">
/* 创建vue的应用实例 */
Vue.createApp({
data(){
return {
//定义数据
msg: 'hello vue3'
}
}
}).mount("#app");
</script>
2.vue3指令
v-for
作用:列表渲染,遍历容器的元素或者对象的属性
语法: v-for = “(item,index) in items”
参数说明:
- items 为遍历的数组
- item 为遍历出来的元素
- index 为索引/下标,从0开始 ;可以省略,省略index语法: v-for = “item in items”
<div id="app">
<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>
Vue.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>
v-bind
<a v-bind:href="url">百度官网</a>
<!--简写形式-->
<a :href="url">百度官网</a>
<script>
Vue.createApp({
data() {
return {
url: 'https://www.baidu.com'
}
}
}).mount("#app");
</script>
v-if和v-show
v-if主要是用来基于条件判断,来控制创建或移除元素节点(条件渲染),他的特点是要么显示,要么不显示,不频繁切换的场景
v-show主要是基于CSS样式display来控制显示与隐藏,如果需要频繁切换显示隐藏的场景时候使用
<div id="#app">
手链价格为: <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>
<br/>
手链价格为: <span v-show="customer.level>=0 && customer.level<=1">9.9</span>
<span v-show="customer.level>=2 && customer.level<=4">19.9</span>
<span v-show="customer.level>=5">29.9</span>
</div>
<script type="module">
//创建vue应用实例
Vue.createApp({
data() {
return {
customer:{
name:'张三',
level:2
}
}
}
}).mount("#app")//控制html元素
</script>
v-on点击事件
点我有惊喜
v-model
作用:在表单元素上使用,双向数据绑定。可以方便的 获取 或 设置 表单项数
文章分类: <input type="text" v-model="searchConditions.category"/> <span>{{searchConditions.category}}</span>
发布状态: <input type="text" v-model="searchConditions.state"/> <span>{{searchConditions.state}}</span>
<script type="module">
/* 创建vue的应用实例 */
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='';
}
},
mounted:function(){
console.log('Vue挂载完毕,发送请求获取数据')
}
}).mount("#app");
</script>
3.Vue生命周期
created和mounted的区别
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成识图。
mounted:在模板渲染成html后调用,通常初始化页面完成后,再对html的dom节点进行一些需要的操作。
Axios
介绍:Axios 对原生的Ajax进行了封装,简化书写,快速开发。
官网:https://www.axios-http.cn
<!-- 引入axios的js文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/* 发送请求 */
axios({
method:'get',
url:'http://localhost:8080/article/getAll'
}).then(result=>{
//成功的回调
//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
console.log(result.data);
}).catch(err=>{
//失败的回调
console.log(err);
});
let article = {
title: '明天会更好',
category: '生活',
time: '2000-01-01',
state: '草稿'
}
/* axios({
method:'post',
url:'http://localhost:8080/article/add',
data:article
}).then(result=>{
//成功的回调
//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
console.log(result.data);
}).catch(err=>{
//失败的回调
console.log(err);
});
//别名的方式发送请求
/* axios.get('http://localhost:8080/article/getAll').then(result => {
//成功的回调
//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
console.log(result.data);
}).catch(err => {
//失败的回调
console.log(err);
}); */
axios.post('http://localhost:8080/article/add', article).then(result => {
//成功的回调
//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
console.log(result.data);
}).catch(err => {
//失败的回调
console.log(err);
});
</script>
4.Vue工程化
Vue项目-创建
由于 npm 安装速度慢,此处使用了淘宝的镜像及其命令 cnpm
# 查看版本
$ npm -v
#升级 npm
cnpm install npm -g
# 升级或安装 cnpm
npm install cnpm -g
创建一个工程化的Vue项目,执行命令:npm init vue@latest
- Project name:------------------》项目名称,默认值:
vue-project
,可输入想要的项目名称。 - Add TypeScript? ----------------》是否加入
TypeScript
组件?默认值:No。 - Add JSX Support? ---------------》是否加入JSX支持?默认值:No。
- Add Vue Router …--------------》是否为单页应用程序开发添加
Vue Router
路由管理组件?默认值:No。 - Add Pinia …-------------------》是否添加Pinia组件来进行状态管理?默认值:No。
- Add Vitest …------------------》是否添加Vitest来进行单元测试?默认值:No。
- Add an End-to-End …-----------》是否添加端到端测试?默认值No。
- Add ESLint for code quality? —》是否添加ESLint来进行代码质量检查?默认值:No
执行上述指令,将会安装并执行 create-vue
,它是 Vue 官方的项目脚手架工具
Vue项目-安装依赖
进入项目目录,执行命令安装当前项目的依赖:npm install
执行完成之后然后再执行npm run dev
执行完成之后访问 http://localhost:5173/可以看到如下页面,说明项目配置成功