A Vue.
1. What is VUE
Third party development based on MVVM design pattern progressive pure front-end JS framework (1). Third party development: download cn.vuejs.org (2). MVVM based design mode? TBD (3). Incremental: You can gradually introduce vUE functionality into your project. You don't have to use VUE throughout the project. (4). Pure front-end JS: Without any back-end knowledge and technology, Vue can be used and run independently in the client browser! (5). Framework: semi-finished code that already contains core functionsCopy the code2. Why use frameworks
Simplicity – Avoid lots of repetitive code!
3. When to use Vue
As long as the data operation (add, delete, change and check) - based front-end projects, all available framework development!Copy the codeHow to use VUE
1. Download two types
(1). Just download a separate vue.js file and use it in web pages -- only suitable for beginners (2 and a half days). Highest version: 2.6 Development version: complete comments, code formatting and variable names with extremely friendly error prompts! Easy to debug! Good readability, used for development and learning with large volume, slow download, not easy to production environment (after the project development test, online) to use the production version: delete all notes and code format, extremely simplified variable name deleted error prompt, not easy to debug! Small size, fast download, poor readability for production environment, not suitable for development and learning (2). Download the scaffolding code for the VUE project - use in the enterprise (2 days) highest version: 4.xCopy the codeMy first VUE program
(1). Define interface
A. The entire interface must be wrapped in a single parent element, conventionally named id="app" b. Find the possible changes in the entire interface and mark them with {{variable name}}! {{n}} c. {{n} c. Find the element that triggered the event and bind the event handler in the element start tag: @ event name =" function name"Copy the code(2). Define data objects and methods objects
Var data={page required variables: initial value} var methods={event handler name (){// To manipulate variable values in data, this must be required. Variable name is ok! }} Problem: Variables in data and methods don't go anywhere on the page by themselvesCopy the codeCreate a new Vue() object
Create a new Vue() object with data and methods wrapped around the interface to be manipulated. Result: New Vue() automatically sends variables in data and methods in methods to the specified locations in the interface.Copy the code(4). The instance
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Document</title> <script SRC ="js/vue.js"></script> </head> <body> <! 1.1 The entire interface must be wrapped in a single parent element, which is normally named id="app" 1.2 Find the possible locations in the interface and mark them with {{variable name}}! Since the contents of a span can change in quantity when clicked: 1.3 Find the element that triggered the event and bind the event handler in the element start tag: @ event name = "function" -- -- > < div id = "app" > < button @ click = "minus" > - < / button > < span > {{n}} < / span > < button @ click = "add" > + < / button > < / div > <script> /*2. // In this case, we need a variable n and two event handlers (minus and add), so we need: Create an object "data" to store the variable n and the initial value of n. Create an object "methods" to store all the event handlers required by the page. var data={ n:1 }; Var methods={// Methods need this.! // The value of a variable can be used as an example. Don't care how to add, delete, change and check pages! Minus :function(){if(this.n>1){this.n--}}, add:function(){this.n++}} /* Add :function(){this.n++}} /* */ new Vue({el:"#app", // </script> </body> </ HTML >Copy the code