初识Vue

初识Vue

1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

2. root容器中（div）的代码依然符合html规范，只不过混入了一些特殊的vue语法

3. root容器中的代码称为【vue模板】

4. vue实例和容器是一一对应的

5. 真实开发中，只有一个vue实例 并且会配合着组件一起使用

6. {{XXX}}中的XXX要写js表达式，且XXX可以自动读到data中的所有属性

7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

js表达式和js代码

1. js表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

• 变量 a
• 变量之间做数学运算 a+b
• 函数调用 demo（1）
• 三目运算 x===y ? 'a':'b'

2. js代码（语句）

• if(){}
• for (){}

root容器

<div id="box">
        <h1>你好，{{name}}</h1>
</div>

vue实例

    <script>
        // Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
        const e = new Vue({
            el:'#box', //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
            data:{  //data中用于存储数据，数据供el所指定的容器去使用
                name:"璇asd"
            }
        })
    </script>