黑马最新版Springboot3+Vue项目跟学笔记——Vue3的快速入门

一、vue的基本语法

---

1.vue的快速入门：

Document

{{msg}}

---

2.v-for的使用：

---

v-for案例

Document

    

        

            
文章标题
            
分类
            
发表时间
            
状态
            
操作
        
        

            
{{item.title}}
            
{{item.category}}
            
{{item.time}}
            
{{item.state}}
            

                编辑
                删除
            
        
    

---

3.v-bind:

---

---

4：v-if&v-show：

---

---

5.v-on：

---

6.v-model：

案例：

Document

    文章分类：{{searchConditions.category}}
    发布状态：{{searchConditions.state}}

​ 搜索
​ 重置
​

​

    

        

            
文章标题
            
分类
            
发表时间
            
状态
            
操作
        
        

            
{{item.title}}
            
{{item.category}}
            
{{item.time}}
            
{{item.state}}
            

                编辑
                删除
            
        
    

​

---

二、vue的生命周期

---

三、Ajax

​ 官网：http://www/axios-http.cn/

1.axios的使用步骤

2.axios别名请求方式

3.小结：

四、vue案例大总结：

---

Document

    文章分类：{{searchConditions.category}}
    发布状态：{{searchConditions.state}}

​ 搜索
​ 重置
​

​

文章标题	分类	发表时间	状态	操作
{{item.title}}	{{item.category}}	{{item.time}}	{{item.state}}	编辑 删除

​
​

​ //创建应用实例
​ createApp({
​ data() {
​ return {
​ searchConditions:{
​ category:‘’,
​ state:‘’
​ },
​ articleList:[]
​ }
​ },
​ methods: {
​ clear:function(){
​ this.searchConditions.category=‘’,
​ this.searchConditions.state=‘’
​ },
​ search:function(){
​ //发送请求，完成搜索
​ axios.get(‘http://localhost:8080/article/search?category=’+this.searchConditions.category+‘&state=’+this.searchConditions.state)
​ .then(result=>{
​ //成功回调
​ //console.log(result.data)
​ this.articleList = result.data
​ }).catch(err=>{
​ //失败回调
​ console.log(err)
​ });
​ }
​ },
​ mounted:function() {
​ axios.get(‘http://localhost:8080/article/getAll’).then(result=>{
​ //成功回调
​ //console.log(result.data)
​ this.articleList = result.data
​ }).catch(err=>{
​ //失败回调
​ console.log(err)
​ });
​ }
​ }).mount(“#app”)//控制页面元素
​

).then(result=>{ ​ //成功回调 ​ //console.log(result.data) ​ this.articleList = result.data ​ }).catch(err=>{ ​ //失败回调 ​ console.log(err) ​ }); ​ } ​ }).mount("#app")//控制页面元素 ​