1. ¿Qué es Vue.js?
-
Vue (pronunciado / vjuː /, similar a view) es un marco progresivo para construir interfaces de usuario. A diferencia de otros marcos grandes, Vue está diseñado para aplicarse capa por capa de abajo hacia arriba.
-
La biblioteca central de Vue solo se enfoca en la capa de vista, que no solo es fácil de usar, sino que también es fácil de integrar con bibliotecas de terceros o proyectos existentes. Por otro lado, cuando se combina con cadenas de herramientas modernas y varias bibliotecas de soporte, Vue también es totalmente capaz de proporcionar controladores para aplicaciones complejas de una sola página.
-
Aplicación capa por capa de abajo hacia arriba: como marco progresivo, el objetivo a alcanzar es facilitar el desarrollo incremental del proyecto (plug and play).
Sitio web oficial: https://cn.vuejs.org/v2/guide/ El autor You Yuxi es chino.
2. ¿Por qué usar Vue?
- Representación declarativa: la separación de los extremos frontal y posterior es la tendencia futura
- Marco progresivo: adecuado para diversas necesidades comerciales
- Simple y fácil de aprender: desarrollado por chino, documentos chinos, sin barreras idiomáticas, fácil de entender y aprender
Tres, la introducción de Vue.js
- Use el script para introducir la biblioteca vue.js en la página html para usar.
<!-- 方式1：引用远程 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- 方式2：引用本地 -->
<script src="./vue包的存放目录/vue.min.js"></script>
- Andamio Vue-CLI: es muy conveniente utilizar el marco de scripting CLI proporcionado por vue.js para crear el prototipo del proyecto vue.js
En tercer lugar, el programa de entrada
1. Instalación ambiental
Software de desarrollo: Visual Studio Code.
Para mayor comodidad, lo he subido a mi recurso CSDN y puedo hacer clic para descargar: VSCodeSetup-x64-1.29.1.exe Después de
descargar el software de desarrollo, debe instalar el complemento correspondiente.
Abra el software de código VS, haga clic en el último icono (extensión) a la izquierda, busque los siguientes complementos en el centro comercial y haga clic en instalar.
Ejemplo:
2. Escritura de código
A continuación, comience a escribir el subprograma de entrada.
Cree un directorio vue_text y cree el archivo de entrada 01_vue program.html en el directorio.
consejos: En el archivo 01_vue entry program.html, ingrese el signo de exclamación en inglés en la primera línea. ,
Y luego haga clic en Enter para generar automáticamente un fragmento de código html inicial de la siguiente manera:
Pasos de escritura de código:
- Defina html e introduzca vue.js
- Defina el div "aplicación", esta área es asumida por vue
- Definir la instancia de Vue y hacerse cargo del área de la aplicación
- Definir modelo (objeto de datos)
- Mostrar datos en "aplicación"
Según los pasos anteriores, compare los siguientes ejemplos de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue入门</title>
<!-- 1.创建HTML文件， 引入vue.js 有两种方式-->
<!-- 第一种 引入 vue.js的CDN地址 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"> </script> -->
<!-- 第二种 本地导入 -->
<script src="./js/vue.min.js"></script>
</head>
<body><!-- 2. 定义app div，此区域作为vue的接管区域 -->
<div id="app">
<!-- {
{}} 双括号是VUE中的差值表达式,将表达式的值输出到HTML页面 -->
<h2> {
{name}} </h2>
</div>
</body>
<script>
//3. 创建vue实例
var VM = new Vue({
//定义 Vue实例挂载的元素节点,表示vue接管该div
el:'#app',
//4.定义model模型数据对象
data:{
name:"格子衫"
}
});
</script>
</html>
3. Resultados de la operación
En el archivo html, haga clic derecho en "Abrir con Live Sever" para ejecutar: se
mostrará en el navegador:
4. Descripción
El programa Vue se escribe básicamente de acuerdo con la plantilla anterior, interpolando para obtener datos en div, definiendo el punto de montaje en js y definiendo el objeto de datos de datos
1) {
{}}: expresión de interpolación
-
¿Cuál es el papel de las expresiones de interpolación?
通常用来获取Vue实例中定义的数据(data) 属性节点中 不能够使用插值表达式
2) el: punto de montaje
-
El papel de el?
定义 Vue实例挂载的元素节点,表示vue接管该区域 -
¿Cuál es el alcance de Vue?
Vue会管理el选项命中的元素,及其内部元素 -
el¿Es posible utilizar otros selectores al seleccionar el punto de montaje?
可以,但是建议使用 ID选择器 -
¿Es posible configurar otros elementos DOM para la asociación?
可以,但是建议选择DIV, 不能使用HTML和Body标签
3) datos: objeto de datos
- Los datos utilizados en Vue se definen en datos
- Los tipos complejos se pueden escribir en datos
- Al renderizar datos complejos, siga la sintaxis js. A
continuación, se muestra un ejemplo de cómo escribir datos complejos en datos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中data写复杂类型</title>
<!-- 1.创建HTML文件， 引入vue.js 有两种方式-->
<!-- 第一种 引入 vue.js的CDN地址 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"> </script> -->
<!-- 第二种 本地导入 -->
<script src="./js/vue.min.js"></script>
</head>
<body><!-- 2. 定义app div，此区域作为vue的接管区域 -->
<!-- 此区域作为vue的接管区域 -->
<div id="app">
{
{name}} <br>
{
{school.name}} {
{school.mobile}}<br>
<ul>
<li>{
{names[0]}}</li>
<li>{
{names[1]}}</li>
<li>{
{names[2]}}</li>
</ul>
</div>
</body>
<script>
//3. 创建vue实例
var VM = new Vue({
//定义 Vue实例挂载的元素节点,表示vue接管该div
el:'#app',
//4.定义model模型数据对象
data:{
name:"格子衫",
//对象类型数据
school:{
name:"xx教育",
mobile:"1001001"
},
//数组类型
names:["小斌","张百万","刘能"]
}
});
</script>
</html>
resultado de la operación:
Cuarto, los beneficios de la representación declarativa.
¿Ha notado que la representación declarativa se menciona en el segundo punto "¿Por qué usar Vue?" En el contenido de este artículo.
Entonces, ¿qué es la representación declarativa?
Vue中的声明式渲染，简单理解就是我们声明数据，Vue帮我们将数据渲染到HTML.
Echemos un vistazo a un ejemplo de la diferencia entre usar jQuery y Vue para renderizar datos html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{
{name}}</h2>
</div>
</body>
<!--
jQuery中，如果 DOM 发生变化, js代码也需要做相应的改变，高耦合 .
<script src="./js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function () {
$("#app").append("<h2>Hello Word! !</h2>");
});
</script> -->
<!-- 在用 Vue中，只需要定义好展示数据，并把它放在 DOM 合适的位置就可以. -->
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app", //挂载点
data: {
name: "Hello Word! !", },
});
</script>
</html>
- Como puede ver, jQuery nativo, si desea representar datos html, debe obtener el objeto dom en el código JS y luego agregar los datos y, a veces, debe incrustar etiquetas html. ¿No es esto problemático e inconveniente leer el código? Además, la operación dom hará que el rendimiento sea más bajo y afectará la experiencia del usuario.
- En el método Vue, primero defina los datos en JS a través de Vue, y luego, al escribir html, puede escribir directamente el nombre de la variable en la etiqueta que desea asignar, y los dos lados están vinculados dinámicamente por el nombre del atributo, que es claro de un vistazo!
O, lo anterior es la introducción a Vue.js, ¿es fácil ~
consejos: Si desea obtener más información, puede ir al sitio web oficial. El enlace se proporciona
al principio del artículo. Al mismo tiempo, también cargué la demostración de cada punto de conocimiento de Vue en el recurso. Los comentarios son muy detallados. Los amigos que lo necesiten pueden hacer clic para descargar: Código de muestra de Front-end Vue