Advanced use of vue.js

runner-up 2021-05-04 16:57:25
advanced use vue.js vue js


One . Communication between components

Data can be shared between components , The ways of communication between components are : Father son component 、 Child parent component 、 Brother component communication .

Two . Parent-child component communication

Pass the data share of the parent component to the child component ; The case requires that the parent component data “ I have a dollar ”, Share with subcomponents and show ;

2.1. The sample code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>vue Parent-child component communication </title>
 6 <script src="./js/vue.min.js"></script>
 7 <style>
 8  #app{
 9  height: 400px;
10  width:40%;
11  background-color: red;
12  margin: 0 auto;
13 }
14  .xs{
15  width:400px;
16  height:200px;
17  background-color:yellowgreen;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="app">
23 <h1> I'm the biggest root component --------{{msg}}</h1>
24 <son class="xs" :msg="msg"></son>
25 </div>
26 <template id="myson">
27 <div>
28 <h2> I am a subcomponent ~~~~~~~~{{msg}}</h2>
29 </div>
30 </template>
31 </body>
32 </html>
33 <script>
34 // establish vue example 
35 var vm = new Vue({
36  el:"#app",
37  data:{
38  msg:" I have a 1 Yuan "
39  },
40 // Create local components 
41  components:{
42 // Local components son
43  son:{
44  template:"#myson",
45  props:["msg"]
46  }
47  }
48  });
49 </script>

2.2. design sketch

 2.3. explain :

  • The parent component can be v-bind( Abbreviation “:”) Passing data to subcomponents in the form of dynamic attribute values .
  • Subcomponent pass props( Is an array ) Accept the data passed by the parent component .

3、 ... and . Child parent component communication

Share the data of the child component with the parent component ; Trigger by clicking on the event .

3.1. The sample code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>vue Child parent component communication </title>
 6 <script src="./js/vue.min.js"></script>
 7 <style>
 8  *{
 9  margin:0px;
10  padding:0px;
11 }
12  #app{
13  width:40%;
14  height:400px;
15  background-color: aqua;
16  margin:0px auto;
17 }
18  .cur{
19  width:40%;
20  height:200px;
21  background-color: coral;
22 }
23 </style>
24 </head>
25 <body>
26 <div id="app">
27 <h1> I'm wang Jianlin -------{{info}}</h1>
28 <wsc class="cur" @gift="get_gift($event)"></wsc>
29 </div>
30 <template id="wsc">
31 <div>
32 <h2> I'm panda TV sicong </h2>
33 <button @click="send"> Give me a panda TV</button>
34 </div>
35 </template>
36 </body>
37 </html>
38 <script>
39 var vm = new Vue({
40  el:"#app",
41  data:{
42  info:"123"
43  },
44  methods:{
45  get_gift(info){
46 this.info = info;
47  }
48  },
49  components:{
50  wsc:{
51  template:"#wsc",
52  data(){
53 return {
54  msg:" Panda TV"
55  }
56  },
57  methods:{
58 // And the way to pass data to the parent component 
59  send(){
60 // Trigger custom event gift, Through components $emit Method 
61 this.$emit("gift",this.msg);
62  }
63  }
64  }
65  }
66  })
67 </script>

3.2. design sketch

 

 

 

 3.3. explain :

  • Sub components need to pass $emit Method to trigger a custom event , The first parameter is the custom event name , The second parameter is the data passed to the parent component ;
  • The parent component accepts the data : On the two-point label of the subcomponent @ Custom event name + The function provided by the parent component is just ;

Four .vue-cli(vue The scaffold ) Use

4.1. install

stay cmd Execute command in window npm install -g vue-cli;

In command -g Represents the installation of two point tools that can be used in cmd The command line can be used in any directory ;

After installation, you can use vue -V Command to view the version

4.2. Use scaffolding to create vue project

4.2.1. open Windows PowerShell window

 

4.2.2. Switch the address to store vue Under the project folder , perform vue init webpackt myvueprj;

among myvueprj Is the name of the project to be created

 

 

  4.2.3. Wait for the project download to complete , Switch the address to the project (cd myvueprj), And then execute the command npm run dev Start project

 

  Then you can enter... In the browser http://localhost:8080 Visit the project

4.3. Development vue project

In the download build vue In the project , Complete the sharing of small cases and parent-child component data

 4.3.1. The sample code

4.3.1.1 modify App.vue file , After modification, the code is as follows

 1 <style>
 2 /* To write css The place of pattern */
 3  #mycou{
 4  color:dodgerblue;
 5  font-size: 40px;
 6 }
 7  #app{
 8  width:800px;
 9  height:600px;
