进入https://www.dcloud.io/ 安装HbuilderX编辑器(自动提示不提示就多重启几遍,多等一会)
下载vue.js https://cdn.jsdelivr.net/npm/vue/dist/vue.js
打开HBuilderX编辑器,将vue.js放入同目录,并输入下列代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
            <div id="app">
              {{ message }}
            </div>
            <script type="text/javascript">
                var app = new Vue({
                  el: '#app',
                  data: {
                    message: 'Hello Vue!',
                  }
                })
            </script>

    </body>
</html>

el是控制的div块
data是要写入的数据
div id="app"是被控制的div块
{{ message }}是要插入的数据

v-clock 解决闪烁问题
v-text会覆盖掉所有元素,并且不会闪速
v-html会执行文本内的html语句
v-bind是vue中提供的用于绑定属性的指令(v-bind:可以被简写为一个:)
v-on是用来绑定事件的
v-bind是用来绑定属性的

标签: none

添加新评论