格式 · vue.js

[TOC] ### vue.js 1. 引入vue.sj cdn 2. 元素綁定事件 @click="handleClick"、@keyup.enter="submit" 3. 如下代碼：（data：msg："chang" 自定義） ~~~ <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <div id="test" @click="handleClick"> //綁定事件 {{msg}} //data中的msg </div> <script> //創建 vue對象實現動態渲染數據 new Vue({ //設置作用位置 el:"#test", //數據內容 //data:中msg中的內容可以是自己定義的也可以是在接口上面的數據 data:{ msg:"hello" }, //方法 methods:{ //自定義方法（上面元素綁定的事件） handleClick:function(){ alert(1); this.msg="change" } } }) </script> ~~~ ### data中的msg從接口取數據 ~~~ <!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> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> </head> <body> <div id="test" @click="handleClick"> {{msg}} </div> <script> //創建 vue對象實現動態渲染數據 new Vue({ //設置作用位置 el:"#test", //數據內容 data:{ msg:"hello" }, //方法 methods:{ //自定義方法 handleClick:function(){ var self=this; $.ajax({ type: "get", url: "https://api.douban.com/v2/book/search?q=%E4%B8%89%E4%BD%93&cont=1", dataType: "jsonp", success: function (data) { var test=data.books[0].subtitle; console.log(test); self.msg=test; }, error: function (xhr) { document.body.innerHTML = xhr.status; } }) // alert(1); } } }) </script> </body> </html> ~~~