Vue學習之vue例項中的資料、事件和方法
阿新 • • 發佈：2019-01-06
<!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>vue.js</title> <script src="vue.js"></script> </head> <body> <!-- 掛載點、模板、例項之間的關係 掛載點 指的是Vue例項裡的el屬性對應的dom節點 id 模板 指的是掛載點內部的內容，例項裡template屬性的內容 例項：定義掛載點，把定義的資料與模版結合起來生成要展示的內容，再把這個內容放在掛載點中 載入資料的方法： 1、插值表示 2、v-text:將內容進行轉義 3、v-html：不會轉義 事件： v-on:click="handleClick" 或者 @click="handleClick" 面向資料 --> <div id="root"> <h1 @click="handleClick">{{msg}}</h1> </div> <script> new Vue({ el:"#root", data: { msg:"hello dog!", number: 123 }, methods: { handleClick: function() { // alert(123) this.msg = "twodoge" } } }) </script> </body> </html>