10  background-color: #42b983;
11 }
12 </style>
13 <template>
14 <!-- To write html Where to code -->
15 <div id="app">
16 <h1>{{msg}}-----<span id="mycou">{{count}}</span></h1>
17 <son :count="count"></son>
18 <p>
19 <button @click="add"> Click me +1</button>
20 <button @click="minus"> Click me -1</button>
21 </p>
22 </div>
23 </template>
24 <script>
25 // Introduce subcomponents 
26  import son from "./components/son";
27  export default {
28  data(){
29 return{
30  msg:" my vue Scaffold project ",
31  count:"1"
32  }
33  },
34  methods:{
35  add(){
36 this.count++;
37  },
38  minus(){
39 this.count--;
40  }
41  },
42  components:{
43  son
44  }
45  };
46 </script>

4.3.1.2 Create a file to write subcomponents son.vue, The code is as follows

 1 <style>
 2  #son{
 3  width:600px;
 4  height:200px;
 5  background-color: red;
 6 }
 7 </style>
 8 <template>
 9 <div id="son">
10 <h2> I am a subcomponent -------{{count}}</h2>
11 </div>
12 </template>
13 <script>
14  export default {
15  props:["count"]
16  }
17 </script>

4.3.2. The renderings are as follows

 

 

Conclusion :

Develop as a back end ,vue There will be so many , Can understand the above 4 The content of a blog , To a vue The project can achieve “ It's understandable , Modifiable 、 Scalable ” The requirements of , still

It can be realized .vue So much for the update .......

版权声明
本文为[runner-up]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210504165533545A.html

  1. Gallop workflow engine design series 01 process element design
  2. VUE移动端音乐APP学习【十六】:播放器歌词显示开发
  3. Vue Mobile Music App learning [16]: player lyrics display development
  4. jquery cookie
  5. jquery cookie
  6. 体面编码之JavaScript
  7. JavaScript for decent coding
  8. React17 系统精讲 结合TS打造旅游电商平台
  9. React17 system combined with TS to build tourism e-commerce platform
  10. 2021-05-04 hot news
  11. HttpSession对象与Cooike的关系 以及 Cookie对象构造函数问题
  12. gRPC-Web:替代REST的gRPC的Javascript库包
  13. The relationship between httpsession object and cooike and the construction of cookie object
  14. Grpc Web: a JavaScript library package to replace rest grpc
  15. Building reactive rest API with Java - kalpa Senanayake
  16. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  17. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  18. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  19. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  20. Vue.js比jQuery更容易学习
  21. Node.js的Reactor模式 与异步编程
  22. Vue. JS is easier to learn than jQuery
  23. Reactor mode of node.js and asynchronous programming
  24. 详解JavaScript中的正则表达式
  25. Explain regular expressions in JavaScript
  26. 详解JavaScript中的正则表达式
  27. Explain regular expressions in JavaScript
  28. JS: closure
  29. Write your own promise in promises / A + specification
  30. Analysis of the core mechanism of webpack from loader, plugin to egg
  31. On the import and export of webpack
  32. Interpretation of lodash source code (2)
  33. Hexo series (5) writing articles
  34. 有人用过JMeter或用HttpUnit写过测试吗????
  35. Has anyone ever used JMeter or written tests in httpUnit????
  36. JavaScript异步编程4——Promise错误处理
  37. Leetcode 1846. Reduce and rearrange the largest element of an array
  38. JavaScript asynchronous programming 4 -- promise error handling
  39. SQLite是一种经典的无服务器Serverless
  40. 通过Spring Boot Webflux实现Reactor Kafka
  41. SQLite is a classic server less
  42. Realization of reactor Kafka through spring boot Webflux
  43. Focus on the basic knowledge of JS
  44. Node.js与Spring Boot比较? - Ryan Gleason
  45. Compare node.js with spring boot- Ryan Gleason
  46. 「HTML+CSS」自定义加载动画【049】
  47. 「HTML+CSS」自定义加载动画【048】
  48. 「HTML+CSS」--自定义加载动画【047】
  49. "HTML + CSS" custom loading animation [049]
  50. "HTML + CSS" custom loading animation [048]
  51. "HTML + CSS" -- custom loading animation [047]
  52. 使用Akka实现Reactive DDD
  53. Prototype与JQuery对比
  54. Using akka to realize reactive DDD
  55. Comparison between prototype and jquery
  56. Please elaborate the diff algorithm of Vue
  57. On the combination of ecarts and Baidu map, in the Intranet environment to develop offline map, to achieve point, line, range value.
  58. 使用Slonik框架基于Node.js和PostgreSQL处理大量数据
  59. Using slonik framework to process large amount of data based on node.js and PostgreSQL
  60. Netflix使用React制作高性能电视用户界面