Vue --- About project directory structure

About project directory structure

 

 

 

vue Introduction

• Born in 2014, 2013, react, 09 Nian angularjs

• On the river, especially rain

• The core concept: the components of the two-way data flow (based on ES5 in defineProperty achieved), IE9 only supports

• angular core: a modular two-way data binding (dirty test: an array ($ watch))

  • Develop a landing module, landing head to be displayed, bottom, middle

  • Component: a combining part (head, bottom, middle)

  • Code segments

    • Head: page, style, dynamic effects

    • Code: template style script

• Framework contrast, recommended that you go look at vue

• https://cn.vuejs.org/v2/guide/comparison.html#React

data flow

• 1 to: changes changes affect the properties page of memory occurs js

• 1 to: js affect memory property to change the page changes

vue commonly used v- instruction demo

• Common commands

• v-text element is only used in a dual innerText label

• v-html innerHTML elements are not contain <-! {{xxx}} ->

• v-if the element is inserted or removed

• v-show element whether to show or hide

• v-model two-way data binding, v-bind is a one-way data binding (js change affects memory page)

class used in conjunction with v-bind

• Needs to be assigned to the class based on the results of the expression of the variable, we need to use v-bind: class = "xxx"

• v-bind: attribute name = "expression", the end of the final expression operators assign the result to the attribute name

  • Simplified wording is: :属性名="表达式"

• class: Classification results

  • A style: Returns a string (a triplet of expressions and key inventory objects and styles)

  • Multiple styles: returns the object (style make key, true or flase do value)

and methods of using the v-on

• The method of binding events

  • v-on:事件名="表达式||函数名"

  • Shorthand: @事件名="表达式||函数名"

• If no parameters function name can be omitted () function only to a name

• The assembly function declaration, plus methods attribute in root export default attributes of this object, it is an object

  • key is the name of the function is a function of body

• The default object in the root attribute plus export data property, which is a function that returns an object

  • Property is the name of the object we initialize variables

• Any use of the template variable or function, does not need to add this

• In script on the need to add this

v-for the use of

• Can use the operating array (item, index)

• Operation target may be used (value, key, index)

• key is a property of similar trank by

• In order to tell vue, js association between the elements, with the page, remove elements when knowledge map when it is to delete individual items rather than genuine replacement, so the need to associate their relationship, setting (must, performance)

• 2.2.0+ version, when using the v-for in the assembly, key now is a must.

Beautiful List

Father and son using components

• Parent and child, the parent is used, by using a sub-

• Declare parent subassembly, the subassembly is introduced object declared as follows

import subassembly objects from './xxx.vue';    { Components: { component name: subassembly Object        }    }


        
            

• Global components, more convenient to use, need not be declared directly

• Main.js once introduced, the use of main.js vue.component('组件名',组件对象);

• All components can be directly through the component name, use

Father to son

• The parent component attribute value transferred through the sub-assembly

  • There are two ways:

    • Constant: prop1 = "constant value"

    • Variables:: prop2 = "variable name"

• Subcomponents to declare

  • Root Properties props: [ 'prop1', 'prop2']

  • Used directly in the page {{prop1}}

  • How prop1 should be used in the js? this.prop1 get

Look object classification document

• 1: Global on behalf of Vue.

• 2: Examples representative of this or new Vue ().

• 3: Option parameter represents the new Vue () of

• Or export attribute default inside

Communication to the parent sub-assembly (vuebus) (Extended)

• By new Vue () such an object, to $ on ( 'event name', fn (prop1, pro2))

• Another component is introduced with a vuebus, to $ emit ( 'event name', prop1, pro2)

to sum up

• -1: node_modules package already exists, the file already exists package.json and webpack.config.js

• 1: Create index.html, look at the relationship they describe in the papers and documents webpack.config.js

• 2: index.html div-> id-> app

• 3: Create main.js, look at the relationship they describe in the papers and documents webpack.config.js

• 4: introducing vue, objects and related components in the main.js

• 5: new Vue (option options), destination el rendering content render: c => c (App) App rendering of content

• 6: Writing app.vue

  • After 2.x template can have only one root

  • script format options options} export default {

  • After the style plus scoped (range), the style is valid only for the current template

• 7: it is possible to use components or functions or accept parameters using

  • options (root attributes):

    • is a function of data, return an object

    • methods is an object, key is the name of the function, value is a function of body

    • components is an object, key is a component name, a component object value

    • props is an array element of a plurality of acceptable parameters

• 8: Routine summary

  • All things that can be used in the top

  • It can be used in the following, by this.

• 9: Start

  • Into webpack.config.js and package.json file in the same directory to start the command line

  • Input: being encoded: npm run dev

    • Error: ../ superior command checks performed, whether the existence of a directory and related documents exist node_modules

  • Input: Coding is completed, submitted to the company: npm run build