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;">