学习Vue之前先要学习html+css+js的基础使用
Vue其实是js的框架
常用到的Vue指令包括vue-on,vue-for,vue-blind,vue-if&vue-show,v-modul
vue的基础模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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';
createApp({
data(){
return{
msg:'hello vue3'
}
}
}).mount("#app");
</script>
</body>
</html>常用到的Vue指令：
-
v-for
<!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> <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> <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> -
v-blind
<!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 href="https://www.itheima.com">黑马官网</a> --> <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.itheima.com' } } }).mount("#app")//控制html元素 </script> </body> </html> -
v-if&&v-show
<!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>9.9</span> <span>19.9</span> <span>29.9</span> --> <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>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:3 } } } }).mount("#app")//控制html元素 </script> </body> </html> -
v-on
<!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="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('123') }, love: function(){ alert('456') } } }).mount("#app");//控制html元素 </script> </body> </html> -
v-module
<!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-modul="searchConditions.category"/><span>{{searchConditions.category}}</span> 发布状态: <input type="text" v-modul="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 { //定义数据 methods:{ clear:function(){ //清空category里的数据 } }, 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: "已发布" }] } }, mounted: function() { console.log('vue挂载完毕，发送请求获取数据') } }).mount("#app")//控制html元素 </script> </body> </html>axios使用：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 引入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) }); /* // 使用别名的方式发送请求 axios.get('http//localhost:8080/article/getAll').then(result=>{ //成功的回调 //result代表服务器响应的所有数据，包含了响应头，响应体，result.data 代表的是接口响应的核心数据 console.log(result.data) }).catch(err=>{ //失败的回调 console.log(err) }); */ </script> </body> </html>
