<div id="app"><!-- :value --><h3>value="dengruicode.com"</h3><input type="text" value="dengruicode.com"><h3>v-bind:value="web.url"</h3><input type="text" v-bind:value="web.url"><h3>简写 :value="web.url"</h3><input type="text" :value="web.url"><!-- :src --><h3>src="windows.jpg"</h3><img src="windows.jpg"><h3>:src="web.img"</h3><img :src="web.img"><!-- :class --><h3>class="textColor"</h3><b class="textColor">邓瑞编程</b><h3>:class="{textColor:web.fontStatus}"</h3><b :class="{textColor:web.fontStatus}">dengruicode.com</b>
</div>js
<script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({url: "www.dengruicode.com",img: "windows.jpg",fontStatus: true})return {web}}}).mount("#app")
</script><hr>
使用Axios实现文章搜索案例 post get 请求实例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="js/axios.min.js"></script>
</head><body><div id="app"><select v-model="data.type"><option value="0">请选择</option><option value="1">ID</option><option value="2">标题</option></select><input type="text" v-model="data.content"><button @click="search">搜索</button><ul><li v-for="(value, index) in data.list">{{ value }}</li></ul></div><script type="module">import { createApp, reactive } from './js/vue.esm-browser.js'createApp({setup() {const data = reactive({type: "0", //搜索类型content: "", //搜索内容list: [],})//搜索const search = () => {//console.log(data.content)data.list = [] //清空if (data.type == "1") {let id = data.content //参数//get请求axios.get(`http://127.0.0.1/article/get/id/${id}`).then(response => {console.log("get.data:", response.data)if(response.data.status == "success"){if(response.data.data){data.list.push(response.data.data) //push 向数组末尾添加一个或多个元素}}}).catch(error => {console.log("get.error:", error)})} else if (data.type == "2") {//参数let param = { title: data.content}//post请求 [axios post的默认请求头是 application/json]axios.post('http://127.0.0.1/article/postJson/search', param).then(response => {console.log("postJson.data:", response.data)if(response.data.status == "success"){for(let i=0; i<response.data.data.length; i++){data.list.push(response.data.data[i]) //push 向数组末尾添加一个或多个元素}}}).catch(error => {console.log("postJson.error:", error)})}}return {data,search}}}).mount("#app")</script>
</body></html>
