Madness - Vue notes

Notes from: Vue quick start   https://www.bilibili.com/video/BV18E411a7mC Video sorting

1. css

2. JavaScript

2.1. Commissioning

    
  1. // Print variables in the browser console
  2. console. log(num);

2.2. Data type

Number

    
  1. // js does not distinguish between decimal and integer Number
  2. 123 // integer
  3. 123.1 // Floating point number
  4. 1.123e3 // Scientific counting method
  5. -99 // negative
  6. NAN // not a number
  7. Infinity // infinity

character string

    
  1. 'abc'
  2. "abc"
  3. // Escape character
  4. \t
  5. \n
  6. \u4e2d // \U###### Unicode characters
  7. \x41 // Ascll character
  8. // Multiline string
  9. let msg = `I love you!
  10. China!`
  11. // Template string (must be inside quotation marks of multiline string)
  12. <script>
  13. 'use strict'
  14. let name = "Zhang San"
  15. let msg = `How do you do, ${name}`
  16. console. log(msg)
  17. </script>

Boolean value

    
  1. true
  2. false

Logical operation

&& || !

    

Comparison operator

    
  1. = // assignment
  2. == // Equal to (if the type is different and the value is the same, it will also be judged as true)
  3. === // Absolutely equal to (same type, same value, same result) true)
  4. NaN === NaN // false
  5. isNaN( NaN) // true

null and undefined

    
  1. null // empty
  2. undefined // Undefined

array

    
  1. let arr = [ 1, 2, 'a', "hello", null, true] // When the array is out of bounds, it is undefined
  2. arr.length // Array length
  3. arr.indexOf( 2) // Subscript index
  4. arr.slice() // section
  5. arr.push() // Press in to the rear
  6. arr.pop() // Pop up an element at the end
  7. arr.shift() // Press into the head
  8. arr.unshift() // Pop up an element in the header
  9. arr.sort() // sort
  10. arr. join() // Use a specific number of character splices to form a string
  11. arr.concat() // Splice array
  12. ...

object

All keys in JavaScript are strings and values are arbitrary objects!

    
  1. var person = {
  2. name: "xiaofan",
  3. age: 3,
  4. tags: [ 'js', 'java', 'web', '...']
  5. }
  6. // Object Assignment
  7. person. sex = 'nv'
  8. // Use non-existent object properties
  9. person. hobby
  10. undefined
  11. // Dynamic deletion attribute
  12. delete person. name
  13. // Add attributes dynamically
  14. person. info = 'info';
  15. // Judge whether the attribute value is' xxx 'in XXX in this object!
  16. 'age' in person (person. hasOwnProperty( 'age'))

2.3. Strict inspection mode

2.4. Process control

    
  1. let arr = [ 100, 200, 'a', 'b', true]
  2. for ( let i = 0; i < arr. length; i++) {
  3. console. log(arr[i])
  4. }
  5. console. log( "============")
  6. for ( let i in arr) {
  7. console. log(arr[i])
  8. }
  9. console. log( "============")
  10. for ( let arrElement of arr) {
  11. console. log(arrElement)
  12. }
  13. console. log( "============")
  14. arr. forEach( function ( e){
  15. console. log(e)
  16. })

2.5. Map and Set

    
  1. <script>
  2. "use strict"
  3. let map = new Map([[ 'tom', 1000],[ 'jack', 999],[ 'Bob', 888]])
  4. let score = map. get( 'tom')
  5. console. log(score)
  6. map. set( 'admin', 123456)
  7. map. delete( "tom")
  8. let set = new Set([ 1, 2, 3, 4, 5])
  9. set. delete( 1)
  10. console. log(set. has( 3))
  11. console. log( "======")
  12. for ( let number of set) {
  13. console. log(number)
  14. }
  15. </script>
  • Note: the difference between for.. in and for.. of when traversing arr

