Detailed explanation for novices learning Vue

This time I will bring you a detailed explanation for novices learning vue. What are the precautions for novices learning vue. The following is a practical case, let’s take a look.

One of the best frameworks for vue currently

First of all, we follow the official website’s documentation

#Special attention

Vue.js does not support IE8 and its The following version, because Vue.js uses ECMAScript 5 features that IE8 cannot emulate. Vue.js supports all ECMAScript 5-compatible browsers.

Change logThe change log of each version can be found on GitHub.

npm

It is recommended to use NPM installation when building large applications with Vue.js. NPM works well with module packagers such as Webpack or Browserify. Vue.js also provides supporting tools to develop single-file components.

# Latest stable version

$ npm install vue

Command line tool CLI

Vue.js provides an official command line tool that can be used to quickly build large single pages application. The tool provides out-of-the-box build tool configuration, bringing a modern front-end development process. It only takes a few minutes to create and launch a project with hot reloading, static checking on save, and a production-ready build configuration:

# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖，走你$ cd my-project
$ npm install
$ npm run dev

Special Note!!!!!!

## The #CLI tool assumes a certain level of familiarity with

Node.js

and related build tools. If you're new to Vue, we highly recommend reading through the guide without a build tool and getting familiar with Vue itself before delving into the CLI. After following the process

will appear

Related files
Folder

.babelrc

is the configuration of babe , our code is es6, compiled into es5 through babe's presets

presets are presets

Introduction to project files

build and config are related to webpack configuration

node_modules are installed by us through npm The dependent code library
src directory is where we store the source code of the project. All the code we develop will be placed in the src directory

The static folder is where third-party file resources are stored

//.editorconfig 编辑器的配置charset = utf-8 //编码indent_style = space //缩进的风格indent_size = 2 //缩进的大小是两个end_of_line = lf //换行符的风格insert_final_newline = true //创建一个文件,会自动插入新行trim_trailing_whitespace = true //会自动移除行尾的多余空格

. eslintignore: Ignore the syntax check

After understanding the project file, let’s understand how the current code runs

index.html is the

entry file
index We know that his js and css will be dynamically inserted into this page

Also look at the dom structure,

There is only one APP tag under the body

He actually It is a vue component
The entrance JS of our page is actually this main.js
There is a red line marked here. It is a compiler problem. It can be recognized by adjusting it to es6 syntax

import Vue from 'vue'import Vue from './App'new vue ({  el: 'body'
  components:{App}
})

We can see that this entry file relies on two

vue, js library

and one is App.vue. It can be simply written directly as App

and then pass new Vue Instantiate a vue

el:'body' is a mounting point, mounted on a body

components:{App}Registers a current App plug-in. This syntax is an abbreviation of es6, corresponding to With es5 App:App can simplify our writing through the writing method of es6. We know that this app corresponds to this app.vue

. Then let’s take a look at app.vue

which is divided into

template is a template

srcipt is a JS
style is a css style
The page structure is combined with the page to correspond and look at the page structure
This hello is a vue The component corresponds to hello.vue
in components. In App.vue, a sub-component hello is registered through components. It must be noted that we can only use the hello tag by registering it through components
property
, otherwise That's not possible. You can try the hello comment in componentsAuto-formatting shortcut key ctrl+alt+L

Now let’s take a look at hello.vue

The code structure msg corresponds to this data msg

We define a data fun
in the definition of vue. It can return an obj. All the values ​​​​in this obj will be added to its dependencies, and then the msg is accessed in the template. You can access the msg in this data through the msg in the template

export default This is the syntax sugar provided by vue. You can define a component through obj

will be in the import of App.vue Hello from'./components/hello'

That is to say, the object in the data in hello.vue will be assigned to this hello

而在components{
Hello相当于Hello:Hello
}

That is to say, the key of components is hello Its value is the value of export default

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

Front-end entry to css3

How to solve the css Hack of IE11

How axios makes HTTP request client based on Promise

The above is the detailed content of Detailed explanation for novices learning Vue. For more information, please follow other related articles on the PHP Chinese website!