Notes from: Vue quick start https://www.bilibili.com/video/BV18E411a7mC Video sorting
1. css
- Less Chinese network
- Quick start to Less
- webpack packaging
2. JavaScript
2.1. Commissioning
-
// Print variables in the browser console
-
console.
log(num);
2.2. Data type
Number
-
// js does not distinguish between decimal and integer Number
-
123
// integer
-
123.1
// Floating point number
-
1.123e3
// Scientific counting method
-
-99
// negative
-
NAN
// not a number
-
Infinity
// infinity
character string
-
'abc'
-
"abc"
-
-
// Escape character
-
\t
-
\n
-
\u4e2d // \U###### Unicode characters
-
\x41 // Ascll character
-
-
// Multiline string
-
let msg = `I love you!
-
China!`
-
-
// Template string (must be inside quotation marks of multiline string)
-
<script>
-
'use strict'
-
-
let name =
"Zhang San"
-
let msg =
`How do you do, ${name}`
-
console.
log(msg)
-
</script>
Boolean value
-
true
-
false
Logical operation
&& || !
Comparison operator
-
=
// assignment
-
==
// Equal to (if the type is different and the value is the same, it will also be judged as
true)
-
===
// Absolutely equal to (same type, same value, same result)
true)
-
-
NaN ===
NaN
//
false
-
isNaN(
NaN)
//
true
null and undefined
-
null
// empty
-
undefined
// Undefined
array
-
let arr = [
1,
2,
'a',
"hello",
null,
true]
// When the array is out of bounds, it is undefined
-
-
arr.length
// Array length
-
arr.indexOf(
2)
// Subscript index
-
arr.slice()
// section
-
arr.push()
// Press in to the rear
-
arr.pop()
// Pop up an element at the end
-
arr.shift()
// Press into the head
-
arr.unshift()
// Pop up an element in the header
-
arr.sort()
// sort
-
arr.
join()
// Use a specific number of character splices to form a string
-
arr.concat()
// Splice array
-
...
object
All keys in JavaScript are strings and values are arbitrary objects!
-
var person = {
-
name:
"xiaofan",
-
age:
3,
-
tags: [
'js',
'java',
'web',
'...']
-
}
-
-
// Object Assignment
-
person.
sex =
'nv'
-
// Use non-existent object properties
-
person.
hobby
-
undefined
-
// Dynamic deletion attribute
-
delete person.
name
-
// Add attributes dynamically
-
person.
info =
'info';
-
// Judge whether the attribute value is' xxx 'in XXX in this object!
-
'age'
in person (person.
hasOwnProperty(
'age'))
-
2.3. Strict inspection mode
2.4. Process control
-
let arr = [
100,
200,
'a',
'b',
true]
-
-
for (
let i =
0; i < arr.
length; i++) {
-
console.
log(arr[i])
-
}
-
console.
log(
"============")
-
-
for (
let i
in arr) {
-
console.
log(arr[i])
-
}
-
console.
log(
"============")
-
for (
let arrElement
of arr) {
-
console.
log(arrElement)
-
}
-
-
console.
log(
"============")
-
arr.
forEach(
function (
e){
-
console.
log(e)
-
})
2.5. Map and Set
-
<script>
-
"use strict"
-
let map =
new
Map([[
'tom',
1000],[
'jack',
999],[
'Bob',
888]])
-
let score = map.
get(
'tom')
-
console.
log(score)
-
map.
set(
'admin',
123456)
-
map.
delete(
"tom")
-
-
let set =
new
Set([
1,
2,
3,
4,
5])
-
set.
delete(
1)
-
console.
log(set.
has(
3))
-
-
console.
log(
"======")
-
for (
let number
of set) {
-
console.
log(number)
-
}
-
-
</script>
- Note: the difference between for.. in and for.. of when traversing arr
2.6. Function
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
-
<script>
-
// Definition method 1
-
function
f1(
x) {
-
console.
log(
typeof x)
-
if (x >=
0) {
-
return x
-
}
else {
-
return -x
-
}
-
}
-
-
// Definition mode 2
-
// typeof detects the type of the variable
-
let f2 =
function (
x) {
-
// Throw exception manually
-
if (
typeof x !==
"number") {
-
throw
"Not a num!"
-
}
-
if (x >=
0) {
-
return x
-
}
else {
-
return -x
-
}
-
};
-
-
// arguments gets all parameters
-
function
f3(
x) {
-
console.
log(x)
-
console.
log(
typeof x)
-
console.
log(
"=====")
-
console.
log(
arguments)
-
-
}
-
-
// ... rest ID to get the remaining parameters
-
function
f4(
x, ...rest1) {
-
console.
log(x)
-
console.
log(
typeof x)
-
console.
log(
"=====")
-
console.
log(rest1)
-
}
-
-
</script>
-
</head>
-
<body>
-
-
</body>
-
</html>
2.7. Scope of variable
JQuery. ===> $()
2.8. Method
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
-
<script>
-
'use strict'
-
// Method 1
-
let xf1 = {
-
name:
'Xiao Fan',
-
birth:
1991,
-
// method
-
age:
function (
) {
-
let now =
new
Date().
getFullYear();
-
// this points to the object that calls it
-
return now -
this.
birth;
-
}
-
}
-
-
// Method 2
-
function
getAge(
) {
-
let now =
new
Date().
getFullYear();
-
// this points to the object that calls it
-
return now -
this.
birth;
-
}
-
-
let xf2 = {
-
name:
'Xiao faner',
-
birth:
2000,
-
age: getAge
-
}
-
-
// xf2.age() ok
-
// getAge() error
-
// apply changes the direction of this in the getAge method
-
let result1 = getAge.
apply(xf1, []);
-
let result2 = getAge.
apply(xf2, []);
-
console.
log(result1, result2)
-
-
</script>
-
</head>
-
<body>
-
-
</body>
-
</html>
2.9. Internal objects
-
// Standard object
-
typeof
123
-
"number"
-
typeof
'123'
-
"string"
-
typeof
true
-
"boolean"
-
typeof
NaN
-
"number"
-
typeof []
-
"object"
-
typeof {}
-
"object"
-
typeof
Math.
abs
-
"function"
-
typeof
undefined
-
"undefined"
2.9.1. Date
-
// Date
-
<script>
-
let now =
new
Date();
-
now.
getFullYear();
-
now.
getMonth();
// 0 ~ November
-
now.
getDate();
// day
-
now.
getDay();
-
now.
getHours();
-
now.
getMinutes();
-
now.
getSeconds();
-
-
now.
getTime();
// Get timestamp
-
-
now.
toLocaleString()
-
-
now.
toUTCString()
-
</script>
2.9.2. JSON
-
<script>
-
'use strict'
-
let user = {
-
name:
"xiaofan",
-
age:
3,
-
set:
'male'
-
}
-
// Object to json string
-
let jsonUser =
JSON.
stringify(user);
-
// Convert Json string to object
-
let userBean =
JSON.
parse(
'{"name":"xiaofaner","age":28,"set":"male"}');
-
</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
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
-
<script>
-
'use strict'
-
let student = {
-
name:
"qinjiang",
-
age:
3,
-
run:
function (
) {
-
console.
log(
this.
name +
" run...")
-
}
-
};
-
-
let xf = {
-
name:
"xiaofan"
-
}
-
-
// The prototype object of xf is student
-
xf.
__proto__ = student
-
-
// Add a new method to ss
-
function
ss(
name) {
-
this.
name = name;
-
}
-
-
ss.
prototype.
hello =
function (
) {
-
alert(
"hello")
-
}
-
-
</script>
-
</head>
-
<body>
-
-
</body>
-
</html>
- Class oriented inheritance
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
-
<script>
-
'use strict'
-
class
Student {
-
constructor(
name) {
-
this.
name = name;
-
}
-
-
hello(
) {
-
alert(
'hello student..');
-
}
-
}
-
-
class
SmallStudent
extends
Student {
-
constructor(
name, grade) {
-
super(name);
-
this.
grade = grade;
-
}
-
-
myGrade(
) {
-
alert(
"I'm a pupil..");
-
}
-
}
-
-
let student =
new
Student(
"xiaofan")
-
let smallStudent =
new
SmallStudent(
"xiaofaner",
22)
-
</script>
-
</head>
-
<body>
-
-
</body>
-
</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
-
host:
"www.baidu.com"
-
hostname:
"www.baidu.com"
-
href:
"https://www.baidu.com/"
-
origin:
"https://www.baidu.com"
-
pathname:
"/"
-
port:
""
-
protocol:
"https:"
-
-
reload()
//Reload page
-
location.assign(
'https:
//jd.com ') / / set a new address
document represents the current page
history
-
history.back()
// back off
-
history.forward()
// forward
2.12. Operating DOM objects (core)
-
DOM: Document Object Model
-
Get node
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
</head>
-
<body>
-
-
<div id="father">
-
<h1>Title 1
</h1>
-
<p id="p1">p1
</p>
-
<p class="p2">p2
</p>
-
</div>
-
-
-
<script>
-
let h1 =
document.
getElementsByTagName(
"h1");
-
let p1 =
document.
getElementById(
"p1");
-
let p2 =
document.
getElementsByClassName(
"p2");
-
let father =
document.
getElementById(
"father");
-
let children = father.
children
// Gets all child nodes under the parent node
-
father.
lastChild
-
father.
firstChild
-
</script>
-
</body>
-
</html>
- Update node
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
</head>
-
<body>
-
<div id="id1">
</div>
-
-
<script>
-
let div =
document.
getElementById(
"id1")
-
// Operation text
-
div.
innerText =
"123";
-
div.
innerHTML =
"<strong>123</strong>"
-
// Operation JS
-
div.
style.
color=
'red'
-
div.
style.
fontSize=
'22px'
-
div.
style.
padding=
'2em'
-
</script>
-
</body>
-
</html>
-
- Delete Vertex
- Insert Knot
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
</head>
-
<body>
-
<p id="js">JavaScript
</p>
-
<div id="list">
-
<p id="se">JavaSE
</p>
-
<p id="ee">JavaEE
</p>
-
<p id="me">JavaME
</p>
-
</div>
-
-
<script>
-
let js =
document.
getElementById(
'js');
-
let list =
document.
getElementById(
'list');
-
// Append node
-
// list.appendChild(js)
-
let newP =
document.
createElement(
'p');
-
newP.
id=
'newP';
-
newP.
innerText =
'Hello xiaofan!';
-
list.
appendChild(newP)
-
// Set background color
-
let body =
document.
getElementsByTagName(
"body")[
0];
-
body.
style.
backgroundColor =
"#ff00f0"
-
// Insert a new node in front of a node
-
let ee =
document.
getElementById(
"ee");
-
list.
insertBefore(js, ee);
-
-
</script>
-
</body>
-
</html>
2.13. Operation form
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
</head>
-
<body>
-
<form method="post">
-
<p>
-
<span>user name:
</span>
<input type="text" id="username"/>
-
</p>
-
<p>
-
<span>Gender:
</span>
-
<input type="radio" name="sex" value="1" id="boy" checked /> male
-
<input type="radio" name="sex" value="2" id="girl" /> female
-
</p>
-
</form>
-
-
<script>
-
let input_text =
document.
getElementById(
"username");
-
let boy =
document.
getElementById(
"boy");
-
let girl =
document.
getElementById(
"girl");
-
console.
log(boy.
checked);
-
boy.
checked =
true
-
</script>
-
</body>
-
</html>
- Hide the field form submission verification and encrypt the password
-
// MD5 remote library https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
<!--md5 Tool class-->
-
<script src="myMd5.js">
</script>
-
</head>
-
<body>
-
<form method="post" onsubmit="return check();">
-
<p>
-
<span>user name:
</span>
<input type="text" id="username" name="username"/>
-
</p>
-
<p>
-
<span>dense
Code:
</span>
<input type="password" id="input-password"/>
-
</p>
-
<input type="hidden" id="md5-password" name="password"/>
-
<input type="submit">
-
</form>
-
-
<script>
-
function
check(
) {
-
let name =
document.
getElementById(
"username");
-
let inputPwd =
document.
getElementById(
"input-password");
-
let md5Pwd =
document.
getElementById(
"md5-password");
-
// password.value = md5(password.value)
-
md5Pwd.
value =
md5(inputPwd.
value);
-
console.
log(name.
value)
-
console.
log(inputPwd.
value)
-
console.
log(md5Pwd.
value)
-
return
false
-
}
-
</script>
-
</body>
-
</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
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">
</script>
-
</head>
-
<body>
-
<a href="" id="test-jquery">Point me
</a>
-
-
<script>
-
// Formula $(selector). Action (method)
-
$(
"#test-jquery").
click(
function (
) {
-
alert(
"hello jquery!")
-
})
-
</script>
-
</body>
-
</html>
3.2. Selector
3.3. Events
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">
</script>
-
-
<style>
-
#divMove{
-
width:
500px;
-
height:
500px;
-
border:
1px solid red;
-
}
-
</style>
-
</head>
-
<body>
-
<!--Requirement: obtain the current coordinate of the mouse-->
-
mouse:
<span id="mouseMove">
</span>
-
<div id="divMove">
-
Move around here
-
</div>
-
-
<script>
-
$(
"#divMove").
mousemove(
function (
e) {
-
$(
"#mouseMove").
text(
`x: ${e.pageX}, y: ${e.pageY}`)
-
})
-
</script>
-
</body>
-
</html>
3.4. JQuery operation DOM
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">
</script>
-
</head>
-
<body>
-
<ul id="test-ul">
-
<li class="js">JavaScript
</li>
-
<li name="python">Python
</li>
-
</ul>
-
-
<script>
-
// Get value
-
let text1 = $(
"#test-ul li[name=python]").
text();
-
let text2 = $(
"#test-ul li[class=js]").
text();
-
console.
log(text1)
-
console.
log(text2)
-
// Set value
-
$(
"#test-ul li[class=js]").
text(
"JS");
-
// Set css Style
-
$(
"#test-ul li[name=python]").
css({
"color":
"#ff0011",
"background":
"blue" })
-
// Display and hiding of elements
-
$(
"#test-ul li[name=python]").
show()
-
$(
"#test-ul li[name=python]").
hide()
-
// More view documents
-
// https://jquery.cuishifeng.cn/
-
-
</script>
-
</body>
-
</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
-
<!DOCTYPE html>
-
<html>
-
<head lang="en">
-
<meta charset="UTF-8">
-
<title>xiaofan
</title>
-
</head>
-
<body>
-
-
<script type="text/javascript">
-
'use strict'
-
window.
onload =
function(
){
-
let myDate =
new
Date();
-
document.
getElementById(
'currentTime').
innerText = myDate.
toLocaleString()
-
};
-
-
function
LoadPage(
){
-
let targetUrl =
document.
getElementById(
'url').
value;
-
console.
log(targetUrl);
-
document.
getElementById(
"iframePosition").
src = targetUrl;
-
}
-
-
</script>
-
-
<div>
-
<p>Please enter the address to load:
<span id="currentTime">
</span>
</p>
-
<p>
-
<input id="url" type="text" value="https://www.baidu.com/"/>
-
<input type="button" value="Submit" onclick="LoadPage()">
-
</p>
-
</div>
-
-
<div>
-
<h3>Load page location:
</h3>
-
<iframe id="iframePosition" style="width: 100%;height: 500px;">
</iframe>
-
</div>
-
-
</body>
-
</html>
3.5.2. Ajax format
-
jQuery.ajax(...)
-
Some parameters:
-
url: Request address
-
type: Request method, GET,POST(1.9.0 Later use method)
-
headers: Request header
-
data: Data to send
-
contentType: The content encoding type of the message to be sent to the server(default:
"application/x-www-form-urlencoded; charset=UTF-8")
-
async: Asynchronous
-
timeout: Set request timeout (MS)
-
beforeSend: Function executed before sending the request(overall situation)
-
complete: Callback function executed after completion(overall situation)
-
success: Callback function executed after success(overall situation)
-
error: Callback function executed after failure(overall situation)
-
accepts: Send the request to the server and tell the server the data type acceptable to the current client
-
dataType: Converts the data returned by the server to the specified type
-
"xml": Convert the content returned by the server into xml format
-
"text": Convert the content returned by the server to normal text format
-
"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.
-
"script": Try to treat the return value as
JavaScript To execute, and then convert the content returned by the server into normal text format
-
"json": Convert the content returned by the server into the corresponding
JavaScript object
-
"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
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
<!--Import vue-->
-
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">
</script>
-
</head>
-
<body>
-
<!--view Layer template-->
-
<div id="app">
-
{{message}}
-
</div>
-
-
<script>
-
'use strict'
-
/*Model data*/
-
let vue =
new
Vue({
-
el:
"#app",
-
data: {
-
message:
'hello vue!'
-
}
-
})
-
</script>
-
</body>
-
</html>
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
<!--Import vue-->
-
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">
</script>
-
</head>
-
<body>
-
<!--view Layer template-->
-
<div id="app">
-
<span v-bind:title="message">Hover the mouse for a few seconds to view the prompt information of dynamic binding here!
</span>
-
</div>
-
-
<script>
-
'use strict'
-
/*Model data*/
-
let vue =
new
Vue({
-
el:
"#app",
-
data: {
-
message:
'hello vue!'
-
}
-
})
-
</script>
-
</body>
-
</html>
4.2. Basic grammar
- if
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
<!--Import vue-->
-
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">
</script>
-
</head>
-
<body>
-
<!--view Layer template-->
-
<div id="app">
-
<h1 v-if="type==='A'">A
</h1>
-
<h1 v-else-if="type==='B'">B
</h1>
-
<h1 v-else="type==='C'">C
</h1>
-
</div>
-
-
<script>
-
'use strict'
-
/*Model data*/
-
let vue =
new
Vue({
-
el:
"#app",
-
data: {
-
message:
'hello vue!',
-
type:
'A'
-
}
-
})
-
</script>
-
</body>
-
</html>
- for
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
<!--Import vue-->
-
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">
</script>
-
</head>
-
<body>
-
<!--view Layer template-->
-
<div id="app">
-
<p style='color:blue' v-for="item in items">{{item.message}}
</p>
-
</div>
-
-
<script>
-
'use strict'
-
/*Model data*/
-
let vue =
new
Vue({
-
el:
"#app",
-
data: {
-
message:
'hello vue!',
-
type:
'A',
-
items: [{
message:
'Xiao Fan'},{
message:
'Trabecula'},{
message:
'Xiao Hong'}]
-
}
-
})
-
</script>
-
</body>
-
</html>
- event
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
<!--Import vue-->
-
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">
</script>
-
</head>
-
<body>
-
<!--view Layer template-->
-
<div id="app">
-
<button v-on:click="sayHi">Point me
</button>
-
</div>
-
-
<script>
-
'use strict'
-
/*Model data*/
-
let vue =
new
Vue({
-
el:
"#app",
-
data: {
-
message:
'hello vue!',
-
type:
'A',
-
items: [{
message:
'Xiao Fan'},{
message:
'Trabecula'},{
message:
'Xiao Hong'}]
-
},
-
methods: {
-
sayHi:
function (
) {
-
alert(
this.
message)
-
}
-
}
-
})
-
</script>
-
</body>
-
</html>
- Bidirectional binding
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
<!--Import vue-->
-
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">
</script>
-
</head>
-
<body>
-
<!--view Layer template-->
-
<div id="app">
-
<input type="text" v-model="message"/> {{message}}
-
</div>
-
-
<script>
-
'use strict'
-
/*Model data*/
-
let vue =
new
Vue({
-
el:
"#app",
-
data: {
-
message:
""
-
}
-
})
-
</script>
-
</body>
-
</html>
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
<!--Import vue-->
-
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">
</script>
-
</head>
-
<body>
-
<!--view Layer template-->
-
<div id="app">
-
<select v-model="selected">
-
<option value="" disabled>---Please select---
</option>
-
<option>A
</option>
-
<option>B
</option>
-
<option>C
</option>
-
</select>
-
-
{{selected}}
-
</div>
-
-
<script>
-
'use strict'
-
/*Model data*/
-
let vue =
new
Vue({
-
el:
"#app",
-
data: {
-
selected:
""
-
}
-
})
-
</script>
-
</body>
-
</html>
4.3. vue components
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
<!--Import vue-->
-
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js">
</script>
-
</head>
-
<body>
-
<!--view Layer template-->
-
<div id="app">
-
<xiaofan v-for="item in items" v-bind:xf="item">
</xiaofan>
-
</div>
-
-
<script>
-
'use strict'
-
-
Vue.
component(
"xiaofan", {
-
// props is required to pass data to components
-
props: [
'xf'],
-
template:
'<h1>{{xf}}</h1>'
-
})
-
-
/*Model data*/
-
let vue =
new
Vue({
-
el:
"#app",
-
data: {
-
items: [
'java',
'linux',
'python']
-
}
-
})
-
</script>
-
</body>
-
</html>
-
4.4. Network communication Axios
