Vue.js实战入门-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45102155/article/details/106108143

Vue 是一套用于构建用户界面的渐进式框架
优点：易用灵活高效
官网：

https://cn.vuejs.org/

引入Vue.js

开发环境
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        <br/>
        <button @click="bt('45',$event)">点击</button>
        <br>
        {{haha}}
        <br>
        {{gs}}
        <button @click='add()'>添加</button>
        <br>
        {{person.age}}
        <button @click='xiugai()'>改年龄</button>
    </div>
    
   
</body>
<script>
   new Vue({
       el:'#app',
       data:{      //存放数据
           msg:'我是msg',
           price:234.45,
           gs:1,
           person:{
               name:'张三',
               age:18
           }
       },
       methods:{     //存放方法
           bt:function(i,e){
               alert(`我是按钮${i}`);
               console.log(e); 
           },
           add(){
               this.gs++
           },
           xiugai(){
               this.person.age++
           }
       },
       computed:{    //计算属性    处理和加工data里的数据
           haha(){
               return '价格为:'+this.price.toFixed(2);
           }
       },
       watch:{    //事件侦听
           gs:function(n,o){
              
            this.price = n * this.price;
             
           },
           person:{

            deep:true,   //深监听
            
            handler:function(n1){
                
                console.log(n1);
            }
           }
       }

   })
</script>
</html>

Vue项目的基本介绍