vue基本指令

逃离我推掉我的手 2022-02-21 08:44 218阅读 0赞

> <!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">  
>       
>     <p v-cloak>++++++++ \{ \{ msg \}\} ----------</p>  
>     <h4 v-text="msg">==================</h4>  
>       
>     
> 
>     <div>\{ \{msg2\}\}</div>  
>     <div v-text="msg2"></div>  
>     <div v-html="msg2">1212112</div>
> 
>       
>       
>       
>     
> 
>       
>     
> 
>   
>     <input type="button" value="按钮" @click="show">  
>   </div>
> 
>   
>   <script src="./lib/vue-2.4.0.js"></script>
> 
>   <script>  
>     var vm = new Vue(\{  
>       el: '\#app',  
>       data: \{  
>         msg: '123',  
>         msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',  
>         mytitle: '这是一个自己定义的title'  
>       \},  
>       methods: \{ // 这个 methods属性中定义了当前Vue实例所有可用的方法  
>         show: function () \{  
>           alert('Hello')  
>         \}  
>       \}  
>     \})
> 
>   
>     /\* document.getElementById('btn').onclick = function()\{  
>       alert('Hello')  
>     \} \*/  
>   </script>  
> </body>
> 
> </html>