ElementはWebページで直接使用します
6948 ワード
1.cssとjsファイルの導入
rel="stylesheet" href="htt://www.com/element-ui.css">
<span style="color:rgb(186,186,186);background-color:rgb(43,43,43);">src=</span><span style="color:rgb(165,194,97);background-color:rgb(43,43,43);">"</span><span style="background-color:rgb(48,48,48);"><span style="color:#e8bf6a;"><strong>http://xxx.com</strong></span></span><span style="color:rgb(165,194,97);background-color:rgb(43,43,43);">/vue.js"</span><span style="color:rgb(232,191,106);background-color:rgb(43,43,43);">> <span style="color:rgb(186,186,186);background-color:rgb(43,43,43);">src=</span><span style="color:rgb(165,194,97);background-color:rgb(43,43,43);">"</span><span style="background-color:rgb(48,48,48);"><span style="color:#e8bf6a;"><strong>http://xxx.com</strong></span></span><span style="color:rgb(165,194,97);background-color:rgb(43,43,43);">/element-ui.js"</span><span style="color:rgb(232,191,106);background-color:rgb(43,43,43);">>
2.インスタンスvue
htmlコード:/span>html> xmlns="http://www.w3.org/1999/xhtml">
wintdemo http-equiv="Content-Type" content="text/html; charset=utf-8" /> name="viewport" content="width=device-width, initial-scale=1.0"> rel="stylesheet" href="http://xxx.com/element-ui.css"> rel="stylesheet" href="http://xxx.com/font-awesome.min.css"> id="app"><span style="color:#bababa;">src=</span><span style="color:#a5c261;">"http://xxx.com/vue.js"</span><span style="color:#e8bf6a;">> <span style="color:#bababa;">src=</span><span style="color:#a5c261;">"http://xxx.com/element-ui.js"</span><span style="color:#e8bf6a;">> <span style="color:#bababa;">src=</span><span style="color:#a5c261;">"http://xxx.com/axios.min.js"</span><span style="color:#e8bf6a;">> <span style="color:#bababa;">src=</span><span style="color:#a5c261;">"http://xxx.com/lodash.js"</span><span style="color:#e8bf6a;">>
jsコード:
</span><span style="color:#e8bf6a;"> </span><span style="color:#cc7832;"><strong>new </strong></span><span style="color:#9876aa;">Vue</span>({ <span style="color:#9876aa;">data</span>:{}<span style="color:#cc7832;">, </span><span style="color:#cc7832;"> </span><span style="color:#9876aa;">methods</span>:{}<span style="color:#cc7832;">, </span><span style="color:#cc7832;"> </span><span style="color:#ffc66d;">created</span>:<span style="color:#cc7832;"><strong>function</strong></span>(){}<span style="color:#cc7832;">, </span><span style="color:#cc7832;"> </span><span style="color:#ffc66d;">mounted</span>:<span style="color:#cc7832;"><strong>function</strong></span>(){} }).<span style="color:#e8bf6a;background-color:#303030;"><strong>$</strong></span><span style="color:#d0d0ff;background-color:#303030;">mount</span>(<span style="color:#6a8759;">'#app'</span>)<span style="color:#cc7832;">;; </span><span style="color:#e8bf6a;">