2020年5月

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <div id="app"> <p>{{msg}}</p> <input type="text" name="" id="" value="" v-model="num1"/> <select v-model="calsymbol"> <option value ="+">+</option> <option value ="-">-</option> <option value ="*">*</option> <option value ="/">/</option> </select> <input type="text" name="" id="" value=""v-model="num2" /> <input type="button" name="" id="" value="=" @click="cal"/> <input type="text" name="" id="" value="" v-model="result"/> </div> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ msg:"请输入你想计算的数字", num1:0, num2:0, result:0, calsymbol:'+' }, methods:{ cal(){ this.result=eval('parseInt(this.num1)'+this.calsymbol+'parseInt(this.num2)') } } }) </script> <body> </body> </html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" name="" id="" value="开始" v-on:click="start"/>
            <input type="button" name="" id="" value="停止" v-on:click="stop"/>
            <p>{{msg}}</p>
        </div>
        <script type="text/javascript">
            var vm=new Vue({
                el:'#app',
                data:{
                    msg:'这是一个简单的小情歌',
                    inervalid:null
                },
                methods:{
                    start(){
                        if(this.inervalid!=null)
                        {
                            return
                        }
                        this.inervalid=setInterval(()=>{
                            this.msg=this.msg.substring(1)+this.msg.substring(0,1)
                        },400)
                    },
                    stop(){
                        clearInterval(this.inervalid)
                        this.inervalid=null

                    }
                }
            })
        </script>
    </body>
</html>

setInterval(()=>{
this.msg=this.msg.substring(1)+this.msg.substring(0,1)
},400)
这里使用了箭头运算符,箭头运算符创建的函数的this是箭头运算符所属作用域的this
语法真的好像c++...

进入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是用来绑定属性的