2.6. Function

    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <script>
  7. // Definition method 1
  8. function f1( x) {
  9. console. log( typeof x)
  10. if (x >= 0) {
  11. return x
  12. } else {
  13. return -x
  14. }
  15. }
  16. // Definition mode 2
  17. // typeof detects the type of the variable
  18. let f2 = function ( x) {
  19. // Throw exception manually
  20. if ( typeof x !== "number") {
  21. throw "Not a num!"
  22. }
  23. if (x >= 0) {
  24. return x
  25. } else {
  26. return -x
  27. }
  28. };
  29. // arguments gets all parameters
  30. function f3( x) {
  31. console. log(x)
  32. console. log( typeof x)
  33. console. log( "=====")
  34. console. log( arguments)
  35. }
  36. // ... rest ID to get the remaining parameters
  37. function f4( x, ...rest1) {
  38. console. log(x)
  39. console. log( typeof x)
  40. console. log( "=====")
  41. console. log(rest1)
  42. }
  43. </script>
  44. </head>
  45. <body>
  46. </body>
  47. </html>

2.7. Scope of variable

JQuery. ===> $()

2.8. Method

    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <script>
  7. 'use strict'
  8. // Method 1
  9. let xf1 = {
  10. name: 'Xiao Fan',
  11. birth: 1991,
  12. // method
  13. age: function ( ) {
  14. let now = new Date(). getFullYear();
  15. // this points to the object that calls it
  16. return now - this. birth;
  17. }
  18. }
  19. // Method 2
  20. function getAge( ) {
  21. let now = new Date(). getFullYear();
  22. // this points to the object that calls it
  23. return now - this. birth;
  24. }
  25. let xf2 = {
  26. name: 'Xiao faner',
  27. birth: 2000,
  28. age: getAge
  29. }
  30. // xf2.age() ok
  31. // getAge() error
  32. // apply changes the direction of this in the getAge method
  33. let result1 = getAge. apply(xf1, []);
  34. let result2 = getAge. apply(xf2, []);
  35. console. log(result1, result2)
  36. </script>
  37. </head>
  38. <body>
  39. </body>
  40. </html>

2.9. Internal objects

    
  1. // Standard object
  2. typeof 123
  3. "number"
  4. typeof '123'
  5. "string"
  6. typeof true
  7. "boolean"
  8. typeof NaN
  9. "number"
  10. typeof []
  11. "object"
  12. typeof {}
  13. "object"
  14. typeof Math. abs
  15. "function"
  16. typeof undefined
  17. "undefined"

2.9.1. Date

    
  1. // Date
  2. <script>
  3. let now = new Date();
  4. now. getFullYear();
  5. now. getMonth(); // 0 ~ November
  6. now. getDate(); // day
  7. now. getDay();
  8. now. getHours();
  9. now. getMinutes();
  10. now. getSeconds();
  11. now. getTime(); // Get timestamp
  12. now. toLocaleString()
  13. now. toUTCString()
  14. </script>

2.9.2. JSON

    
  1. <script>
  2. 'use strict'
  3. let user = {
  4. name: "xiaofan",
  5. age: 3,
  6. set: 'male'
  7. }
  8. // Object to json string
  9. let jsonUser = JSON. stringify(user);
  10. // Convert Json string to object
  11. let userBean = JSON. parse( '{"name":"xiaofaner","age":28,"set":"male"}');
  12. </script>

2.9.3. Ajax

  • Native js writing, xhr asynchronous request
  • jQuery encapsulated method $("#name").ajax("")
  • axios request

