Vue learning summary

Come on, get up 2020-11-08 20:18:42
vue learning summary


vue Project operation process

  1. package.json In execution npm run dev When , Will look in the current directory for package.json file , It's kind of similar Maven Of pom.xml file , Contains the name version of the project 、 Project dependency and other related information

  2. webpack.dev.conf.js As you can see from the following figure , start-up npm run dev After the command , Will load build/webpack.dev.conf.js Configure and start webpack-dev-server .

  3. config*.js webpack.dev.conf.js There are a lot of modules introduced in , Among them is config Directory server environment configuration file .

  4. config/index.js You can see , stay index.js The file contains the server host and port And the relevant configuration of the entry file , The default boot port is 8080, It can be modified here .

  5. index.html index.html It's very simple , Mainly to provide a div to vue mount .

  6. main.js main.js in , Introduced vue、App and router modular , Created a Vue object , And put App.vue The contents of the template are mounted to index.html Of id by app Of div Under the label , And bound to a routing configuration .

  7. App.vue above main.js hold App.vue The content of the template , Placed in index.html Of div Under the label . see App.vue We see , The content of this page consists of a logo And an object to be placed router-view,router-view The content of will be by router Configuration decision .

  8. index.js see route In the catalog index.js, We found a route configured here , In the access path / When , Will be able to HelloWorld The content of the template is placed on top of router-view in .

  9. HelloWorld.vue HelloWorld There are mainly some Vue Introduce the display content .

  10. Page composition therefore , The composition of page relations is index.html contain App.vue,App.vue contain HelloWorld.vue .

vue grammar

first vue application

  1. Use vue Before you import
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
  1. body Create a view layer inside , That is, a div
