vue 例3

時間 2019-11-12
標籤 vue 简体版
原文原文鏈接
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>vue 3</title>
  6         <style>
  7             .message-container {
  8                 margin: 5px 0;
  9                 border: 1px dashed lightcoral;
 10                 text-align: left;
 11             }
 12 
 13             .message-container div {
 14                 padding-left: 10px;
 15             }
 16         </style>
 17     </head>
 18     <body>
 19         <div id="app">
 20             <message name="gua"></message>
 21             <message name="xiao gua"></message>
 22             <!-- <button v-on:click="handleToggleTimer">開關 timer</button> -->
 23             <!-- v-on:click 能夠縮寫成 @click, 在 vue 裏面這樣的縮寫很常見, 多寫寫就會記下來 -->
 24             <button @click="handleToggleTimer">開關 timer</button>
 25             <!-- v-if 表示若是 showTimer 的值爲 true, 那麼就會渲染 timer 組件 -->
 26             <!-- 組件會在後面描述 -->
 27             <div v-if="showTimer">
 28                 <timer></timer>
 29             </div>
 30             <markdown-editor></markdown-editor>
 31         </div>
 32 
 33         <!-- 引入 vue -->
 34         <!-- 注意, 工做中並非這樣引入 vue 的, 咱們先用最簡單的方式引入, 以後會有複雜例子 -->
 35         <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
 36         <script src="https://unpkg.com/marked@0.3.6"></script>
 37         <script>
 38             const log = console.log.bind(console)
 39 
 40             // 使用 Vue.component 能夠定義一個組件, 第一個參數是組件的名稱
 41             // 定義組件以後能夠直接在 html 裏面使用
 42             Vue.component('message', {
 43                 // props 用來指定組件能夠接收哪些屬性
 44                 // 在 html 中使用組件的時候能夠直接經過 name="xxx" 傳遞值
 45                 // 傳遞的值能夠在組件內部使用
 46                 // props 相似 react 組件的 props
 47                 props: ['name'],
 48                 // template 的值是一個 html 格式的字符串
 49                 // 這個字符串會替換掉組件, 也就是 <message></message> 組件的內容會換成 template 的值
 50                 // 注意 template 裏面的變量能夠從 props 中獲取
 51                 template: `
 52                     <div class="message-container">
 53                         <div>Hello {{ name }}</div>
 54                         <div>大寫 {{ name.toUpperCase() }}</div>
 55                     </div>
 56                 `,
 57             })
 58 
 59             Vue.component('timer', {
 60                 // 組件中依然能夠使用 data 這個屬性, 可是 data 的值不能是一個對象
 61                 // 必須是一個函數, 而後在函數內部返回一個對象, 用來表示組件內部的數據
 62                 // 依然相似 react 組件的 state
 63                 data: function() {
 64                     return {
 65                         secondsElapsed: 0,
 66                     }
 67                 },
 68                 template: `
 69                     <div>
 70                         啓動時間: {{ secondsElapsed }}
 71                     </div>
 72                 `,
 73                 methods: {
 74                     tick: function() {
 75                         // 每次調用 tick 方法都會讓 secondsElapsed 增長 1
 76                         this.secondsElapsed += 1
 77                     }
 78                 },
 79                 // created 是實例建立完成後會被調用的方法
 80                 // 相似 react 中的 componentDidMount
 81                 created: function() {
 82                     console.log('定時器組件 did mount')
 83                     this.interval = setInterval(() => this.tick(), 1000)
 84                 },
 85                 // destroyed 表示實例銷燬後會被調用的方法
 86                 // 相似 react 中的 componentWillUnmount
 87                 destroyed: function() {
 88                     console.log('定時器組件 will unmount')
 89                     clearInterval(this.interval)
 90                 },
 91             })
 92 
 93             Vue.component('markdown-editor', {
 94                 data: function() {
 95                     return {
 96                         mdString: '輸入 *markdown 語法* 就能看到效果',
 97                     }
 98                 },
 99                 // template 中使用了 v-html 這個指令, 是用來設置元素的 innerHTML 屬性的
100                 // 每次都會將 getRawMarkup 函數的返回值設置爲 innerHTML 的值
101                 template: `
102                     <div className="MarkdownEditor">
103                         <h1>markdown 編輯器</h1>
104                         <h3>原始 md 文本</h3>
105                         <textarea v-model="mdString"></textarea>
106                         <h3>結果預覽</h3>
107                         <div class="content" v-html="getRawMarkup()"></div>
108                     </div>
109                 `,
110                 methods: {
111                     getRawMarkup: function() {
112                         // 由於 textarea 使用了 v-model 指令
113                         // 因此當 mdString 發生變化的時候, getRawMarkup 方法中能夠獲取用戶輸入的 mdString 值
114                         // marked 方法用來把一個 markdown 字符串轉成 html 格式的字符串入
115                         return marked(this.mdString)
116                     },
117                 },
118             })
119 
120             let app = new Vue({
121                 el: '#app',
122                 data: {
123                     showTimer: true,
124                 },
125                 methods: {
126                     // 切換 showTimer 屬性的值
127                     handleToggleTimer: function() {
128                         this.showTimer = !this.showTimer
129                     }
130                 }
131             })
132         </script>
133     </body>
134 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。