vue：
掌握一下代码即入门vue：
<!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">
发布状态: <input type="text" v-model="searchConditions.state">
<button v-on:click="search">搜索</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> <!-- <tr> <td>标题2</td> <td>分类2</td> <td>2000-01-01</td> <td>已发布</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> <tr> <td>标题3</td> <td>分类3</td> <td>2000-01-01</td> <td>已发布</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> --> </table> </div> <!-- 导入axios的js文件 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="module"> //导入vue模块 import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'; //创建vue应用实例 createApp({ data(){ return { articleList:[], searchConditions:{ category:'', state:'' } } }, methods:{ //声明方法 search:function(){ //发送请求,完成搜索,携带搜索条件 axios.get('http://localhost:8080/article/search?category='+this.searchConditions.category+'&state='+this.searchConditions.state) .then(result=>{ //成功回调 result.data //把得到的数据赋值给articleList this.articleList=result.data }).catch(err=>{ console.log(err); }); } }, //钩子函数mounted中,获取所有文章数据 mounted:function(){ //发送异步请求 axios axios.get('http://localhost:8080/article/getAll').then(result=>{ //成功回调 //console.log(result.data); this.articleList=result.data; }).catch(err=>{ //失败回调 console.log(err); }); } }).mount('#app');//控制html元素 </script> </body>
</html> 标签：category,vue,4.8,01,result,article,data From： https://www.cnblogs.com/fengjiale/p/18120920