前端框架Vue3
一、
1、vue介紹
vue是一款敏捷開發的前端框架。
2、vue基本使用?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="vue3.js"></script> </head> <body> <div id="app"><!--事件綁定--><!--<p @click="foo">消息：{{msg}}</p>--><p>消息：{{msg}}</p><p><span v-html="link"></span></p><p></p><input type="text" v-model="msg"></p><!--單向的不會隨一個改變而改變<a :href="link2">{{data2}}</a><input v-bind:value="link2"><input :value="data2">--><a :href="link2">{{data2}}</a><input v-model="link2"><input v-model="data2"> </div> <script>var vm=Vue.createApp({data(){return {msg:"this is yuan",x:100,link:"<a target='_blank' href='http://www.baidu.com'>百度</a>",link2:"http://www.baidu.com",data2:"百度",}},/* methods:{foo(){console.log(this.msg);this.msg="hello tian"}}*/}).mount("#app"); </script> </body> </html>3、class
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="vue3.js"></script><style>.c1{color:red;}.c2{background: lightpink;}</style> </head> <body> <div id="vm1"><!--單獨用法<p :class="{c1:true,c2:false}">this is a test</p>--><p :class="cssObj">this is a test</p> </div> <script>var vm1=Vue.createApp({data(){return{cssObj:{c1:true,c2:false}}}}).mount("#vm1")</script> </body> </html>4 、v-if\v-for\computed屬性
模版內的表達式是為了簡單計算，假如多次利用計算就會使框架變得特別的沉重。用于響應式設計的復雜邏輯需要使用computed屬性。
method的方法沒有緩存，每次調用都會再重新執行一遍；computed屬性方法有緩存，只有在data值更改的時候才會重新計算，否則返回緩存值，速度相對來說computed快一些。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="vue3.js"></script> </head> <body> <div id="vm"><table><tr><th>序號</th><th>書名</th><th>價格</th></tr><!-- 以下功能借用了computed屬性，推薦這樣用--><tr v-for="(book,i) in foo" ><td>{{i}}</td><td>{{book["name"]}}</td><td>{{book["price"]}}</td></tr> <!-- 由于if優先級比for高，因此放在一個標簽里會先執行if.以下雖然能夠實現功能，但是由于新建了一些tr空標簽因此不推薦使用。--><!-- <tr v-for="(book,i) in books" ><template v-if="book.price>1000"><td>{{i}}</td><td>{{book["name"]}}</td><td>{{book["price"]}}</td></template></tr>--></table> </div> <script>var vm1=Vue.createApp({data(){return{books:[{name:"紅樓夢",price:1000},{name:"三國演義",price:1900},{name:"西游記",price:899},{name:"水滸傳",price:600}],}},computed:{foo(){return this.books.filter(function(item){if(item.price>1000){return item;}})}}}).mount("#vm") </script> </body> </html>5、watch偵聽
監聽數值變化，傳參會自動傳兩個值，分別是變化前和變化后的參數，num是屬性的值
<p>{{num}}</p>watch: {num: function (newval, oldval) {//num發生變化的時候，要執行的代碼console.log(`num已經從${oldval}變成${newval}`);}} <input type="password" :class="tips" v-model="password">watch: {password() {if (this.password.length > 6 && this.password.length < 16) {this.tips = "is_pass"} else {this.tips = "is_fail";}}}6、生命周期
beforeCreate created beforeMount mounted beforeUpdate updated
二、ajax請求
異步操作，頁面只是局部更新，并不重新加載。
<button @click="get_weather">獲取天氣</button> methods: {get_weather() {// 發送http請求獲取天氣axios.get("http://wthrcdn.etouch.cn/weather_mini", {params: {city: this.city,}}).then(response => {console.log(response.data.data.forecast);this.weather_list = response.data.data.forecast;}).catch(error => {console.log(error);})},showFengLi(content) {return content.replaceAll("<![CDATA[", "").replaceAll("]]>", "");},},created(){this.get_weather()}三、VUE腳手架
vue/cli一個后端的程序，安裝前先安裝node.js否則無法安裝成功。node.js建議安裝10以上版本，否則可能會無法安裝vue/cli4以上版本，目前使用vue3.以下是安裝vue/cli最新版本的方式
npm install -g @vue/cli
安裝完檢測方式
vue --version
如果想要升級全局vue/cli包
npm update -g @vue/cli
2、創建項目
vue create 項目名稱
3、導入組件ajax axios
在工程下的terminal執行如下命令
npm install axios --save-dev4、子組件傳遞數據給父組件
自定義事件是父組件事件
$emit(自定義事件，參數1，參數2)??
watch: {city() {alert(this.city)this.$emit("getCity", this.city);}},?父類：
<Nav @getCity="getCity"></Nav> methods: {getCity: function (city) {console.log(city)this.city = city;},}5、父組件數據傳遞給子組件
父組件：
<Forecast :choose_city="city"></Forecast>子組件：?
props: { // 接收來自父組件的數據choose_city: {default:"北京",type: String,}},6、項目打包
npm run build
在打包之后項目中出現?dist?目錄，dist?目錄就是 Vue腳手架項目的生產目錄（直接部署目錄）。
7、ant-design前端框架實現案例
<template><a-layout style="min-height: 100vh"><a-layout-sider v-model:collapsed="collapsed" collapsible><div class="logo" /><a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" v-for="menu in menu_list"><a-menu-item v-if="menu.children.length===0" v-model:key="menu.id"><router-link :to="menu.menu_url"><pie-chart-outlined /><span>{{menu.title}}</span></router-link></a-menu-item><a-sub-menu key="menu.id" v-else><template #title v-if="menu.icon=='user-outlined'"><span><user-outlined /><span>{{ menu.title }}</span></span></template><template #title v-else-if="menu.icon=='team-outlined'"><span><team-outlined /><span>{{ menu.title }}</span></span></template><template #title v-else><span><file-outlined /><span>{{ menu.title }}</span></span></template><a-menu-item v-for="echild in menu.children" :key="echild.id"><router-link :to="echild.menu_url">{{echild.title}}</router-link></a-menu-item></a-sub-menu></a-menu></a-layout-sider><a-layout><a-layout-header style="background: #fff; padding: 0" /><a-layout-content style="margin: 0 16px"><router-view/></a-layout-content><a-layout-footer style="text-align: center">Ant Design ?2018 Created by Ant UED</a-layout-footer></a-layout></a-layout> </template> <script> import 'ant-design-vue/dist/antd.css'; import { PieChartOutlined, DesktopOutlined, UserOutlined, TeamOutlined, FileOutlined } from '@ant-design/icons-vue'; import { defineComponent, ref } from 'vue'; export default defineComponent({components: {PieChartOutlined,DesktopOutlined,UserOutlined,TeamOutlined,FileOutlined,},data() {return {collapsed: ref(false),selectedKeys: ref(['1']),menu_list: [{id: 1, icon: 'mail', title: '展示中心', tube: '', 'menu_url': '/show', children: []},{id: 2, icon: 'mail', title: '資產管理', 'menu_url': '/home', children: []},{"id": 'sub1', icon: 'user-outlined', title: '入庫管理', tube: '', children: [{id: 4, icon: 'mail', title: '執行任務', 'menu_url': '/show'},{id: 5, icon: 'mail', title: '命令管理', 'menu_url': '/home'},]},{id: 'sub2', icon: 'team-outlined', title: '出庫管理', tube: '', children: [{id: 6, title: '出庫主頁', menu_url: '/home'},{id: 7, title: '發布申請', menu_url: '/show'}]},{id: 'sub3', icon: 'file-outlined', title: '代碼發布', tube: '', children: [{id: 8, title: '應用管理', menu_url: '/home'},{id: 9, title: '發布申請', menu_url: '/show'}]}]}},}); </script> <style> #components-layout-demo-side .logo {height: 32px;margin: 16px;background: rgba(255, 255, 255, 0.3); }.site-layout .site-layout-background {background: #fff; } [data-theme='dark'] .site-layout .site-layout-background {background: #141414; } </style>作為聯系參考，也可作為實現指南
總結
- 上一篇： NLP自然语言处理—文本分类入门
- 下一篇： Vue前端框架选型论述