The progressive JavaScript framework makes writing faster, more convenient and web pages load faster. It is a tool that must be learned for a high salary. Do more events in the least time,
How to learn Vue:
- It's best to know the self-test of knowledge points every day - if you can't, you can only spend 30 minutes remembering conclusions and formulas
-
Remember the role of vue instruction, basic syntax - get a dictionary (one-to-one mapping)
-
Use it repeatedly in class examples, exercises, cases, assignments and projects
-
Learn how to find problems and solutions (make an error summary.md to avoid repeated entry into the pit)
Summary:
Practice and write more, find out what you learn every day, and remember grammar, characteristics and functions
@vue/cli scaffold construction and foundation use
Benefits of scaffolding:
- Out of the box
- 0 configure webpack
- babel support
- css, less support
- Development server support
Installation method:
Through global installation
yarn global add @vue/cli # OR npm install -g @vue/cli
Note: if there is no movement for a long time (95% of which is due to network speed problems), you can ctrl c
- Reinstall
- Or switch the network to avoid getting stuck
After installation, check the version according to the following code. If the current version information is displayed, the installation is successful
vue -V
@ vue/cli create project startup service
Objective: use the vue command to create a scaffolding project
==Note: the project name cannot contain capital letters, Chinese and special symbols==
1. Create project
# vue and create are commands, and vuecli demo is the folder name vue create vuecli-demo
2. Select template
==You can use the up and down arrows to select. If you make a mistake, ctrl+c will start again==
Choose what you need
Choose how to download the dependent packages required by the scaffold project
If you have downloaded yarn, choose yarn Use whichever you download,
3. Press enter and wait to generate project folder + file + download necessary third-party packages
4. Enter according to the prompt
Enter CD vuecil demo first
Then enter: npm run serve # perhaps yarn serve According to your personal situation
confirm
5. When the corresponding personal access path and others' access path appear, it means that you have succeeded
Then enter the corresponding description address on the browser according to the path
When this picture appears, it means you are all right
Analyze the meaning of the directory and code
Note: the function of the file and the meaning of the file code
node_modules are downloaded third-party packages
public/index.html – the web page where the browser runs
src/main.js – webpack packaged entry file
src/App.vue – Vue project entry page
package.json – dependent package list file
@Understanding of vue/cli project architecture
@vue/cli custom configuration
Because there is no webpack.config.js file in Vue, we can only create vue.config.js
Create vue.config.js at sre side by side
/* Overwrite configuration of webpack */ module.exports = { devServer: { // Custom service configuration open: true, // Open browser automatically port: 3000 //Modify port number } }
eslint
In vue, it is a tool for checking code specifications. It is recommended to close it in early learning
example:
Because variable a has never been used, the system will prompt an error
==Remember to see such errors in the future to prove that your code is not rigorous==
Temporarily turn off the eslint check to avoid error reporting
@Explanation of vue/cli single vue file
Benefits of a single vue file: independent scopes do not affect each other
vue recommends using. vue files to develop projects
There can only be one root tag in the template
vue file - independent module - scope does not affect each other
Style works with the scoped attribute to ensure that the style is only effective for the tags in the current template
vue files are packaged together with webpack and inserted into index.html
<!-- template must, There can only be one root label, Affects the label structure rendered to the page --> <template> <div>Welcome vue</div> </template> <!-- js relevant --> <script> export default { name: 'App' } </script> <!-- The style of the current component, set up scoped, You can ensure that the style is only valid for the current page --> <style scoped> </style>
Finally: Vue files cooperate with webpack, package them, insert them into index.html, and then run them in the browser
About initialization interface cleaning
- Delete the files in assets under src
- Delete the files in components under src
- Delete the content in App.vue under src
- Finally, enter < Vue in App.vue according to Vue related plug-ins Generate a new structure according to the prompt
<template> </template> <script> export default { } </script> <style> </style>
Vue related instructions
Interpolation expression. Also known as Beard insertion method
Syntax: {expression}}
<template> <h1> {{ msg }} </h1> <h2> {{ obj.name }} </h2> <h3> {{ obj.age > 18 ? 'adult' : 'under age' }} </h3> </template> <script> export default { data(){ // Fixed format, where vue data is defined return{ // key is equivalent to variable name msg:'Hello,word', obj: { name: "Small vue", age: 18 } } }, } </script> <style> </style>
Summary: for the assignment of interpolation expression in dom, the variable of vue must be declared in data
vue instruction - v-bind
-
Syntax: v-bind: attribute name = "vue variable"
-
Abbreviation: attribute name = "vue variable"
<template> <div> <a v-bind:href="url">I'll go to Baidu</a> <a :href="url">I'll go to Baidu</a> </div> </template> <script> export default { data(){ return{ url:'http://www.baidu.com', } } }
vue instruction - v-on
Target: bind events to tags
-
grammar
-
v-on: event name = "a small amount of code to execute = ="
-
v-on: event name = "function in methods"
-
v-on: event name = "function (argument) in methods"
-
-
Abbreviation: @ event name = "function in methods"
<!-- vue instructions: v-on Event binding--> <p>The quantity of goods you want to buy: {{count}}</p> <button v-on:click="count = count + 1">Add 1</button> <button v-on:click="addFn">Add 1</button> <button v-on:click="addCountFn(5)">Add 5 pieces at a time</button> <button @click="subFn">reduce</button> <script> export default { // ... other omitted methods: { addFn(){ // this represents the component object behind export default (subordinates have attributes return ed from data) this.count++ }, addCountFn(num){ this.count += num }, subFn(){ this.count-- } } } </script>
Summary: common @ event names, binding events to dom tags, and = event handling functions on the right
vue instruction - v-on event object
Objective: get the event object in the vue event handling function
-
Syntax:
-
No parameters are transmitted and received directly through formal parameters
-
Pass parameters, and pass $event to the event handler through the event object
-
<template> <div> <a @click="one" href="http://Www.baidu.com "> stop Baidu</a> <hr> <a @click="two(10, $event)" href="http://Www.baidu.com "> stop going to Baidu</a> </div> </template> <script> export default { methods: { one(e){ e.preventDefault() }, two(num, e){ e.preventDefault() } } } </script>
vue instruction - v-on modifier
Purpose: after the event. Modifier name - bring more powerful functions to the event
-
Syntax:
-
@Event name. Modifier = "function in methods"
-
. stop - prevent event bubbling
-
. prevent - block default behavior
-
. once - the event handler is triggered only once during program operation
-
-
<template> <div @click="fatherFn"> <!-- vue The modifier is set for the event, After the event.Modifier names can be used for more functions --> <button @click.stop="btn">.stop Prevent event bubbling</button> <a href="http://Www.baidu.com "@ click. Prevent =" BTN ">. Prevent block default behavior</a> <button @click.once="btn">.once During program operation, The event handler is triggered only once</button> </div> </template> <script> export default { methods: { fatherFn(){ console.log("father Triggered"); }, btn(){ console.log(1); } } } </script>
vue command - v-on key modifier
Objective: to add modifiers to keyboard events and enhance their ability
-
Syntax:
-
@keyup.enter - monitors the Enter key
-
@keyup.esc - monitor return key
-
<template> <div> <input type="text" @keydown.enter="enterFn"> <hr> <input type="text" @keydown.esc="escFn"> </div> </template> <script> export default { methods: { enterFn(){ console.log("enter Press enter"); }, escFn(){ console.log("esc Press the button"); } } } </script>
Conclusion: using more event modifiers can improve development efficiency and reduce your own judgment process
Practice flipping the world
<template> <div> <h1> {{msg}} </h1> <button @click="btn">Click flip</button> </div> </template> <script> export default { data(){ return{ msg:'Hello,word', } }, methods:{ btn(){ // let arr = this.msg.split('') // let ap = arr.reverse('') // this.msg = ap.join('') //Abbreviation this.msg = this.msg.split('').reverse().join('') }, } }