2.10 object oriented programming

  • Object oriented prototype inheritance
    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <script>
  7. 'use strict'
  8. let student = {
  9. name: "qinjiang",
  10. age: 3,
  11. run: function ( ) {
  12. console. log( this. name + " run...")
  13. }
  14. };
  15. let xf = {
  16. name: "xiaofan"
  17. }
  18. // The prototype object of xf is student
  19. xf. __proto__ = student
  20. // Add a new method to ss
  21. function ss( name) {
  22. this. name = name;
  23. }
  24. ss. prototype. hello = function ( ) {
  25. alert( "hello")
  26. }
  27. </script>
  28. </head>
  29. <body>
  30. </body>
  31. </html>
  • Class oriented inheritance
    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <script>
  7. 'use strict'
  8. class Student {
  9. constructor( name) {
  10. this. name = name;
  11. }
  12. hello( ) {
  13. alert( 'hello student..');
  14. }
  15. }
  16. class SmallStudent extends Student {
  17. constructor( name, grade) {
  18. super(name);
  19. this. grade = grade;
  20. }
  21. myGrade( ) {
  22. alert( "I'm a pupil..");
  23. }
  24. }
  25. let student = new Student( "xiaofan")
  26. let smallStudent = new SmallStudent( "xiaofaner", 22)
  27. </script>
  28. </head>
  29. <body>
  30. </body>
  31. </html>

Essence: or prototype

2.11. Operating BOM object

BOM (browser object model): Browser Object Model

Window browser window

navigator encapsulates browser information

Screen screen size

location represents the URL information of the current page

    
  1. host: "www.baidu.com"
  2. hostname: "www.baidu.com"
  3. href: "https://www.baidu.com/"
  4. origin: "https://www.baidu.com"
  5. pathname: "/"
  6. port: ""
  7. protocol: "https:"
  8. reload() //Reload page
  9. location.assign( 'https: //jd.com ') / / set a new address

document represents the current page

history

    
  1. history.back() // back off
  2. history.forward() // forward

2.12. Operating DOM objects (core)

  • DOM: Document Object Model

  • Get node

    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. </head>
  7. <body>
  8. <div id="father">
  9. <h1>Title 1 </h1>
  10. <p id="p1">p1 </p>
  11. <p class="p2">p2 </p>
  12. </div>
  13. <script>
  14. let h1 = document. getElementsByTagName( "h1");
  15. let p1 = document. getElementById( "p1");
  16. let p2 = document. getElementsByClassName( "p2");
  17. let father = document. getElementById( "father");
  18. let children = father. children // Gets all child nodes under the parent node
  19. father. lastChild
  20. father. firstChild
  21. </script>
  22. </body>
  23. </html>
  • Update node
    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. </head>
  7. <body>
  8. <div id="id1"> </div>
  9. <script>
  10. let div = document. getElementById( "id1")
  11. // Operation text
  12. div. innerText = "123";
  13. div. innerHTML = "<strong>123</strong>"
  14. // Operation JS
  15. div. style. color= 'red'
  16. div. style. fontSize= '22px'
  17. div. style. padding= '2em'
  18. </script>
  19. </body>
  20. </html>
  • Delete Vertex

  • Insert Knot
    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. </head>
  7. <body>
  8. <p id="js">JavaScript </p>
  9. <div id="list">
  10. <p id="se">JavaSE </p>
  11. <p id="ee">JavaEE </p>
  12. <p id="me">JavaME </p>
  13. </div>
  14. <script>
  15. let js = document. getElementById( 'js');
  16. let list = document. getElementById( 'list');
  17. // Append node
  18. // list.appendChild(js)
  19. let newP = document. createElement( 'p');
  20. newP. id= 'newP';
  21. newP. innerText = 'Hello xiaofan!';
  22. list. appendChild(newP)
  23. // Set background color
  24. let body = document. getElementsByTagName( "body")[ 0];
  25. body. style. backgroundColor = "#ff00f0"
  26. // Insert a new node in front of a node
  27. let ee = document. getElementById( "ee");
  28. list. insertBefore(js, ee);
  29. </script>
  30. </body>
  31. </html>

