vue.js是什么？

• vue是一套用于构建用户界面的渐进式框架
• 关注视图层，便于与第三方库或项目整合
• 与现代化工具链以及各种支持类库结合使用时，vue
  也能为复杂的单页应用提供驱动

引入vue的方法

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

第一个小页面 hello vue！

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

hellovue.png

点击事件

<div id ="app">
<button type="button" v-on:click="handleClick">点我</button>
</div>
<script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        name:'点我也没啥用，我没有啥内容',   
                    },
                    methods:{
                        handleClick:function(){
                            alert(this.name);
                        }
                    }
                    })
            </script>

click.png

简单的函数

<div id ="app">
            <h2 v-if ="show">{{name}}</h2>
            <button type="button" @click="handleClick">隐藏/显示</button>
            
        </div>
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        name:'hello world',
                        show:true
                    },
                    methods:{
                        handleClick:function(){
                            this.show = !this.show;
                        }
                    }
                    })
            </script>

结果是鼠标点击之后会将hello world 隐藏

简单计算

<div id ="app">
            <h2>{{age}}</h2>
            <button type="button" v-on:click="handleClick">加一岁</button>
            <button type="button" v-on:click="substrct(5)">减五岁</button>
        </div>
            <script type="text/javascript">
                var app = new Vue({
                    el:'#app',
                    data:{
                        age:30
                    },
                    methods:{
                         
                        handleClick:function(){
                            this.age += 1;
                        },
                        substrct:function(num){
                            if(this.age-num <= 0){
                                alert:'不能再减了'
                            }
                            else{
                                this.age -= num;
                                }
                        }
                    }
                    })
            </script>

• 结果只是单纯的计算而已，只是年龄不会降到零以下