简单小案例分析

一、容器和实例关系

<div class="app">
    <h1>Hello,{{name}}</h1>
</div>
<div class="app">
    <h1>Hello,{{name}}</h1>
</div>

<script>
    //创建Vue实例
    new Vue({
        el:".app",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data:{  //data中用于存储数据，数据供el所指定的容器去使用
            name:'小田'
        }
    })
</script>

效果图如下：

我们发现，只有第一个容器被渲染。

<div id="app">
    <h1>Hello,{{name}},{{address}}</h1>
</div>

<script>
    //创建Vue实例
    new Vue({
        el:"#app",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data:{  //data中用于存储数据，数据供el所指定的容器去使用
            name:'小田'
        }
    })
    new Vue({
        el:"#app",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data:{  //data中用于存储数据，数据供el所指定的容器去使用
            address:'重庆市'
        }
    })
</script>

效果图如下：

我们发现，容器只运用了第一个实例。

<div id="app1">
    <h1>Hello,{{name}},{{address}}</h1>
</div>
<div id="app2">
    <h1>Hello,{{name}},{{address}}</h1>
</div>

<script>
    //创建Vue实例
    new Vue({
        el:"#app1",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data:{  //data中用于存储数据，数据供el所指定的容器去使用
            name:'小田',
            address: '山东省'
        }
    })
    new Vue({
        el:"#app2",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data:{  //data中用于存储数据，数据供el所指定的容器去使用
            name:'小嵩',
            address:'重庆市'
        }
    })
</script>

效果图如下：

容器和Vue实例是一对一的的关系，是一一对应的。 

二、{{xxx}}中的xxx

<div id="app">
    <h1>Hello,{{name}},{{age>=18?"成年":"未成年"}}</h1>
</div>

<script>
    //创建Vue实例
    new Vue({
        el:"#app",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data:{  //data中用于存储数据，数据供el所指定的容器去使用
            name:'小田',
            age: 18
        }
    })

效果图如下：

{{xxx}}中的xxx要写js表达式，且xxx会自动读取到对应实例中data中的值。

js表达式和js代码区别：

• 一个表达式会产生一个值，可以放在任何一个需要值的地方。
• 代码为语句，例如if(){},for(){}。