Classified articles under Vue

Share some of the latest gadgets

When you log in with your mobile phone number, you can see that there are two buttons (get the verification code and log in) and two boxes (input the mobile phone number and input the verification code) by analyzing the page

So we have the following device (we don't look at the specific functions, we just look at the structure)

 < template > 
 < div class = "login wrapper" > 
 < div class = "title bar" > login < / div > 
 < div class = "wrapper phone wrapper" > 
 < span class = "title" > mobile number < / span > < input class = "input phone" type = text "placeholder =" mobile number "> 
 < / div > 
 < div class =" wrapper code wrapper "> 
 < span Class = "title" > captcha < / span > < input class = "input code" type = "number" placeholder "> 
 < div class =" send "> get verification code < / div > < / div > < div class =" wrapper BTN wrapper "> 
 < div class =" input BTN "> login < / div > < / div > < / div > < / template > login

At this time, you can start to write the logic. It is also a simple analysis. To login, you need to click to get the verification code, and you can count back the number of seconds. In other words, you can dynamically modify the text. You can check and limit the number of mobile phone numbers and the number of verification codes.

It's almost like the following

 < template > 
 < div class = "login wrapper" > 
 < div class = "title bar" > login < / div > 
 < div class = "wrapper phone wrapper" > 
 < span class = "title" > mobile number < / span > < input class = "input phone" type = text "placeholder =" mobile number "
: value =" phone "
 ref =" phone "v-on: change =" changephone " V-on: input = "changephone" > 
 < / div > 
 < div class = "wrapper code wrapper" > 
 < span class = "title" > verification code < / span > < input class = "input code" type = "number" placeholder = "verification code" 
: value = "code" 
 ref = "code" v-on: change = "changecode" v-on: input = "changecode" > 
 < div @Log in < / div > < / div > < login < / div > < login < / div > < login < / div > < login < / div > < login < / div > < login < / div > < login < / div > < login < / div > < / div > < / div > < / div > < div > < / div > < div > < / template > < script > < script > < name: Name: "loginpphone", data() {data() {return return return return {photo photo photo photo > < 10 < script > < script > < script > < name: "loginpphone", "data(), data() {return return return {{photo photo photo {photo photo photo > < 10 < script > < script > < name:" loginpphone "," data(), data(), data() {data() return {return {ne: ', / / the mobile phone number in the input box Code: ', / / the verification code 
 codetext:' get verification code ', / / the countdown display text 
 timingboard: 60, / / countdown 
 timer: null, / / a timer is used to count down the verification code 
}, 
 methods: {logincode() {}, //Check the length of {}, {change code () / / check the length of {code (), {change code ()]

These are enough for you to implement a basic mobile phone login interface. For complete code, please click below Gist link

For complete code, refer to: https://gist.github.com/flxxyz/64ceb06a0754d67a771b3e3e7dc94d48

To be honest, I haven't seen the API after using Vue for such a long time. I found it by accident these days Vue.directive It's a good look

It's always used here Vue.use(ElementUi) Where to use Vue.use(axios) , has been staying at the level of usage. Just in time, I found that the consumption of writing markdown parsing instance seems to be a little high, and it may be more convenient to directly process it into instructions (it is really much more convenient, and there is less writing of a bunch of methods)

Briefly describe the process

During the mount life cycle of the component rendering an article, it will query whether there is a corresponding article in the local record. If it does not exist, it will request online search, otherwise 404.
This article is about markdown, considering that the front-end processing can be directly parsed out (after all, the front-end performance is over 233), reducing the back-end logical processing burden, and what consistency is not needed to be considered now.
Use the downmark parser marked The logic is as follows

 //Import Vue from 'Vue' / import app 'import markdown from'. / markdown ';; / / inject markdown parser into markdown parser Vue. Use (markdown. Install) Vue. Prototype. Prototype. $marker = markdown. Markdown = markdown.marker 
 new Vue ({store, 
 router, 
 render: H = > H (APP) 
 H (APP) 
 Vue. Use (markdown. Install) vue.prototype. $markd = markdown.markdown.marker = markdown.markdown 
 new Vue ({store, 
 router, 
 render: H = > H (APP) (APP) 
 H (APP) 
 H (APP) 
 H (app) 
 $mount (' ා app ')

Integrated marked and exposed as plug-ins

 //markdown.js

import marked from 'marked'
import('highlight.js/styles/atom-one-dark.css')

marked.setOptions({
    renderer: new marked.Renderer(),
    pedantic: false,
    gfm: true,
    tables: true,
    breaks: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    xhtml: false, 
    highlight(code) {
        return require('highlight.js').highlightAuto(code).value;
    },
})

let install = (Vue) => {
    if (install.installed) return;
    Vue.directive('markdown', {
        bind: (el, binding, vnode) => {
            el.innerHTML = marked(binding.value)
        },
        update: (el, binding,  vnode) => {
            el.innerHTML = marked(binding.value)
        }
    })
}

export default {
    marked,
    install,
}

Use on label v-markdown instructions

 //This is an interface for finding articles = function() {return new promise ((resolve, reject) = > {resolve (ID)})}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} 
export default {Name: "test", 
 data() { Return {article: ', 
 isnotfound: true, 
}}, 
 methods: {handlerarticle (ID) {
 / / find local article 
 let a = this. Findarticle (ID, async (ID) = > {return away this is an interface (ID); 
})              if (a == null) {
                    return 404;
                }

                return a;
            },
            findArticle(id, callback) {
                // let res = '## Test';
                let res = null;
                if (res === null) {
                    return callback(id); Use {this "} to find {this"} to find the error; this. Article = a; / / save the markdown content to the variable 
}} 
 < / script > directly

For complete code, refer to: https://gist.github.com/flxxyz/93e009d32ecd7e0c6785a52571577cd7

 Vue. Component (component name, {template: template ID, / / both script and template tags can implement 
 props: [passing data parameters], 
 methods: {method name: function() {}}});

The single document can refer to the first part

I am using import Import no problem, use webpack When generating, find the Vue.component() Registration will report an error, check to find a solution, delete the new components
?

import xyz from './components/head.vue';

When using the global registration component, the components delete

 Vue.component('xyz ', require('./components/head.vue'));

new Vue({
    el: '#app'
    //components: { xyz }
})