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

相关阅读:
凌恩客户文章|宏基因组揭示大蒜素对抗生素抗性基因的影响
【汇编语言】push pop/关于段
vue-cli创建项目、vue项目目录结(运行vue项目)、ES6导入导出语法、vue项目编写规范
keras图片数字识别入门AI机器学习
无用的小知识
Nginx、Git、Gitee的介绍及使用
MySQL 读写分离配置实践
【每日一题】50. Pow(x, n)
arm cortex-m架构 SVC指令详解以及SVC异常在freertos的应用
3dsMax---期末设计[CC‘s 游乐园’]

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