2.13. Operation form

    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. </head>
  7. <body>
  8. <form method="post">
  9. <p>
  10. <span>user name: </span> <input type="text" id="username"/>
  11. </p>
  12. <p>
  13. <span>Gender: </span>
  14. <input type="radio" name="sex" value="1" id="boy" checked /> male
  15. <input type="radio" name="sex" value="2" id="girl" /> female
  16. </p>
  17. </form>
  18. <script>
  19. let input_text = document. getElementById( "username");
  20. let boy = document. getElementById( "boy");
  21. let girl = document. getElementById( "girl");
  22. console. log(boy. checked);
  23. boy. checked = true
  24. </script>
  25. </body>
  26. </html>
  • Hide the field form submission verification and encrypt the password
    
  1. // MD5 remote library https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Title </title>
  7. <!--md5 Tool class-->
  8. <script src="myMd5.js"> </script>
  9. </head>
  10. <body>
  11. <form method="post" onsubmit="return check();">
  12. <p>
  13. <span>user name: </span> <input type="text" id="username" name="username"/>
  14. </p>
  15. <p>
  16. <span>dense &nbsp; &nbsp; &nbsp;Code: </span> <input type="password" id="input-password"/>
  17. </p>
  18. <input type="hidden" id="md5-password" name="password"/>
  19. <input type="submit">
  20. </form>
  21. <script>
  22. function check( ) {
  23. let name = document. getElementById( "username");
  24. let inputPwd = document. getElementById( "input-password");
  25. let md5Pwd = document. getElementById( "md5-password");
  26. // password.value = md5(password.value)
  27. md5Pwd. value = md5(inputPwd. value);
  28. console. log(name. value)
  29. console. log(inputPwd. value)
  30. console. log(md5Pwd. value)
  31. return false
  32. }
  33. </script>
  34. </body>
  35. </html>

be careful:
1. You can copy the remote library to the original!
2.onsubmit binds a submission detection function. When this function returns false, the form request will be intercepted. When this function returns true, the form will be submitted normally

3. JQuery

3.1. The first Jquery program

    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"> </script>
  7. </head>
  8. <body>
  9. <a href="" id="test-jquery">Point me </a>
  10. <script>
  11. // Formula $(selector). Action (method)
  12. $( "#test-jquery"). click( function ( ) {
  13. alert( "hello jquery!")
  14. })
  15. </script>
  16. </body>
  17. </html>

3.2. Selector

3.3. Events

    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"> </script>
  7. <style>
  8. #divMove{
  9. width: 500px;
  10. height: 500px;
  11. border: 1px solid red;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <!--Requirement: obtain the current coordinate of the mouse-->
  17. mouse: <span id="mouseMove"> </span>
  18. <div id="divMove">
  19. Move around here
  20. </div>
  21. <script>
  22. $( "#divMove"). mousemove( function ( e) {
  23. $( "#mouseMove"). text( `x: ${e.pageX}, y: ${e.pageY}`)
  24. })
  25. </script>
  26. </body>
  27. </html>

3.4. JQuery operation DOM

    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"> </script>
  7. </head>
  8. <body>
  9. <ul id="test-ul">
  10. <li class="js">JavaScript </li>
  11. <li name="python">Python </li>
  12. </ul>
  13. <script>
  14. // Get value
  15. let text1 = $( "#test-ul li[name=python]"). text();
  16. let text2 = $( "#test-ul li[class=js]"). text();
  17. console. log(text1)
  18. console. log(text2)
  19. // Set value
  20. $( "#test-ul li[class=js]"). text( "JS");
  21. // Set css Style
  22. $( "#test-ul li[name=python]"). css({ "color": "#ff0011", "background": "blue" })
  23. // Display and hiding of elements
  24. $( "#test-ul li[name=python]"). show()
  25. $( "#test-ul li[name=python]"). hide()
  26. // More view documents
  27. // https://jquery.cuishifeng.cn/
  28. </script>
  29. </body>
  30. </html>
  • Source code house
  • Element UI
  • Ant Design
  • Bootstrap

