vue.js
- ¿Qué es Vue?
- Un marco progresivo
JavaScript
- ¿Para qué se usa Vue?
- El efecto es
构建用户界面
- Cuales son las caracteristicas?
- Las características son:
渐进式solo es necesario prestar atención a los datos
Uso básico
Punto de montaje de vue
- 1. Función de punto de montaje el: indique a la instancia de vue a cuál desea representar los datos en datos
- 2. Precauciones
- (1) El punto de montaje puede usar el selector de identificación (se recomienda vue), el selector de clase, el selector de etiquetas
- Básicamente, los selectores de identificación se utilizan en el desarrollo para garantizar la singularidad de las etiquetas HTML
- Si desea que los datos en los datos sean efectivos para varios elementos, puede montar la instancia de vue en el elemento principal
- (2) Si el selector selecciona varios elementos, solo se seleccionará el primer elemento (la capa inferior es queryselector)
- (3) El punto de montaje no se puede establecer como etiqueta
htmlybody(el programa informa de un error)
- (1) El punto de montaje puede usar el selector de identificación (se recomienda vue), el selector de clase, el selector de etiquetas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1.导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.HTML结构 -->
<div id="app">
<div id="app">
{
{
message }}
</div>
<hr>
<div id="box" class="container">
{
{
message }}
</div>
<hr>
<div class="container">
{
{
message }}
</div>
</div>
<script>
/* 3.初始化配置 */
/*
(1)Vue是导入vue.js之后得到的一个全局构造函数
(2)调用Vue构造函数 创建一个vue实例对象
*/
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
- el : el elemento se usa para establecer el punto de montaje de la instancia de vue (a qué elemento representar los datos)
- datos : los datos que se van a representar
- Basado en datos: Vue renderizará automáticamente la página en función de los datos en los datos (no se requiere operación DOM)
- métodos : guarde los métodos en vue
Expresión de interpolación
Expresión de interpolación (sintaxis de plantilla) portal de documentos del sitio web oficial
- Vue renderizará automáticamente los datos en el objeto de datos a la vista
- Nota:
(1) { {}}: Expresión de interpolación, también llamada sintaxis de barba
(2) Función de expresión de interpolación: Renderizar datos a la página
(3) Admitir operaciones binarias { {edad + 1}}
(4) Asistencia Operación ternaria { {edad> 30? 'Anciano': '小 鲜肉'}}
(5) Admite la sintaxis de valor de matrices y objetos
(6) No admite sintaxis de ramificación y sintaxis de bucle
Instrucciones comunes de Vue
Portal de documentos del sitio web oficial de Vue Command
La esencia de las instrucciones de Vue es: Vue agrega algunos atributos a las etiquetas HTML
Cada instrucción en Vue comienza con v- (usado para distinguir los atributos nativos de las etiquetas HTML)
