学习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>