526互联

vue: number addition

发布时间 2023-07-15 23:25:49作者: ®Geovin Du Dream Park™

 

单页应用：（Single Page App, SPA）体现了其强大的优势。
页面是局部刷新的，响应速度快，不需要每次加载所有的CSS/JS。
前后端分离，前端（手机端）不受后端（服务器端）的开发语言的限制。
Angular,React ,Vue.js框架都是很好的选择。


https://github.com/vuejs/awesome-vue

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="app">
    <button v-on:click="a++">a+1</button>
    <button v-on:click="b++">b+1</button>
    <p>number+a={{add1}}</p>
    <p>number+b={{add2}}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             a:0,
             b:0,
             number:100
           }
        },
        computed: {
            add1:function(){
                console.log("number+a");
                return this.a+this.number
            },
            add2:function(){
                console.log("number+b")
                return this.b+this.number
            }
        }
      //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
 </script>
</body>
</html>