Vue基础开发笔记

以下实例代码地址：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.js
const 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>