初探vue --大二下第十周

vue

vue是一个渐进式的框架，渐进式意味着可以把vue作为应用的一部分嵌入其中，然后带来更丰富的交互体验

有很多特点和web开发中常见的高级功能
解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟dom

<div id="app">{{message}}</div>
<script src="vue.js"></script>
<script>
    // 声明式编程，之前的依赖于原生js的编程范式称之为命令式编程
    const app = new Vue({
        el:'#app',//用于挂载需要管理的元素
        data: {//定义数据
            message:"hello world!"
        }
    })
    // 可以让数据和代码完全分离
</script>

上面是vue版本的helloworld

<div id="app">
    <h2>当前记数: {{counter}}</h2>
    <!-- <button v-on:click='counter ++'>+</button>
    <button v-on:click='counter --'>-</button> -->
    <button v-on:click = 'add'>+</button><!-- v-on:click是添加事件，也可以@click @就是一个语法糖 -->
    <button v-on:click = 'sub'>-</button>
</div>

<script src="vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter : 0
        },
        methods: {//可以添加的方法
            add : function () {
                this.counter ++;
                console.log('+++');
            },
            sub : function () {
                this.counter --;
                console.log('---');
            }
        }
    })
</script>

上面是一个简单的计数器的demo

vue的MVVM

MVVM就是Model-View-ViewModel

在上面的计数器demo里面，script标签上方的内容就是view部分，在new Vue里面的data就是model，而new Vue本身就是一个View-Model

小结

先是国庆假期，然后返校之后和大家一起做了纳新系统，直到这周才有机会继续自主学习。