<div id="app">
{{ message }}
</div>`
  1. body Inside script Code , establish vue object , And register the view layer declaration object , And initialize
<script type="text/javascript">
var app1 = new Vue({ //new Vue when , You need to pass an object as an argument 
el: '#app', //el namely element, use Id The selector selects div
data:{ // Used to save data , What variables are declared in the view , Here we need to register some variables , And initialize the assignment 
message:'hello word!',
}
});
</script>

vue Common data and methods

  1. Section 1 , We initialize variables in data Carry out inside , We can also state one var Variable to initialize
var date = {a:1}; //a assignment 1
var vm = new Vue({
el: '#app',
data: date // Direct will date Assign a value to data
});
  1. The variable a When modifying the value , We have many ways
date.a = 'hello'; // You can modify this directly a Value 
vm.a = 'hello'; // The result is the same as above 
  1. vue Expose some commonly used variables, such as Object.$data and Objece.$el, So you can modify variables like this
vm.$data.a = 'hello';
  1. vue Some common methods are also exposed

Object.freeze() Function prevents modification of existing properties

Object.$watch You can observe the value of a variable before and after , Such as :

<div id="app">
{{ a }}
</div>
<script type="text/javascript">
var date = {a:1}; //a assignment 1
var vm = new Vue({
el: '#app',
data: date // Direct will date Assign a value to data
});
vm.$watch('a', function(newval, oldval){
console.log(newval, oldval);
});
vm.$data.a = 'sda';
</script>

Then the console will print out sda 1, namely a The changed value of the variable and the previous value

Vue Life cycle of

  1. beforeCreate function

Before instance initialization , The data observed (data obsever) and event/watcher The event configuration is called before

beforeCreate:function(){
console.log('beforeCreate');
},
  1. created

It is called immediately after the instance is created , In this step , The instance has completed the following configuration : The data observed (data observer), Operations on properties and methods ,watch/event Event callback . However , The mount phase has not yet begun ,$el Properties are not currently visible

created:function(){
console.log('created');
},
  1. beforeMount

Called before the mount begins , The relevant render function is called for the first time

beforeMount:function(){
console.log('beforeMount');
},
  1. mounted

el Newly created vm.$el Replace , Mount successfully

mounted:function(){
console.log('mounted');
},
  1. beforeUpdate

Call... When data is updated

beforeUpdate:function(){
console.log('beforeUpdate');
},
  1. updated

Components DOM Has been updated , Component update complete

updated:function(){
console.log('updated');
}

The comprehensive use of declaration cycle

<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg : 'hello vue',
},
beforeCreate:function(){
console.log('beforeCreate');
},
created:function(){
console.log('created');
},
beforeMount:function(){
console.log('beforeMount');
},
mounted:function(){
console.log('mounted');
},
beforeUpdate:function(){
console.log('beforeUpdate');
},
updated:function(){
console.log('updated');
}
});
setTimeout(function(){
vm.msg = 'change';
},3000);
</script>

give the result as follows

beforeCreate
created
beforeMount
mounted
Download the Vue Devtools extension for a better development experience:https://github.com/vuejs/vue-devtools
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
beforeUpdate
updated

interpolation

  1. vue Usually use {{ value }} To interpolate into the page
<div id="app">
<p>{{msg}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'hi vue',
}
});
</script>
  1. v-once attribute use v-once Attribute modified div In the label {{ Variable }} Value , Only once
<div id="app">
<p v-once>{{msg}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'hi vue',
}
});
vm.msg = 'hi...' ;
console.log(vm.msg);
</script>

The result of this code , It still shows “hi vue” instead of “hi···”

  1. v-bind Attribute can implement dynamic binding element attribute for example , Here's an example , Dynamic settings div Of class
<div id="app">
<div v-bind:class="color">test...</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
color: 'blue',
}
});
console.log(vm.msg);
</script>
<style type="text/css">
.blue{color: blue; font-size: 60px;}
</style>

This property can be implemented , Click the button to change the element style

  1. v-html attribute , You can insert a paragraph dynamically html Code Take the following example , Insert a line html Code
<div id="app">
<p v-html="rawHtml"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
rawHtml: '<span style="color:red">this is should be red</span>',
}
});
vm.msg = 'hi...' ;
console.log(vm.msg);
</script>
<style type="text/css">
.red{color:red;}
</style>
  1. vue Support in {{ }} Join in JavaScript Code
  • {{ number + 1 }}
  • Ternary operator {{ 1 == 1 ? 'yes' : 'no'}}
  • Some functions {{message.split('').reverse().join('')}}. among ,split('') To express with ‘’ The character segmentation inside message;reverse() Indicates inversion ;join('') To express with () The characters in it are reassembled . Be careful ,split After segmentation, a single character array is formed .reverse The reverse is also an array of characters .
<div id="app">
<p>{{ msg.split('').reverse().join('.') }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'vue',
}
});
console.log(vm.msg);
</script>

The result will output e.u.v

vue Instructions

  1. v-if And v-else Instructions ,vue Through these two instructions , according to Vue Object to dynamically select the execution statement
<div id="app">
<p v-if="seen"> Now you see me </p>
<p v-else="seen"> You shouldn't have seen me </p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
seen: 'false',
}
});
console.log(vm.msg);
</script>

The result will output You shouldn't have seen me And then there is v-else-if, Used to act as ,if hinder else if.

  1. v-bind Properties support dynamic modification attribute
<div id="app">
<a v-bind:href="url"> Hyperlinks </a>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
url: 'https://cn.vuejs.org/v2/guide/installation.html',
}
});
console.log(vm.msg);
</script>
  1. vue Of @click function vue Can pass @click Function dynamically binds a function
<div id="app">
<div @click="click1">
<div @click.stop="click2">
click me
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
url: 'https://cn.vuejs.org/v2/guide/installation.html',
}
}),
method:{
click1:function(){
console.log('click1...');
}
},
click2:function(){
console.log('click2...');
}
</script>

Execution results

click2...

It should have been exported first click2 At output click1, But because we're inside div There's a @click.stop="click2", So at the end of the execution click2 Then pause , So there's no outside execution div Function of click1

v-bind binding style And class

  1. The code is as follows
<div id="app">
<div
class="test"
v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '' ]">
hi vue
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
isActive: 'true',
isGreen: 'true'
}
});
</script>
<style type="text/css">
.active{background-color: #0000FF;}
.green{color: #000000;}
</style>

result :hi vue It's going to be blue in the background (#0000FF), The font color is black (#000000)

vue Conditions apply colours to a drawing

  1. v-if,v-else-if,v-else
<div id="app">
<div v-if = "type === 'A'">
now is A
</div>
<div v-else-if = "type === 'B'">
now is B
</div>
<div v-else-if="type === 'C'">
now is C
</div>
<div v-else>
no A/B/C
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
type:"",
}
});
</script>
  1. v-if And v-show v-if If not, it will not render into the code , however v-show Whether it will still render into the code , Knowledge modifies the elements of CSS by display

v-for

  1. Traverse in order to vue The value of the object
<div id="app">
<ul>
<li v-for="item in items">
{{item.msg}}
</li>
</ul>
<ul>
<li v-for = "value,key in values" >
{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
items:[
{msg:"aaa"},
{msg:"bbb"}
],
values:{
name:"levide",
age:"19",
sex:"man"
}
}
});
</script>

The running result is

·aaa
·bbb
·levide
·19
·man

Event binding

We go through v-on Property to bind an event , This incident can be a direct JavaScript sentence , Or a function name .

<div id="app">
<button type="button" v-on:click="date += 1"> The number :{{date}}</button><br/>
<button v-on:click="hello(name,$event)"> welcome </button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
date : 0,
name : 'levide',
},
methods:{
hello:function(str,e){
alert(str);
console.log(e);
}
}
});
</script>

Running results ,

  1. Click the first button , The value is automatically increased by one , All the time, all the time
  2. Click the second button , Pop up warning , And print the event on the console

Form input binding

We go through v-model Binding in both directions , Once revised , Modify both sides

  1. Single line text bidirectional binding
<div id="example-1">
<input v-model="msg1" />
<p> You entered :{{ msg1 }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
msg1:" Please input ",
},
});
</script>

Results show , What to enter in the form ,<p> The tag is modified in real time

  1. Multiline text bidirectional binding
<div id="example-2">
<textarea v-model="msg2"></textarea>
<p> You entered :{{msg2}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
msg2:" Please input ",
},
});
</script>

The result is also real-time transformation

  1. Check boxes are bound in both directions
<div id="example-3">
<input type="checkbox" name="1" id="jack" value="jack" v-model="msg3" />
<label for="jack">jack</label>
<input type="checkbox" name="2" id="tom" value="tom" v-model="msg3" />
<label for="tom">tom</label>
<input type="checkbox" name="3" id="daming" value="daming" v-model="msg3" />
<label for="daming">daming</label>
<p> You chose :{{msg3}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
msg3:[], // Here, because the check box is an array , So use [] Accept 
},
});
</script>

result , What to choose [] Just add something to it

  1. Radio box two way binding
<div id="example-4">
<input type="radio" name="1" id="one" value="jack" v-model="msg4" />
<label for="one">jack</label>
<input type="radio" name="2" id="two" value="tom" v-model="msg4" />
<label for="one">Tom</label>
<input type="radio" name="1" id="one" value="daming" v-model="msg4" />
<label for="one">daming</label>
<p> You chose :{{ msg4 }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
msg4:"",
},
});
</script>

result , What to choose [] Just add something to it

  1. Combine all the two-way binding on the front , We submit the form
<div id="app">
<div id="example-1">
<input v-model="msg1" />
<p> You entered :{{ msg1 }}</p>
</div>
<div id="example-2">
<textarea v-model="msg2"></textarea>
<p> You entered :{{msg2}}</p>
</div>
<div id="example-3">
<input type="checkbox" name="1" id="jack" value="jack" v-model="msg3" />
<label for="jack">jack</label>
<input type="checkbox" name="2" id="tom" value="tom" v-model="msg3" />
<label for="tom">tom</label>
<input type="checkbox" name="3" id="daming" value="daming" v-model="msg3" />
<label for="daming">daming</label>
<p> You chose :{{msg3}}</p>
</div>
<div id="example-4">
<input type="radio" name="1" id="one" value="jack" v-model="msg4" />
<label for="one">jack</label>
<input type="radio" name="2" id="two" value="tom" v-model="msg4" />
<label for="one">Tom</label>
<input type="radio" name="1" id="one" value="daming" v-model="msg4" />
<label for="one">daming</label>
<p> You chose :{{ msg4 }}</p>
</div>
<button v-on:click="submit"> Submit </button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
msg1:" Please input ",
msg2:" Please input carefully ",
msg3:[],
msg4:"",
},
methods:{
submit:function(){
var test = {
msg11 : this.msg1,
msg22 : this.msg2,
msg33 : this.msg3,
msg44 : this.msg4
};
console.log(test);
}
}
});
</script>

Results the console prints out :

{"msg11":" Please input ","msg22":" Please input carefully ","msg33":["jack","tom"],"msg44":"jack"}

Component basis

Components are reusable vue example , In the development process, we often encapsulate repetitive functions as components , To achieve the purpose of rapid and convenient development .vue use vue.component Function to create a component , The first parameter is the description of the component , The second parameter is “ Describe a component as an object ”

  1. Binding example . In this case , We give button Bound to a component , This component defines a template , The template is bound with functions , Share at the same time vue object
<div id="app">
<button1 title = "button1"></button1>
</div>
<script type="text/javascript">
Vue.component('button1',{
props:['title'],
data:function(){
return{
count:0
}
},
template:'<button v-on:click="clickCount">{{title}} You ordered {{count}} Time </button>',
});
var vm = new Vue({
el:'#app',
data:{
},
});
</script>

result , The interface generates a button , Every time I click on one , Add one to the number

  1. Components can share
<div id="app">
<button1 title = "button1"></button1>
<button1 title="button2"></button1>
</div>
<script type="text/javascript">
Vue.component('button1',{
props:['title'],
data:function(){
return{
count:0
}
},
template:'<button v-on:click="clickCount">{{title}} You ordered {{count}} Time </button>',
});
var vm = new Vue({
el:'#app',
data:{
},
});
</script>

result : The interface generates two buttons , The components of each button are independent of each other . Although the value of each button will be increased by one , But add your own , They don't interfere with each other

  1. Components can listen to among emit Events are used for , Trigger events on the current instance , The second parameter is just a passing parameter
<div id="app">
<button1 title = "button1"></button1>
<button1 title="button2"></button1>
</div>
<script type="text/javascript">
Vue.component('button1',{
props:['title'],
data:function(){
return{
count:0
}
},
template:'<button v-on:click="clickCount">{{title}} You ordered {{count}} Time </button>',
methods:{
clickCount:function(){
this.count++;
this.$emit('clicknow',this.count);
}
}
});
var vm = new Vue({
el:'#app',
data:{
},
methods:{
clicknow:function(e){
console.log(e);
}
}
});
</script>

Local registration component

Global components can cause a waste of space , Because there may be : Component not used , But users still have to download , This causes users to download JavaScript The uselessness of resources

  1. Local registration Demo
<div id="app">
<test></test>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
},
components:{
test:{
template:'<h2>sss</h2>'
}
}
});
</script>

# Single file component Global components work well in small projects , But in complex projects , Some problems will become very obvious :

  • Global definitions force each component to be named differently
  • String template lacks highlight , stay HTML When there are many lines , Need to use ugly \
  • I won't support it CSS signify HTML and JavaScript In componentization ,CSS Obviously omitted
  • There are no build steps
  1. establish vue project
  • Command line ,vue ui, open UI Interface
  • And then click create, Enter the project name , Click Create
  • Close the command line 、 Close the browser
  • Open the project directory , Drag in Hbuilder
  1. vue Project directory Introduction
  • public For us to write the entry file after the project
  • src Document the project for us , Inside component File is a single file component ,
  • app.vue Entry file for project
  1. vue Project brief introduction
  • among template As a template 、 View ;
  • script For the script area ;
  • style For the style area
  1. vue Project writing
  • First in template It's a template
  • And then script It declares the properties of this component ( use props)、 data ( Including the type type、 The default value is default). You can also use methods The method of declaring this component ,data Register the data corresponding to this component
  • stay app.vue This component is introduced into it , adopt import Introduce this component
  • After introduction , stay component It's a local registration
  • After registration , You can do it in div This component is referenced in Example : test.vue file
<template>
<h2> Ha ha ha ha </h2>
</template>
<script>
export default{
name:'test',
props:{
msg:{
type:String,
default:"test msg"
}
},
methods:{
},
data(){
return{
}
},
}
</script>
<style>
</style>

app.vue file

<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<test></test>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import test from './components/test.vue'
export default {
name: 'App',
components: { // Partial registration 
HelloWorld,
test
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

After this , The project ran successfully

版权声明
本文为[Come on, get up]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple