1. Comprender los puntos de conocimiento:
¿Qué es el front-end y el back-end?
Front-end: pantalla de datos
Back-end: procesamiento de datos
¿De dónde vienen las dependencias?
gestión de npm
El servidor npm se descarga muy lentamente en países extranjeros
Espejo de Taobao: npm i -g cnpm --registry=https://registry.npm.taobao.org
jquery:
1.cd a la carpeta que quieras descargar
2. Inicializar npm init -y
3. Descargue la instalación de npm -- guarde jquery
4. Modificar la versión descargada
4-1 Especifique la versión directamente al descargar npm install --save jquery@version number
4-2 Puede modificar el archivo package.json del proyecto y usar npm install en el proyecto para volver a descargar
¿Qué es un marco?
Bloques de código no relacionados con el negocio
Negocio: es la función del proyecto
Marco pros y contras
Simplificar la complejidad del proyecto y aumentar el valor del proyecto
Contras: Tienes que aprender un nuevo conjunto de gramática
¿Qué son los atributos html?
Concepto: ampliar la función de las etiquetas html
Sintaxis: los atributos se escriben en la etiqueta de apertura del atributo html = "valor del atributo" Varios atributos están separados por espacios
2. Conocer los puntos de conocimiento:
vista:
Concepto: vue.js es el marco MVVM de front-end más convencional (más fácil de mostrar datos)
3. Puntos de conocimiento para recordar:
¿Qué es MVVM?
M Modelo modelo ----- "datos
V View view-----"La interfaz que los usuarios pueden ver
Vm ViewModel modelo de vista ----- "los datos y la visualización están separados y el puente entre la vista y el modelo se utiliza para asociar
¿Qué es { {}}?
{
{}} sintaxis de plantilla/expresión de doble llave/método de asignación de doble llave
{
{ expresión }} expresión —” la fórmula que puede obtener el resultado a través del cálculo
Categorías de representación:
1. El núcleo de vue es usar una sintaxis de plantilla simple y concisa para mostrar datos de forma declarativa.
2. Native js: renderizado imperativo Necesitamos ordenar nuestro programa cómo debe ir paso a paso
3. Vue framework: renderizado declarativo Solo necesitamos decirle al programa lo que quiere hacer y lo hará solo
instrucción
1. Concepto de instrucción : es el atributo especial html con el prefijo v-
2. ¿Cuál es la función de la instrucción? : Extienda la función de las etiquetas html en vue
3. Sintaxis de instrucciones : escriba en la etiqueta de apertura de html y v-instruction = "valor de instrucción" Varias instrucciones están separadas por espacios
4. La instrucción del modelo v se da cuenta del principio del enlace bidireccional : el enlace bidireccional se realiza a través del secuestro de datos y el modo editor-suscriptor
Secuestro de datos : interceptación de datos La interceptación de datos significa que la capa de máquina virtual siempre monitoreará los datos en el modelo de escucha y la vista. Cuando uno de ellos cambia, la capa de máquina virtual recibirá una notificación (cómo la máquina virtual recibe la notificación a través del objeto de secuestro de datos). defineProperty( ) Puede interceptar los datos del objeto enlazado y luego leerlos y modificarlos a través de los métodos getter y setter);
Editor-suscriptor : Es una relación de uno a muchos;
área de código:
hola n° 1
<!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 Gramática
<! 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>
Comando no.3v-mostrar
Rol : controlar la visualización y ocultación de elementos
Use css display para configurar 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>
instrucción modelo no.4v
1. Se utiliza para la vinculación bidireccional de datos en elementos de formulario ; 2. v-model realiza la vinculación bidireccional entre la vista y el modelo; 3. v-model solo puede realizar la vinculación bidireccional en los formularios; 4. Modelo El los datos están vinculados a la vista 5. Cuando los datos de la vista cambian, los datos del modelo también cambian;
<! 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 pequeño ejercicio
<!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>
n.º 6 v-on instrucción
Es la instrucción para vincular eventos en vue (los eventos no se pueden usar directamente en vue y deben modificarse con v-on para usarlos)
<!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 pequeños ejercicios
<!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-para instrucción
Facilite los datos y muestre los datos de la página
Sintaxis :
v-for=" (v,i) en los datos que desea facilitar"
v es el valor conveniente
i es el subíndice conveniente
<!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>
Facilite datos complejos
<!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 es el más fácil de olvidar para los principiantes
Vincular variables a atributos de etiquetas html
<!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 ejercicios completos
<!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>