day49-初始vue

初始vue

vue在html css js的基础上进行封装和实例化，更简单方便

使用vue首先要引入vue

 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 <!--    引入vue-->
     <script type="text/javascript" src="js/vue.js"></script>
 </head>

之前设计的html标签作为vue的容器

<!--准备一个容器-->
     <div id="root">
         <h1>hello {{name}}</h1>
     </div>

创建vue的实例，并传入实例对象

 //创建vue实例
 //传入实例对象
 const x = new Vue({
     el:'#root',//el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
     data:{//data中存储数据，数据供el中所指定的容器去使用
         name:'gugu112'
     }
 })

总结：

<!--

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）
    2.js代码（语句）
        （1）. if（）{}
        （2）. for（）{}