环境搭建

下载vue.js ，注意是vue2

chrome浏览器安装插件 Vue.js devtools

打开服务

npx http-serve

helloworld

root容器里的代码成为vue模板，先有的容器，让后有vue实例，vue实例发现el配置会把模板拿过来，然后解析模板里的vue语法，使用data里的数据进行渲染，然后容器再放回去

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

<script>
  Vue.config.productionTip = false 
  new Vue({
    el: "#root", // 指定当前vue实例为哪个容器服务
    data() { // 存储数据，el指定的容器去使用这里面的数据
      return {
        name: "李长鸿"
      }
    },
  })  
</script>

多个容器问题

如果设置多个容器，vue实例只认第一个；多个vue实例也不能控制一个容器（只能一一对应）

js表达式：一个表达式会生成一个值，用在任何一个需要值的地方

data数据更改，页面中用到data中的地方会自动更新

差值语法{{}} , 放的是js表达式

模板语法

  <div id="root">
        <h1>差值语法hello {{name}}，一般用于标签体内</h1>
        <!-- v-bind可以使后面的属性支持执行js表达式 -->
        <a v-bind:href="url">指令语法跳转到百度，指令语法一般用于属性</a>
        <h2>来到{{school.name}} , 上网访问{{school.url.toUpperCase()}}</h2>
    </div>

    <script>
        Vue.config.productionTip = false 
        new Vue({
            el: "#root",
            data() {
                return {
                    name: "李长鸿",
                    school: {
                        name: "希望小学",
                        url: "http://baidu.com"
                    }
                }
            },
        })  
    </script>  

数据绑定

单向数据绑定
双向数据绑定

<script>
    Vue.config.productionTip = false 
    new Vue({
        el: "#root",
        data() {
            return {
                name: "李长鸿",
            }
        },
    })  
</script>  

el 可以动态绑定

        const app = new Vue({
            // el: "#root",
            data() {
                return {
                    name: "李长鸿",
                    school: {
                        name: "希望小学",
                        url: "http://baidu.com"
                    }
                }
            },
        })  
        app.$mount("#root")