VUE框架容器与实例的关系和插值语法以及指令------VUE框架

蔚落 2024-02-18 13:29 67阅读 0赞

> ###  ###
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <title>Document</title>
>         <script src="../js/vue.js"></script>
>     </head>
>     <body>
>         
>         <div class="app">
>             <h1>{
>         {msg}}</h1>
>         </div>
>         <div class="app">
>             <h1>{
>         {msg}}</h1>
>         </div>
>         <div id="app2">
>             <h1>{
>         {name}}</h1>
>         </div>
>         <script>
>             new Vue({
>                 //一个VUE实例可以接管多个容器吗?
>                 //只接管了一个容器
>                 //一旦接管到一个容器后,即便后面有相同的容器,Vue也是不管的
>                 //因为Vue已经接管到容器了
>                 el : ".app",
>                 data : {msg : "HelloVue"}
>             });
>             new Vue({
>                 //先接管了app2
>                el : "#app2",
>                data : {
>                     name : "zhangSan"
>                }
>             });
>             new Vue({
>                 //接管不了已经被接管的容器
>                 el : "#app2",
>                 data : {
>                     name : "jackson"
>                 }
>             });
>         </script>
>     </body>
>     </html>
> 
> <!DOCTYPE html>
> 
> <html lang="en">
> 
> <head>
> 
> <meta charset="UTF-8">
> 
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> 
> <title>Document</title>
> 
> <script src="../js/vue.js"></script>
> 
> </head>
> 
> <body>
> 
> 
> 
> <div class="app">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> </div>
> 
> <div class="app">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> </div>
> 
> <div id="app2">
> 
> <h1>\{ \{name\}\}</h1>
> 
> </div>
> 
> <script>
> 
> new Vue(\{
> 
> //一个VUE实例可以接管多个容器吗?
> 
> //只接管了一个容器
> 
> //一旦接管到一个容器后,即便后面有相同的容器,Vue也是不管的
> 
> //因为Vue已经接管到容器了
> 
> el : ".app",
> 
> data : \{msg : "HelloVue"\}
> 
> \});
> 
> new Vue(\{
> 
> //先接管了app2
> 
> el : "\#app2",
> 
> data : \{
> 
> name : "zhangSan"
> 
> \}
> 
> \});
> 
> new Vue(\{
> 
> //接管不了已经被接管的容器
> 
> el : "\#app2",
> 
> data : \{
> 
> name : "jackson"
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <script src="../js/vue.js"></script>
>         <title>Document</title>
>     </head>
>     <body>
>         
>         
>         
>         
>         
>         
>         <div id="app">
>             
>             <h1>{
>         {msg}}</h1>
>             
>             <h1>{
>         {sayHello()}}</h1>
>             <h1>{
>         {100}}</h1>
>             <h1>{
>         {"Hello Vue!!!"}}</h1>
>             <h1>{
>         {1 + 1}}</h1>
>             <h1>{
>         {"Hello" + "Vue123"}}</h1>
>             <h1>{
>         {msg + 1}}</h1>
>             
>             <h1>{
>         {gender ? "男" : "女"}}</h1>
>             
>             <h1>{
>         {msg.split("").reverse().join("")}}</h1>
>             <h1>{
>         {Date.now()}}</h1>
>             <h1>{
>         {Math.ceil(3.14)}}</h1>
>         </div>
>         <script>
>             var i = 100;
>             // Vue程序
>             new Vue({
>                 el : "#app",
>                 data : {
>                     // 我们将这个msg称之为变量
>                     // 这行代码就可以视为变量的声明
>                     msg : "abcdefg",
>                     // 这个变量也可以是一个函数
>                     sayHello : function()
>                     {
>                         console.log("Hello Vue!");
>                     },
>                     gender : true
>                 }
>             });
>         </script>
>     </body>
>     </html>
> 
> <!DOCTYPE html>
> 
> <html lang="en">
> 
> <head>
> 
> <meta charset="UTF-8">
> 
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> 
> <script src="../js/vue.js"></script>
> 
> <title>Document</title>
> 
> </head>
> 
> <body>
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> <div id="app">
> 
> 
> 
> <h1>\{ \{msg\}\}</h1>
> 
> 
> 
> <h1>\{ \{sayHello()\}\}</h1>
> 
> <h1>\{ \{100\}\}</h1>
> 
> <h1>\{ \{"Hello Vue!!!"\}\}</h1>
> 
> <h1>\{ \{1 + 1\}\}</h1>
> 
> <h1>\{ \{"Hello" + "Vue123"\}\}</h1>
> 
> <h1>\{ \{msg + 1\}\}</h1>
> 
> 
> 
> <h1>\{ \{gender ? "男" : "女"\}\}</h1>
> 
> 
> 
> <h1>\{ \{msg.split("").reverse().join("")\}\}</h1>
> 
> <h1>\{ \{Date.now()\}\}</h1>
> 
> <h1>\{ \{Math.ceil(3.14)\}\}</h1>
> 
> </div>
> 
> <script>
> 
> var i = 100;
> 
> // Vue程序
> 
> new Vue(\{
> 
> el : "\#app",
> 
> data : \{
> 
> // 我们将这个msg称之为变量
> 
> // 这行代码就可以视为变量的声明
> 
> msg : "abcdefg",
> 
> // 这个变量也可以是一个函数
> 
> sayHello : function()
> 
> \{
> 
> console.log("Hello Vue!");
> 
> \},
> 
> gender : true
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <title>Document</title>
>         <script src="../js/vue.js"></script>
>     </head>
>     <body>
>         
>         
>         
>         
>         
>         
>         
>         
>         
>         
>         <div id="app">
>             <h1>{
>         {msg}}</h1>
>             <h1 v-if="msg === '123'">{
>         {msg}}</h1>
>         </div>
>         <script>
>             // Vue程序
>             new Vue({
>                 el : "#app",
>                 data : {
>                     msg : "Hello Vue"
>                 }
>             });
>         </script>
>     </body>
>     </html>
> 
> <!DOCTYPE html>
> 
> <html lang="en">
> 
> <head>
> 
> <meta charset="UTF-8">
> 
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> 
> <title>Document</title>
> 
> <script src="../js/vue.js"></script>
> 
> </head>
> 
> <body>
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> <div id="app">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> <h1 v-if="msg === '123'">\{ \{msg\}\}</h1>
> 
> </div>
> 
> <script>
> 
> // Vue程序
> 
> new Vue(\{
> 
> el : "\#app",
> 
> data : \{
> 
> msg : "Hello Vue"
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>