初始Vue(模版语法和数据绑定)

Vue的模版语法有两大类：

1.插值语法：

功能：用于解析标签体内容。
写法: {{xxx}},xxx是js表达式

2.指令语法：

功能：用于解析标签。(包括：标签属性，标签体内容，绑定事件…)

    <div id="root">
      <h1>hello,{{school}}</h1>
      <a v-bind:href="url">百度</a>
      <a :href="platform.url1.toUpperCase()">{{platform.name}}</a>
      <!-- “v-bind:”可以简写成“:”    -->
    </div>
    <script>
      new Vue({
        el: "#root",
        data: {
          school: "哔站",
          url: "http://www.baidu.com",
          platform: {
            url1: "http://www.atguigu.com", //网址必须加http
            name: "尚硅谷",
          },
        },
      });
      Vue.config.productionTip = false;
    </script>

其中指令语法的数据绑定有两种方式：

单向绑定：V-bind

双向绑定：V-model

注意：双向绑定一般用于表单类元素，也就是输入类元素：input,checkbox,radio,select,textarea。因为其含有value可以实现双向交互。

    <div id="root">
      单向数据绑定：<input type="text" v-bind:value="name" /><br />
      双向数据绑定：<input type="text" v-model:value="name" />
    </div>
    <script>
      new Vue({
        el: "#root",
        data: {
          name: "尚硅谷",
        },
      });
    </script>