// 声明式渲染 {{smsxl1}}
        <!-- 声明式渲染 -->
       <div id="smsxl">声明式渲染:{{smsxl1}}</div>

        var smsxl = new Vue({
            el:"#smsxl",
            data:{
                smsxl1:"声明式渲染"
            }
        });

        // 还可以像这样来绑定元素  v-bind:title
        <!-- 还可以像这样来绑定元素 -->
        <div id="tost">
            <span v-bind:title="ti"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
        </div>

        var vm = new Vue({
            el:"#tost",
            data:{
               ti:new Date().toLocaleString()
            }
        });

        // 条件与循环 v-if="tr"
        <!-- // 条件与循环 -->
        <div id="root">
            <span v-if="tr">显示了</span>
        </div>

        let ob = new Vue({
            el:"#root",
            data:{
                tr:true
            }
        }); 
        
        
        //  === 条件与循环 可以绑定数组的数据来渲染一个项目  v-for="todo in ti
        <!-- // 条件与循环 可以绑定数组的数据来渲染一个项目 -->
        <div id="root">
            <li  v-for="todo in ti">  
                {{todo.text}}
            </li>
        </div>

        let ob = new Vue({
            el:"#root",
            data:{
                ti:[
                    {text:1111},
                    {text:2222},
                    {text:3333}
                ]
            }
        });

        // 处理用户输入 v-on:click="res"
        <!-- 处理用户输入 -->
        <div id="root">
            {{ms}}
            <button v-on:click="res">反转</button>
        </div>

        // 处理用户输入
        let ob = new Vue({
            el:"#root",
            data:{
                ms:"dsfasdfasd"
            },
            methods: {
                res:function (){
                    this.ms = this.ms.split('').reverse().join('');
                }
            },
        });

        // 组件化应用构建
        <!-- 组件化应用构建 -->
        // 后续组件基础知识后，回头再学习下。

        // ===  Vue 实例
        // 创建一个 Vue 实例
        let vm = new Vue({});
        var vm = new Vue({});


        //  === 数据与方法
        <!-- 数据与方法 -->
        <div id="root">
            {{data}}
        </div>

        let data = {a:1};
        let vm = new Vue({
            el:"#root",
            data:{
                data:data
            }
        });

        data.a = vm.a; //是对的。true;
        data.a = 3;
        data.a = vm.a; //3

        vm.$data = data;
        vm.$el = id选择器
        vm.$watch(a,function (xc,lc){  //监控新老变量
            conslo.log();
        });

        // 实例生命周期钩子 created:function (){}
        let vm=new Vue({
            el:"",
            data:{

            },
            created:function (){
                //生命周期钩子函数
            }
        });

        //  === 插值
        // 文本 {{name}}
        // v-html=""
        // v-once
        // v-bind:id  v-bind:class="pa"  
        // v-on="click"
        <!-- // 插值 -->
        <!-- // 文本 -->
        <div id="root">{{text}}</div>

        <!-- v-once 内容不会改变。 -->
        <div id="root" v-once>
            {{htmla}}
        </div>

        let vm = new Vue({
            el:"#root",
            data:{
                text:"内容"
            }
        });  

        // 原始 HTML
        let vm = new Vue({
            el:"#root",
            data:{
                htmla:"<div>aaaaaaaaaaaaa</div>",
                htmlb:"<div>aaaaaaaaaaaaa</div>"
            }
        });   

        // Attribute  DOM 绑定 class 写css
        <!-- Attribute  DOM 绑定 class 写css -->
        <div id="root" v-bind:class="color">
            {{text1}}
        </div>

        let vm = new Vue({
            el:"#root",
            data:{
                text1:"dasdfdsa",
                text2:"dsafdskljf",
                color:"red"
            }
        });

        <style>
            .red {
                color: red;
            }
        </style>

        // 使用 JavaScript 表达式  Vue.js 都提供了完全的 JavaScript 表达式支持。只能包含单个表达式
        {{ number + 1 }}
        {{ ok ? 'YES' : 'NO' }}
        {{ message.split('').reverse().join('') }}
        <div v-bind:id="'list-' + id"></div>

        //  === 指令
        <p v-if="seen">现在你看到我了</p>

        // 指令 v-if="参数"
        let vm = new Vue({
            el:"#root",
            data:{
                text1:"dasdfdsa",
                text2:"dsafdskljf",
                color:"red",
                seen:true
            }
        });

        // 参数 
        // v-bind:参数或 [JavaScript表达式]
        // v-on:click="参数或方法"
        <div id="root" v-bind:href="url"></div>
        <div id="root" v-on:click="doSomething"></div>

        // 动态参数
        <div id="root" v-bind:[js表达式]=""></div>
        <div id="root" v-on:[eventName]="方法"></div>
        //对动态参数的值的约束
        //动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
        
        对动态参数表达式的约束
        <a v-bind:['foo' + bar]="value"> ... </a>

        // 动态参数
        <div id="root" v-if="yes">4444
            <a v-bind:href="url">11111</a>
            <div @click="click1">   //等同于 v-on:click="click1"
                <!-- <div @click="click2">12222</div> -->
                <div @click.stop="click2">12222</div>
            </div>
        </div>

        // 动态参数
        let vm = new Vue({
            el:"#root",
            data:{
                yes:"no",
                url:"http://www.baidu.com"
            },
            methods: {
                click1:function(){
                    console.log("click1");
                },
                click2:function(){
                    console.log("click2");
                }
            },
        });

        //  === 计算属性和侦听器
        // 计算属性
        let vm=new Vue({
            el:"#root",
            data:{
                data1:"111"
            },
            computed:function (){
                console.log("进行复杂的表达式");
            }
        });

        // === Class 与 Style 绑定
        // 用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。
        // 绑定 HTML Class
        // 对象语法
        // <div id="root" v-bind:class="{name:value}"></div>
    
        // 可以多个class 共存
        // <div
        // class="static"
        // v-bind:class="{ active: isActive, 'text-danger': hasError }">
        // </div>
    
        // data: {
        // isActive: true,
        // hasError: false
        // }
      
        // 对象语法 v-bind:class="['aa','bb']" 
        // 数组语法  v-bind:class="['aa','bb']" 

        // 绑定内联样式  v-bind:style=""

        // === 条件渲染
        v-if="abc"
        v-if-else="abc === 1"
        v-if=""
        v-else-if=""
        v-else=""
        v-show="表达式"

        // === 列表渲染
          <!-- 列表渲染
    用 v-for 把一个数组对应为一组元素 -->
    <div id="root">
        <ul>
            <li v-for="item in arr">
            <!-- <li v-for="(item,index) in arr"> -->
               {{index}} {{item.age}}   
            </li>
        </ul>
    </div>

    <div id="root1">
        <ul>
            <li v-for="(value, name, index) in object1">
                {{ index }}: {{ name }}: {{ value }}
              </li>
        </ul>
    </div>

    <script>

    // 列表渲染
    // 用 v-for 把一个数组对应为一组元素

    let vm = new Vue({
        el:"#root2",
        data:{
            arr:[
                {age:"11111"},
                {age:"22222"}
            ],

            object1:{
                name:"aaaaa",
                name:"bbbbb"
            }
        },

    });

    </script>

     // 维护状态
     <div id="root2"></div>
     <ul>
         <li v-for="(value,name,index) in object1" v-bind:key="object1.id">
             {{ index }}: {{ name }}: {{ value }}
         </li>
     </ul>
 </div>

     //数组更新检测
     vm.items.push({ message: 'Baz' })

    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()

        <!-- 数组更新检测 -->
        <div id="root2">
            <ul>
                <li v-for="(item, index) in arr" >
                    {{index}} - {{item.age}}
                </li>
            </ul>
        </div>
    
        <script>
    
        // 列表渲染
        // 用 v-for 把一个数组对应为一组元素
    
        var vm = new Vue({
            el:"#root2",
            data:{
                arr:[
                    {age:"11111"},
                    {age:"22222"}
                ],
    
                object1:{
                    name1:"aaaaa",
                    name2:"bbbbb"
                }
            },
    
        });
        </script>

    //替换数组