Vue--基本語法
阿新 • • 發佈：2020-12-01
Vue 基礎語法
1.插值語法-----Mustache 鬍子語法
可以放 變數 也可以放 表示式
![]()
![]()
3.v-html 解析出HTML 展示
![]()
4.v-text
與Mustache相似 並用會覆蓋
![]()
5.v-pre 顯示原本，不傳值
![]()
6.v-cloak 相當於一個宣告
[v-cloak] {
display: none;
} 宣告隱藏 程式碼解析跟java 一樣從上到下 走到app 時還沒有解析 走完了就解析 再顯示
![]()
![]()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <2. v-once 只加載一次，後面不會改變（響應式的會跟著改變）div id="app"> <h2>{{msg}}</h2> <h2>{{msg}}+泰坦尼克號</h2> <h2>{{fristName+lastName}}</h2> <h2>{{fristName+' '+lastName}}</h2> <h2>{{couter*2}}</h2> </div> <script src="../js/vue.js"></script> <script> //let(變數)、 const(常量) //宣告式程式設計 const app=new Vue({ el: '#app', data:{ msg:"你好", fristName: "李", lastName: "銀河", couter: 200 } }) </script> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h2>url</h2> <h2 v-html="url"></h2> </div> <script src="../js/vue.js"></script> <script> //let(變數)、 const(常量) //宣告式程式設計 const app=new Vue({ el: '#app', data:{ msg:"你好", url: '<a href="http://www.baidu.com">百度一下</a>' } }) </script> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h2>{{msg}}，李銀河</h2> <h2 v-text="msg">李銀河</h2> </div> <script src="../js/vue.js"></script> <script> //let(變數)、 const(常量) //宣告式程式設計 const app=new Vue({ el: '#app', data:{ msg:"你好" } }) </script> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h2>{{msg}}</h2> <h2 v-pre>{{msg}}</h2> </div> <script src="../js/vue.js"></script> <script> //let(變數)、 const(常量) //宣告式程式設計 const app=new Vue({ el: '#app', data:{ msg:"你好" } }) </script> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> //此處宣告隱藏 [v-cloak] { display: none; } </style> </head> <body> <div id="app" v-cloak> <h2>{{msg}}</h2> </div> <script src="../js/vue.js"></script> <script> //let(變數)、 const(常量) //宣告式程式設計 setTimeout(function(){ const app=new Vue({ el: '#app', data:{ msg:"你好" } }) },1000) </script> </body>