Vue2学习_lesson1

vue2学习第一节

1.代码
2.总结

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>Documenttitle>
    <script src="../vue/vue.js">script>
head>
<body>
    
    <div id="root"><h1>你好,{{name}}h1>div>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        //创建Vue实例,这算是配置对象
        new Vue({
            // el:document.getElementById('root') //你亲自找到这个元素给vue
            el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                name:'nor馒头',
                age:18
            }
        })
    script>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

页面：
在这里插入图片描述

1.1容器和Vue实例只能一一对应

在这里插入图片描述

1.2 组件思想，data下面很多组件来保存数据。

如果是一一对应，那么100个数据，写100个key-value？在这里插入图片描述

1.3 容器里面，除了html代码就是vue模板一些语法。

里面除了插值表达式，就是js表达式。
在这里插入图片描述

1.4 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新

在这里插入图片描述
因为正是我们的数据是动态的，所以才把数据交给vue实例，那优点是什么，你改了vue实例中的数据，页面中用到vue实例中的数据的地方会自动更新。

2.总结

初识Vue：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写成js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；

    注意区分：js表达式 和js代码(语句)
        1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
                (1).a
                (2).a+b
                (3).demo(1)
                (4).x === y ? 'a' : 'b'
        2.js代码(语句)
                (1). if(){}
                (2). for(){}
1
2
3
4
5
6
7
8
9

相关阅读:
vue3+ts+vite之路由组件的搭建
新手学习Cesium的几点建议
YOLOv7改进策略：一种新颖的可扩张残差（DWR）注意力模块，增强多尺度感受野特征，助力小目标检测
HarmonyOS/OpenHarmony(Stage模型）应用开发组合手势（一）连续识别
ssh-keygen命令生成RSA、ed25519类型密钥对
SSM+阳光大学宿舍管理系统毕业设计-附源码211714
Kubectl 使用详解——k8s陈述式资源管理
javaweb中的转发与重定向
使用xlsxwriter简单的将截图插入excel表格中
Ceph常用命令总结

原文地址：https://blog.csdn.net/Sirow/article/details/126587970