11<template lang="html">
22 <div >
3- <div class =" title"
4- @Vue3js.cn
5- <button @click =" run"
6- </div>
3+ 74 <div class =" example"
85 <div class =" codemirror"
96 <codemirror ref =" cmEditor" v-model =" code" :options =" cmOption"
107 </div>
8+ <div class =" title"
9+ @Vue3js.cn
10+ <button @click =" run"
11+ </div>
1112 <div class =" result"
1213 <h3 >result:</h3>
1314 <div id =" iframe"
1718</template >
1819
1920<script >
21+ import dedent from " dedent"
2022import { codemirror } from " vue-codemirror"
2123// base style
2224import " codemirror/lib/codemirror.css"
@@ -66,15 +68,38 @@ export default {
6668 },
6769 data () {
6870 return {
69- code: ` <!DOCTYPE html>\n <html>\n <head>\n <meta charset=\" utf-8\" >\n <title>Vue 测试33实例 - 菜鸟教程(runoob.com)</title>\n <script src=\" https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js\" ></script>\n </head>\n <body>\n <div id=\" app\" >\n <p>原始字符串: {{ message }}</p>\n <p>计算后反转字符串: {{ reversedMessage }}</p>\n </div>\n\n <script>\n let vm = new Vue({\n el: '#app',\n data: {\n message: 'Runoob!'\n },\n computed: {\n // 计算属性的 getter\n reversedMessage: function () {\n return this.message.split('').reverse().join('')\n }\n }\n })\n </script>\n </body>\n </html>`
71+ code: `
72+ <!DOCTYPE html>
73+ <html>
74+ <head>
75+ <meta charset="utf-8">
76+ <title>Vue 测试实例</title>
77+ <script src="https://doc.vue-js.com/js/vue.js">${ " </script>" }
78+ </head>
79+ <body>
80+ <div id="app">
81+ <p>{{ message }}</p>
82+ </div>
83+ <script>
84+ new Vue({
85+ el: '#app',
86+ data: {
87+ message: 'Hello Vue.js!'
88+ }
89+ })
90+ ${ " </script>" }
91+ </body>
92+ </html>
93+ ` ,
7094 cmOption: {
7195 tabSize: 4 ,
7296 foldGutter: true ,
7397 styleActiveLine: true ,
7498 lineNumbers: true ,
7599 line: true ,
76100 keyMap: " sublime"
77- mode: " text/x-vue"
101+ mode: " text/html"
102+ htmlMode: true ,
78103 theme: " base16-dark"
79104 extraKeys: {
80105 F11 (cm ) {
@@ -85,7 +110,10 @@ export default {
85110 }
86111 }
87112 }
88- };
113+ }
114+ },
115+ mounted () {
116+ this .run ();
89117 },
90118 methods: {
91119 run () {
@@ -158,16 +186,10 @@ export default {
158186 border none ;
159187}
160188.example {
161- display flex ;
162189 height 70vh ;
163- background #f7f7f7 ;
164- padding 30px ;
165- border-radius 15px ;
166190}
167191.codemirror ,
168192.result {
169- width 50% ;
170- height 100% ;
171193 margin 0 ;
172194 overflow auto ;
173195 padding-top 0 ;
@@ -180,7 +202,7 @@ export default {
180202 word-break break-all ;
181203 word-wrap break-word ;
182204}
183- .result h3 {
205+ .result h3 {
184206 margin 0 ;
185207}
186- </style >
208+ </style >
0 commit comments