Vue基礎開發筆記
阿新 • • 發佈:2018-11-29
以下例項程式碼地址:https://github.com/NewBLife/VueDev
1,Vue元件匯入
新建元件:Header.vue
<template> <div> <p class="title">{{title}}</p> </div> </template> <script> export default { data:function(){ return{ title:'This is Header component' } } } </script> <style> .title{ font-size: 20px; font-weight: bold; } </style>
匯入元件:
<template> <div> <header-component></header-component> <p class="blue">This is App component.</p> </div> </template> <script> import Header from './Header.vue'; export default { components:{ 'header-component':Header } } </script> <style> .blue{ color: blue; } </style>
2,Index.html檔案複製
npm i html-webpack-plugin --save // webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }) ],
3,Jquery匯入
npm i jquery --save-dev //webpack.config.js const webpack = require('webpack'); module.exports = { mode: 'development', plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), new VueLoaderPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }) ],
使用:
<template> <div> <my-header></my-header> <p class="red" v-if="msg.length>0"> {{msg}} </p> <p v-else> no text </p> <input type="text" v-model="msg"> <button @click="clear()">clear</button> </div> </template> <script> import myHeader from './components/myheader.vue'; export default { components:{ 'my-header':myHeader }, data:function(){ return { msg :"Hello World" } }, methods:{ clear:function(){ this.msg ='' } }, // ready mounted: function () { this.$nextTick(function () { var that = this $.getJSON('http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?', {}, function (json) { console.log(json) that.msg = json.postalcodes[0].adminName1 }) }) } } </script> <style> .red{ color:#f00; } </style>
4,Vue-router匯入
router.js定義
import Top from './pages/top'; import About from './pages/about'; import Contract from './pages/contract'; import Userinfo from './pages/userinfo'; const UserProfile = { template: '<div>Profile</div>' } const UserPosts = { template: '<div>Posts</div>' } const UserPostsHelp = { template: '<div>Posts Help</div>' } export default [{ path: '/', component: Top }, { path: '/about', component: About }, { path: '/contract', component: Contract }, { path: '/user/:userId', name: 'user', component: Userinfo, children: [{ path: 'profiles', name: 'userprofile', component: UserProfile }, { path: 'posts', name: 'userpost', components: { default: UserPosts, helper: UserPostsHelp } } ] } ]
引用
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter); import routes from './router' const router = new VueRouter({ mode: 'history', routes: routes }); const app = new Vue({ el: '#app', router });
App.vue設定路由
<template> <div> <div class="header"> <router-link to="/"> top </router-link> <router-link to="about"> about </router-link> <router-link to="contact"> contact </router-link> </div> <div class="content"> <router-view></router-view> </div> </div> </template>
5,API訪問
Axios方式(引入axios包)
<template> <div> <h1>Bitcoin Price Index</h1> <section v-if="errored"> <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p> </section> <section v-else> <div v-if="loading">Loading...</div> <div v-else v-for="currency in info" class="currency"> {{ currency.description }}: <span class="lightena"> <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }} </span> </div> </section> </div> </template> <script> import axios from 'axios'; export default { data(){ return { info:null, loading:true, errored:false } }, filters:{ currencydecimal(value){ return value.toFixed(2) } }, mounted() { axios.get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response=>{ this.info = response.data.bpi }) .catch(error=>{ console.log(error) this.errored =true }) .finally(()=>this.loading=false) }, } </script> <style> .lightena { color: blue; } </style>
FetchAPI方式:不需要引用特殊的包。
<template> <div> <h1>Bitcoin Price Index</h1> <section v-if="errored"> <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p> </section> <section v-else> <div v-if="loading">Loading...</div> <div v-else v-for="currency in info" class="currency"> {{ currency.description }}: <span class="lighten"> <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }} </span> </div> </section> </div> </template> <script> export default { data(){ return { info:null, loading:true, errored:false } }, filters:{ currencydecimal(value){ return value.toFixed(2) } }, mounted() { fetch('https://api.coindesk.com/v1/bpi/currentprice.json', { method: 'GET', mode: 'cors' }) .then(response=>{ return response.json(); }) .then(response=>{ this.info= response.bpi }) .catch(error=>{ console.log(error) this.errored =true }) .finally(()=>this.loading=false) }, } </script> <style> .lighten { color: red; } </style>