Getting the front frame Vue

Brief introduction

Vue is a progressive frame for constructing user interfaces. The other frame difference is large, Vue is designed to be applied from the bottom up layer by layer. Vue core library focus only on the view layer, is not only easy to use but also easy to integrate third-party libraries or existing project. On the other hand, when used in conjunction with a modern tool chain and various support libraries, Vue also fully capable of providing drive for complex one-page application.

Environment Installation

Preparing the environment:
the Node

asl

view-cli

view-devtools

nvm installation: to manage the node version

Download chrome plugin address:
https://chrome-extension-downloader.com/

BootCDN: https://www.bootcdn.cn/

Template syntax

vue file structure (template, script, style)
Interpolation syntax {{msg}}, data, js expression
Command (command abbreviation) @click: href

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg{
            color: red;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script></head>
<body>
<div id="app">
<div class="bg" v-bind:id="bg1">
    hello world!
    {{msg}}
</div>
<div class="bg">
    {{msg}}
</div>
    {{count}}
    {{(count + 1)*10}}
<div v-html="template">

</div>
<a :href="url">百度</a>
<!--v-bind:绑定页面属性, 可以直接缩写 ：-->
    <button type="button" @click="submit()">数字加1</button>
<!--v-on:事件 缩写@ -->
</div>

<script>
    new Vue({
       el:'#app', // .bg
       data: {
           msg: 'hello vue!!',
           count: 1,
           template: '<div>hello template</div>',
           url: 'https://www.baidu.com/',
           bg1: 'app-bind'
       },
       methods: {
           submit: function() {
               this.count ++
           }
       }
    })
</script>
</body>
</html>

Calculated with the listener properties

Calculation of property: conputed
Listener: watch

Listener:

<script>
    var app = new Vue({
       el:'#app', // .bg
       data: {
           msg: 'hello vue!!',
           count: 1,
           template: '<div>hello template</div>',
           url: 'https://www.baidu.com/',
           bg1: 'app-bind'
       },
       methods: {
           submit: function() {
               this.count ++
           }
       },
       watch: {
           msg: function (newVal, oldVal) {
               console.log('newVal is:' + newVal)
               console.log('oldVal is:' + oldVal)
           }
       }
    })
</script>

Vue objects to a variable, so that you can debug in chrome console, the following is a use for debugging watch attributes:

When changing the value app.msg, it calls the corresponding function watch function, print-related information

app.msg
"hello vue!!"
app.msg = "new message!!"
index.html:49 newVal is:new message!!
index.html:50 oldVal is:hello vue!!
"new message!!"

Computed Property

Msg1 change will affect change in the value of any property related computed values of occurrence

Monitor values are values in this example

watch: {
   msg: function (newVal, oldVal) {
       console.log('newVal is:' + newVal)
       console.log('oldVal is:' + oldVal)
   }
},
computed: {
   msg1: function () {
       return 'computed ' + this.msg + ',' + this.another
   }
}

listening watch is generally a single variable or array - asynchronous scenarios

computed can monitor many variables, and these variables must be in the Vue - data linkage

Conditions rendering, render list, Class and Style Bind

v-if || v-show usage

<div id="app">
    <div v-if="count > 0">
        判断1：count大于0,count的值是：{{count}}
    </div>
    <div v-else-if="count < 0 && count > -5">
        判断2：count的值是：{{count}}
    </div>
    <div v-else>
        判断3：count的值是：{{count}}
    </div>
    <div v-show="count == -1">show: {{count}}</div>
</div>

script>
    var app = new Vue({
       el:'#app', // .bg
       data: {
           count: 1
       }
    })
</script>

Are display relevant content based on conditional

v-for

<div v-for="item in list"> {{item}}</div>

<script>
        var app = new Vue({
           el:'#app', // .bg
           data: {
               msg: 'hello vue!!',
               count: 1,
               list: [1,2,3,4,5]
           })
</script>

V-for use in conjunction with v-if, v-show:

    <div v-for="item in list">
        <div v-if="item.age > 29">
            {{item.name}}
        </div>
        <div v-else>
            {{item.age}}
        </div>
        <div v-show="item.age > 29">
            {{item.name}}
        </div>

    </div>

Class and Style bindings

Style Binding:

    <div v-show="item.age > 29" v-bind:style="styleMsg">
            {{item.name}}
    </div>
    
    <script>
        var app = new Vue({
           el:'#app', // .bg
           data: {
               styleMsg:{
                 color: 'red',
                 textShadow: '0 0 5px green'
               },
               msg: 'hello vue!!'
           })
</script>

class binding:

<div v-show="item.age > 29"
             :class="['active', 'add', 'more', {'another':item.age < 30}]"
             :style="styleMsg">
            {{item.name}}
</div>

item.age <30 when, another will show up

View-Cli

installation:

npm install -g @vue/cli

View Version:

vue --version

How to Create a Project:

vue create project

vue ui    // 可视化创建项目

vue project directory structure:

-- public
-- src
-- package.json

Components of thought

The main function of the module assembly to achieve multiplexing

It can be very efficient execution

Some complex logic pages can be split

How to split:

Business lines of code does not exceed 300 lines of principle
Multiplexing principle

Problems caused by components:
1. component state management (vuex)
mix 2 multi-component, multi-page, in charge of business (VUE-Router)
3. parameter passing between components, messages, event management (props, emit / on , bus)

vue code style

https://cn.vuejs.org/v2/style-guide/

view-router

vue views related files created
Configure related routing in route.js

{
                path: '/data',
                name: '数据',
                icon: 'dashboard',
                component: PageLayout,
                children: [
                    {
                        path: '/data/info',
                        name: '详情',
                        icon: 'none',
                        component: () => import('@/views/data/Info')
                    }]
            }

3. Local configuration file vue need to show the relevant page

vuex

Scenes:

A plurality of views dependent on the same state (e.g., menu navigation)
You need to change the behavior of different views of the same status (such as comments barrage)

State management model developed vue.js

Component Status unified management

Component states to change the rules to follow uniform

It needs to be done using the following steps:

Store.js definitions file

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
       increase() {
        this.state.count ++
       }
    },
    actions: {
        
    }
});