3.5. Ajax

  • AJAX = Asynchronous JavaScript and XML.
  • Ajax is not a new programming language, but a technology for creating better, faster and more interactive Web applications.
  • jQuery is not a producer, but a nature porter.
  • The essence of jQuery Ajax is XMLHttpRequest, which is encapsulated and easy to call!

3.5.1. Fake Ajax

    
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>xiaofan </title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. 'use strict'
  10. window. onload = function( ){
  11. let myDate = new Date();
  12. document. getElementById( 'currentTime'). innerText = myDate. toLocaleString()
  13. };
  14. function LoadPage( ){
  15. let targetUrl = document. getElementById( 'url'). value;
  16. console. log(targetUrl);
  17. document. getElementById( "iframePosition"). src = targetUrl;
  18. }
  19. </script>
  20. <div>
  21. <p>Please enter the address to load: <span id="currentTime"> </span> </p>
  22. <p>
  23. <input id="url" type="text" value="https://www.baidu.com/"/>
  24. <input type="button" value="Submit" onclick="LoadPage()">
  25. </p>
  26. </div>
  27. <div>
  28. <h3>Load page location: </h3>
  29. <iframe id="iframePosition" style="width: 100%;height: 500px;"> </iframe>
  30. </div>
  31. </body>
  32. </html>

3.5.2. Ajax format

    
  1. jQuery.ajax(...)
  2. Some parameters:
  3. url: Request address
  4. type: Request method, GET,POST(1.9.0 Later use method)
  5. headers: Request header
  6. data: Data to send
  7. contentType: The content encoding type of the message to be sent to the server(default: "application/x-www-form-urlencoded; charset=UTF-8")
  8. async: Asynchronous
  9. timeout: Set request timeout (MS)
  10. beforeSend: Function executed before sending the request(overall situation)
  11. complete: Callback function executed after completion(overall situation)
  12. success: Callback function executed after success(overall situation)
  13. error: Callback function executed after failure(overall situation)
  14. accepts: Send the request to the server and tell the server the data type acceptable to the current client
  15. dataType: Converts the data returned by the server to the specified type
  16. "xml": Convert the content returned by the server into xml format
  17. "text": Convert the content returned by the server to normal text format
  18. "html": Convert the content returned by the server into normal text format and insert DOM If it contains JavaScript Tag, it will try to execute.
  19. "script": Try to treat the return value as JavaScript To execute, and then convert the content returned by the server into normal text format
  20. "json": Convert the content returned by the server into the corresponding JavaScript object
  21. "jsonp": JSONP Format use JSONP When calling a function as "myurl?callback=?" jQuery Will automatically replace ? Give the correct function name to execute the callback function

4. Vue

4.1. First Vue program

  • idea install vue plug-in

    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <!--Import vue-->
  7. <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script>
  8. </head>
  9. <body>
  10. <!--view Layer template-->
  11. <div id="app">
  12. {{message}}
  13. </div>
  14. <script>
  15. 'use strict'
  16. /*Model data*/
  17. let vue = new Vue({
  18. el: "#app",
  19. data: {
  20. message: 'hello vue!'
  21. }
  22. })
  23. </script>
  24. </body>
  25. </html>

    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <!--Import vue-->
  7. <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script>
  8. </head>
  9. <body>
  10. <!--view Layer template-->
  11. <div id="app">
  12. <span v-bind:title="message">Hover the mouse for a few seconds to view the prompt information of dynamic binding here! </span>
  13. </div>
  14. <script>
  15. 'use strict'
  16. /*Model data*/
  17. let vue = new Vue({
  18. el: "#app",
  19. data: {
  20. message: 'hello vue!'
  21. }
  22. })
  23. </script>
  24. </body>
  25. </html>

