简单小案例分析

一、容器和实例关系

<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}})

效果图如下：