1. Understanding knowledge points:
What is front end and back end?
Front end: data display
Backend: data processing
Where do dependencies come from?
npm management
The npm server is downloaded very slowly in foreign countries
Taobao mirror: npm i -g cnpm --registry=https://registry.npm.taobao.org
jquery :
1.cd to the folder you want to download
2. Initialize npm init -y
3. Download npm install --save jquery
4. Modify the downloaded version
4-1 Specify the version directly when downloading npm install --save jquery@version number
4-2 You can modify the package.json file of the project and use npm install under the project to re-download
What is a frame?
Code blocks not related to business
Business: is the function of the project
Framework pros and cons
Simplify the complexity of the project and increase the value of the project
Cons: You have to learn a new set of grammar
What are html attributes?
Concept: Extend the function of html tags
Syntax: Attributes are written in the opening tag of html attribute = "attribute value" Multiple attributes are separated by spaces
2. Knowing knowledge points:
vue：
Concept: vue.js is the most mainstream front-end MVVM framework (easier to display data)
3. Knowledge points to remember:
What is MVVM?
M Model model ----- "data
V View view-----"The interface that users can see
Vm ViewModel view model ----- "data and display are separated and the bridge between the view and the model is used to associate
What is { {}}?
{
{}} template syntax/double curly bracket expression/double curly bracket assignment method
{
{ expression }} expression —” the formula that can get the result through calculation
Rendering categories:
1. The core of vue is to use simple and concise template syntax to declaratively display data.
2. Native js: Imperative rendering We need to order our program, how should you go step by step 3.
Vue framework: Declarative rendering, we only need to tell the program what you want to do, and it will be done by itself
instruction
1. Instruction concept : it is the html special attribute prefixed with v-
2. What is the function of the instruction? : Extend the function of html tags in vue
3. Instruction syntax : write in the opening tag of html and v-instruction = "instruction value" Multiple instructions are separated by spaces
4. The v-model instruction realizes the principle of two-way binding : two-way binding is realized through data hijacking and publisher-subscriber mode
Data hijacking : data interception Data interception means that the vm layer will always monitor the data in the listener model and the view. When one of them changes, the vm layer will receive a notification (how the vm receives the notification through data hijacking Object.defineProperty( ) He can intercept the bound object data and then read and modify it through the getter and setter methods);
Publisher-subscriber : It is a one-to-many relationship;
code area:
no.1 helloword
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset="UTF-8">
<meta http-equiv= "X-UA-Compatible" content=" IE=edge">
<meta name= "viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.创建v层-->
<div id="demoDiv">
{
{
text}}
</div>
</body>
</html>
//这里是下载vue依赖包引入vue.js包
<script src=”node modules/vue/dist/vue .min.js"></script>
<script>
// 2.创建vm层就是new出来的实例
new Vue({
//m层
data:{
text:'么么哒'
};
el : " #demoDiv'
})
/script>
no.2 Grammar
<! DOCTYPE htm1>
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta http- equiv="X- UA-Compatible" content=" IE=edge" >
<meta name= "vi ewport" content= "width=device-width, initial-scale=1.0">
<title>Document</title>
/head>
<body>
<!-- 1.创建v层- - >
<div id="demoDiv">
<h1>{
{
arr[2]}}</h1>
<h1>{
{
age+15}}</h1>
<h1> {
{
we . uesra}}</h1>
<h1> {
{
we . uesrb}}</h1>
</div>
/body>
</html>
<script src="./node_ modules/vue/dist/vue .min. js"></script>
<script>
//2.创建vm层就是实例层
new Vue({
data:{
name: Zz，
age:18,
we:{
uesra:' 1212'
uesrb: '33 '
}，
arr:[1111 ,222222 ,3333333，44444 ]
},
el:' #demoDiv'
})
</script>
no.3v-show command
Role : control the display and hiding of elements
Use css display to set css
true display false hide
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF- 8">
<meta http-equiv="X-UA-Compatible" content= ”IE=edge" >
<meta name= "vi ewport" content="width=device - width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id=" demoDiv">
<h1>V- show</h1>
<h1 v- show=” bool' >看我显示隐藏</h1>
</div>
</body>
</html>
<script src=" node_ modules/vue/dist/vue .min. js"></script>
<script>
new Vue({
data:{
bool:false
el: ' #demoDiv '
})
</script>
no.4v-model instruction
1. It is used for two-way binding of data on form elements ; 2. v-model realizes two-way binding between view and model; 3. v-model can only realize two-way binding on forms; 4. Model The data is bound to the view; 5. When the view data changes, the model data also changes;
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<meta http equiv="X-UA- Compatible" content=" IE=edge">
<meta name="viewport" content= "width=device -width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id=" demoDiv">
<input type="text" v- model=' text1'>
<h1>v - model</h1>
<p><h1>{
{
text1}}</h1></p>
</div>
body>
/html>
<script src="node_ modules/vue/dist/vue， min. js"></script>
<script>
new Vue({
data:{
text1:'么么哒'
},
el:' #demoDiv'
})
</script >
no.5v-show \v-model small exercise
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta http- equiv="X-UA-Compatible" content= ”IE=edge">
<meta name= "viewport" content="width=device-width, initial-scale=1.0">
<title>Document< /title>
</head>
<body>
<div id="demoDiv">
<input type=" checkbox" v - model=”bool '><p v- show= ' bool'>{
{boo1?'有我: '没我'}}</p>
<p>{
{
boo1}}</p>
<h1 v- show= ' bool '>显示隐藏</h1>
</div>
</body>
</html>
<script src=" . /node_ modules/vue/dist/vue .min. js"></script> 4
<script>
new Vue({
data:{
bool:false
},
el: ' #demoDiv '
})
</script>
no.6 v-on instruction
It is the instruction to bind events in vue (events cannot be used directly in vue and must be modified with v-on to use)
<!DOCTYPE htm1>
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta http- equiv="X-UA- Compatible" content="IE=edge">
<meta name= "vi ewport" content= "width=device-width, initial-scale=1.0">
<title>Document</title>
:/head>
<body>
<div id="demoDiv">
<h1>v-on</h1>
<button v- on :click=' fun()'>点击我打印</button)
<button @click=fun()>点击我打印</button
</div>
</body>
</html>
<script src=" ./node modules/vue/dist/vue .min. js"></script>
<script>
new Vue({
data:{
},
el: ' #demoDiv '
//函数要写在data,与e1同级位置，并用methods表达
methods: {
fun(){
console. log('你好' )
})
</script >
no.7 v-show\v-on\ v-model small exercises
<!DOCTYPE html>
<html lang= "en" >
<head>
kmeta charset="UTF-8">
<meta http- equiv="X-UA- Compatible" content=" IE=edge" >
<meta name= "viewport" content="width=device - width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="demoDiv">
<h1 @click=' fun()'>{
{
tex}}</h1>
<input type= "text" v-model= ' tex' v- show='bool'>{
{
bool?'有我:‘没我' }}
<p>{
{
tex}}</p>
:/div>
</body>
</html>
<script src="node modules/vue/dist/vue .min.js"></script>
<script>
new Vue( {
data:{
bool:true,
tex:'么么哒'
}
el: ' #demoDiv'，
methods: {
fun(){
this . bool=! this. bool
this.tex='么么哒'
})
/script>
no.8v-for instruction
Facilitate data data and display page data
Syntax :
v-for=" (v,i) in the data you want to facilitate"
v is the convenient value
i is the convenient subscript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-for</h1>
<ul>
<li v-for="(item,index) in arr">{
{
item}}------{
{
index}}</li>
</ul>
</div>
<script>
new Vue({
data:{
arr:["VN","EZ","NOC","MF"]
},
el:"#demoDiv"
})
</script>
</body>
</html>
Facilitate complex data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-for</h1>
<ul>
<li v-for="(item,index) in arr">{
{
item}}------{
{
index}}</li>
</ul>
<table border="1">
<tr v-for="(v,i) in obj">
<td>{
{
v.name}}</td>
<td>{
{
v.age}}</td>
</tr>
</table>
</div>
<script>
new Vue({
data:{
arr:["VN","EZ","NOC","MF"],
obj:[
{
name:"xixi1",age:181},
{
name:"xixi2",age:182},
{
name:"xixi3",age:183},
{
name:"xixi4",age:184},
{
name:"xixi5",age:185}
]
},
el:"#demoDiv"
})
</script>
</body>
</html>
no.9v-bind is the easiest to forget for beginners
Bind variables to attributes of html tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-bind</h1>
<a v-bind:href="ahref">{
{
atext}}</a>
<!-- 简写 -->
<a :href="ahref">{
{
atext}}</a>
</div>
<script>
new Vue({
data:{
atext:"点我去百度",
ahref:"http://www.baidu.com"
},
el:"#demoDiv"
})
</script>
</body>
</html>
no.10 comprehensive exercises
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" >
meta http-equiv= "X-UA- Compatible" content=" IE=edge">
kmeta
name="viewport" content= "width=device-width, initial-scale=1.0">
<title> Document</title>
<style>
.red{
background-color: [ 1 red ;
</sty1e>
</head>
<div id=" demoDiv">
<h2>计算总价</h2>
<ul>
<li v-bind:class="v. style?'red':"" v-for="(v,i) in arr" @click=fun(i)>{
{
v.tit1e}--f{
v .num}}</li>
</ul >
kp>总价({
Number}}</p>
/div>
</body>
</html>
<script src=" ./node_ modules/vue/dist/vue .min. js"></script>
<script>
new Vue({
data:{
Number:0,
arr:[
{
title: '苹果”,num:5, style:false},
{
title: '石榴”,num:8, style:false};
{
title: '香蕉”,num:3, style:false},
{
title:”香梨' ,num:4, style:false},
{
title: '板栗”,num:10, style:false}
e1: ' #demoDiv'，
methods:
fun(i){
console. log(i);
this arr[i]. sty1e=!this arr[i]. style
if(this.arr[i].style){
this . Number+=this .arr[i] .num
}else{
this . Number--this . arr[i] . num
})
</scmipt>