Shulou(Shulou.com)06/02 Report--

This article mainly introduces "Vue installation and use method tutorial". In the daily operation, I believe that many people have doubts about the method tutorial of Vue installation and use. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "Vue installation and use method tutorial". Next, please follow the editor to study!

Catalogue

1. Vue installation

Mode 1:CDN introduction

Method 2: download and introduce directly

Mode 3:npm installation

2. Basic use

Foreword:

Vue (pronunciation / vju steps /, similar to view) is a framework for building front and back end separation. At first, it was developed by domestic excellent player you Yuxi, and it is now the "most" popular front-end framework in the world. Using vue to develop web pages is very simple, and the technical ecological environment is perfect, and the community is active, which is a necessary skill for the front and back end to find a job!

1. Vue installation

The installation of vue is generally divided into three ways

Mode 1:CDN introduction mode 2: direct download and introduction

Development environment: https://vuejs.org/js/vue.js

Production environment: https://vuejs.org/js/vue.min.js

Mode 3:npm installation

NPM installation is recommended when building large applications with Vue. NPM works well with balers such as webpack or Browserify modules. At the same time, Vue also provides supporting tools to develop single file components.

# the latest stable version $npm install vue2, basic use

To use Vue, you first need to create a Vue object and pass in the el parameter, the full name of the el parameter is element, which is used to find a root element for vue rendering. And we can pass a data parameter, and all the values in data can be used directly under the root element using {{}}.

The sample code is as follows:

{{message}} const app = new Vue ({el: "# app", data: {message: "beginner vue"}})

The data in data can only be used under the root element of vue and cannot be recognized and rendered by vue elsewhere.

For example:

{{message}}

Const app = new Vue ({el: "# app", data: {message: "beginner vue"}})

You can also add methods to the vue object, which is specifically used to store your own functions. Functions in methods can also be used in templates, and functions in methods can access values in data simply through this. The property name can be accessed without the need for additional this.data. Property name to access.

The sample code is as follows:

{{greet ()}}

Const app = new Vue ({el: "# app", data: {message: "beginner vue"}, methods: {greet: function () {return "hello" + this.message}) this is the end of the study on "how to install and use Vue", hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.