4.2. Basic grammar

  • if
    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <!--Import vue-->
  7. <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script>
  8. </head>
  9. <body>
  10. <!--view Layer template-->
  11. <div id="app">
  12. <h1 v-if="type==='A'">A </h1>
  13. <h1 v-else-if="type==='B'">B </h1>
  14. <h1 v-else="type==='C'">C </h1>
  15. </div>
  16. <script>
  17. 'use strict'
  18. /*Model data*/
  19. let vue = new Vue({
  20. el: "#app",
  21. data: {
  22. message: 'hello vue!',
  23. type: 'A'
  24. }
  25. })
  26. </script>
  27. </body>
  28. </html>
  • for
    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <!--Import vue-->
  7. <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script>
  8. </head>
  9. <body>
  10. <!--view Layer template-->
  11. <div id="app">
  12. <p style='color:blue' v-for="item in items">{{item.message}} </p>
  13. </div>
  14. <script>
  15. 'use strict'
  16. /*Model data*/
  17. let vue = new Vue({
  18. el: "#app",
  19. data: {
  20. message: 'hello vue!',
  21. type: 'A',
  22. items: [{ message: 'Xiao Fan'},{ message: 'Trabecula'},{ message: 'Xiao Hong'}]
  23. }
  24. })
  25. </script>
  26. </body>
  27. </html>
  • event
    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <!--Import vue-->
  7. <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script>
  8. </head>
  9. <body>
  10. <!--view Layer template-->
  11. <div id="app">
  12. <button v-on:click="sayHi">Point me </button>
  13. </div>
  14. <script>
  15. 'use strict'
  16. /*Model data*/
  17. let vue = new Vue({
  18. el: "#app",
  19. data: {
  20. message: 'hello vue!',
  21. type: 'A',
  22. items: [{ message: 'Xiao Fan'},{ message: 'Trabecula'},{ message: 'Xiao Hong'}]
  23. },
  24. methods: {
  25. sayHi: function ( ) {
  26. alert( this. message)
  27. }
  28. }
  29. })
  30. </script>
  31. </body>
  32. </html>
  • Bidirectional binding
    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <!--Import vue-->
  7. <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script>
  8. </head>
  9. <body>
  10. <!--view Layer template-->
  11. <div id="app">
  12. <input type="text" v-model="message"/> {{message}}
  13. </div>
  14. <script>
  15. 'use strict'
  16. /*Model data*/
  17. let vue = new Vue({
  18. el: "#app",
  19. data: {
  20. message: ""
  21. }
  22. })
  23. </script>
  24. </body>
  25. </html>

    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <!--Import vue-->
  7. <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script>
  8. </head>
  9. <body>
  10. <!--view Layer template-->
  11. <div id="app">
  12. <select v-model="selected">
  13. <option value="" disabled>---Please select--- </option>
  14. <option>A </option>
  15. <option>B </option>
  16. <option>C </option>
  17. </select>
  18. {{selected}}
  19. </div>
  20. <script>
  21. 'use strict'
  22. /*Model data*/
  23. let vue = new Vue({
  24. el: "#app",
  25. data: {
  26. selected: ""
  27. }
  28. })
  29. </script>
  30. </body>
  31. </html>

4.3. vue components

    
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title </title>
  6. <!--Import vue-->
  7. <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"> </script>
  8. </head>
  9. <body>
  10. <!--view Layer template-->
  11. <div id="app">
  12. <xiaofan v-for="item in items" v-bind:xf="item"> </xiaofan>
  13. </div>
  14. <script>
  15. 'use strict'
  16. Vue. component( "xiaofan", {
  17. // props is required to pass data to components
  18. props: [ 'xf'],
  19. template: '<h1>{{xf}}</h1>'
  20. })
  21. /*Model data*/
  22. let vue = new Vue({
  23. el: "#app",
  24. data: {
  25. items: [ 'java', 'linux', 'python']
  26. }
  27. })
  28. </script>
  29. </body>
  30. </html>

4.4. Network communication Axios

Tags: Javascript Vue Vue.js

Posted on Thu, 14 Oct 2021 13:51:47 -0400 by roscor