state: Public state component

mutations: changing the state of the method defined

2. Components used, need to introduce store.js file

import store from '@/store/index'
export default {
name: "About",
store,
methods: {
    add() {
        console.log("add")
        store.commit('increase')
    }
    }
}
</script>

store.commit () commit the changes

3. Use between components

In another file using state

<template>
    <div>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    import store from '@/store/index'
    export default {
        name: "Config",
        store,
        data () {
            return {
               msg: store.state.count
            }
        }
    }
</script>
<style scoped>
</style>

How to debug

There are Chrome plug-vue

Where needed to write debugger for debugging

View vue variable values directly in the chrome console, wrote this. (Debug mode) variable

chrome Network-xhr view the request

You can use the interactive debugging Fast 3G | Slow 3G

This can be the object of the current component is bound to go global variable windows

mounted() {
  window.vue = this
},
methods: {
    add() {
        console.log("add")
        debugger
        store.commit('increase')
    },
    output() {
        console.log("output")
    }
    }
}

It can print directly in the chrome console window.vue.output()

How to integrate vue.js

Single-page, multi-page introduction vue.js CDN
Complex single page vue cli tool to create a template project

Development workflow:

Demand research (identifying needs)
Interaction design, logic design, interface design
Code implementation, test run, deploy online

GIT:

Create a project git clone, git init
Create a branch and push branches, merging branches
Delete branch, version rollback

git add . # 添加需要提交的文件
git commit -m "first commit" # 提交需要push的文件
git remote -v     # 可以看到远程的仓库
git push origin master
git branch -a  # 查看所有分支
git checkout -b dev #创建分支
git push origin dev # 提交到dev分支
-- 合并 分支 --
git checkout master
git merge dev
git push origin master

git branch -D dev # 删除dev分支
git push origin :dev # 删除远程分支
git reset --hard head^  # 退回到上一个版本
git log | git reflog  #查看之前的git 记录
git reset --hard HEAD@{1}  # 回退到任意版本

A simple one-page application

Code:

<template>
    <div>
        <p>{{msg}}</p>
        <ul>
            <li v-for="(item, index) in lists"
                :key ="index"
                @click="choose(index)"
                :class="{active: index === current && current !==''}"
            >
                {{item}}
            </li>
        </ul>
        <button type="button" @click="add()">添加</button>
        <ul>
            <li v-for="(item, index) in target"
                :key ="index"
            >
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
    import store from '@/store/index'
    export default {
        name: "Config",
        store,
        data () {
            return {
               msg: store.state.count,
               lists: [1,2,3,4,5],
               target: [],
               current: ''
            }
        },
        methods: {
            choose(index) {
                this.current = index
            },
            add() {
                if (this.current==='') {return}
                this.target.push(this.lists[this.current])
                this.current=''
            }
        }

    }
</script>

<style scoped>
    li.active {
        background: green;
    }
</style>

Renderings:

How high imitation of someone else's App

Inspect Element can view the structure of Dom
Header, Body inside view JS, CSS references, search for the appropriate js library
You can also view chrome Network | js Source, use anti-eds and breakpoint debugging for compressed js file, chrome provides a format function

Packaged and released

Project Package:

npm run  build

After the package is complete, the dist folder of all the files uploaded to the root directory of the server to go, you can access the

to sum up

This article explains some introductory knowledge vue framework to build install vue development environment, packaged and released, vue template syntax, development process and vue related components use, how to debug, now you can develop some simple one-page application the .