vue2学习第一节

  • 1.代码
  • 1.1容器和Vue实例只能一一对应
  • 1.2 组件思想，data下面很多组件来保存数据。
  • 1.3 容器里面，除了html代码就是vue模板一些语法。
  • 1.4 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新
  • 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>Document</title>
    <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>

页面：

vue容器开发 vue web容器_vue.js

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

vue容器开发 vue web容器_学习_02

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

如果是一一对应，那么100个数据，写100个key-value？

vue容器开发 vue web容器_Vue_03

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

里面除了插值表达式，就是js表达式。

vue容器开发 vue web容器_学习_04

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

vue容器开发 vue web容器_javascript_05


因为正是我们的数据是动态的，所以才把数据交给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(){}