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

相关阅读:
Anaconda+flask+uwsgi服务器环境搭建
5G紧急呼叫流程分析
179.Hive（一）：hive的基础概念，hive的安装和启动
ESP 特权隔离机制—案例研究
多维时序 | MATLAB实现SSA-CNN-BiGRU-Attention多变量时间序列预测（SE注意力机制）
bp神经网络是用来干嘛的,bp神经网络和神经网络
mysql数据库、表、列的字符集和校对规则
JSON Web Tokens攻击漏洞手法
关于测试计划的前世今生
c++视觉处理---cv::Sobel()`算子

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