虽然Vue3.0的时代就要带来啦~~今天就接着复习一下Vue2.0叭（一）

div id="root">
    <h1>学校名称：{{name}}</h1>
    <h1>所学语言：{{language}}</h1>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;  // 阻止 Vue 在启动时生成生产提示。
    // 这就是一个 viewModel(视图模型)，视图模型就是一个Vue对象
    const vn = new Vue({
        el:'#root', // el用于指定当前Vue实列为哪个容器服务，值通常为css选择器字符串。
        // 这个data代表的就是一个 Model(模型)
        data:{
            name:'清华大学',
            language:'English'
        }
    })
</script>
复制代码

<!-- 插值语法 -->
    <!--
        注意: 在插值语法中也要使用js表达式,此时看似是一个name值,
        其实是一个赋值表达式.而不是一个字符串。将Vue中的name值赋值给 {{xxx}}}中的xxx
        一定要保证这个 xxx值与Vue中的data中的变量名一致.
    -->
    <h1>你好,{{name}}</h1>
    <!--
        {{}}} : 中的内容是一个表达式，可以使用字符串的拼接
    -->
    <h1>{{'您好, ' + name}}</h1>
    <hr/>
复制代码

<!-- 指令语法 -->
    <!--
        v-bind代表的就是将该属性的属性值作为一个js表达式处理,而不是一个字符串.
        v-bind:href="url" : 代表的就是将Vue中变量名url所对用的value值赋值给href属性
                            指定的这个url便令. 这是一个赋值表达式.
                            此时就变成了: href="https://baidu.com"
        可以给任意的属性加入v-bind命令,将这个属性对应的属性值转化为一个赋值表达式进行重新的赋值.
        以下x对应的值并不是 hello,而是在Vue中变量名为 hello对应的值.
        以下y对应的值就是: world,因为没有加入v-bind命令,此时双引号中的不是一个js表达式
        只是一个单纯的字符串.
        这里也要保证属性对应的属性值要和Vue中的data中的变量名一致.
        当data中存在多层对象相互嵌套的时候，需要使用多级点的方式来获取到指定的属性值。
        默认是获取的data层下的数据，只有data层下的数据不用点。
    -->
    <a v-bind:href="school.url" v-bind:x="hello" y="world">点我跳转百度</a>
    <!-- v-bind命令的简化写法: v-bind:<===>: -->
    <a :href="school.url" :x="hello" y="world" :name="school.name">点击我跳转百度(简化)</a>
复制代码

data:{
    name:'jack',
    hello:"您好",
/*在实际开发中，我们一般采用层级嵌套的方式来给定data所有的值。
* 每一个层级也是使用 对象来进行封装嵌套。此时注意访问数据的时候
* 需要使用多个点的方式来获取数据值。
*
* 因为默认的情况下获取到的是 data这一层的数值。
*
* 如果想要获取到下一层的值，需要使用 school.name 这种形式。
* */
    school:{
        name:'清华大学!',
        url:"https://baidu.com",
    }
}
复制代码

1. text和extarea元素使用value属性和input事件。
2. checkbox和radio使用checked属性和change事件。
3. select使用value属性和change事件。
复制代码

<!--普通写法-->
单向数据绑定：<input type="text" v-bind:value="name" id="1"/><br/>
            <label for="1"></label>
<!--
    Vue实列是和容器一一对应的，div才是这个容器。
    而input只是这个容器中的一个标签，可以存在任意多个。
-->
双向数据绑定：<input type="text" v-model:value="name" id="2"/><br/>
            <label for="2"></label>
<!--简化写法-->
单向数据绑定：<input type="text" :value="name" id="3"/><br/>
            <label for="3"></label>
双向数据绑定：<input type="text" v-model="name" id="4"/><br/>
            <label for="4"></label>
<!--
    如下代码是错误的。因为v-model只能应用在表单类元素（输入元素）上
                   简单说就是必须存在 value值。
   然而h2不存在value值，在前端页面就没有数据的输入，所以根本就涉及不到
   Vue中data数据的替换。所以就没有涉及到双向的。
   除了表单元素的value值使用双向的 v-model 命令。
   其他的HTML元素使用v-model 命令会报错。
-->
<h2 v-model:value="name">你好啊</h2>
<input type="checkbox" id="check" name="singleChoice">
<label for="check">jack</label>
复制代码

.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
.camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
复制代码

.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