Vue--基本语法
Vue 基础语法
1.插值语法-----Mustache 胡子语法
可以放 变量 也可以放 表达式
<!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>{{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>
2. v-once 只加载一次，后面不会改变（响应式的会跟着改变）
3.v-html 解析出HTML 展示
<!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>
4.v-text
与Mustache相似 并用会覆盖
<!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>
5.v-pre 显示原本，不传值
<!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>
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> <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>
