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

相关阅读:
Java 开发环境安装与配置详细指南 - IntelliJ IDEA
clang在编译时指定目标文件所需的最低macOS版本
腾讯公布机器人最新进展：“轮滑小子”Ollie拥有触觉，人机交互更友好
ComposeUI——下拉刷新+上拉加载(简单封装)
[ELK实战] 开发中的哪些坑
[SUCTF 2019]EasyWeb
ROS从入门到精通(八) 常用传感器与消息数据
zotero跨Windows设备数据同步（利用OneDrive、百度云同步空间等云服务）
python和shell脚本，每隔五分钟将远端服务器中的文件夹数据下载到跳板机
【亚马逊云科技产品测评】活动征文｜亚马逊云科技AWS之EC2详细测评

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