初始Vue

渐进式 JavaScript 框架

通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目

走进Vue

what -- 什么是Vue

可以独立完成前后端分离式web项目的JavaScript框架

why -- 为什么要学习Vue

三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM
可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

special -- 特点

单页面web应用
数据驱动
数据的双向绑定
虚拟DOM

how -- 如何使用Vue

• 开发版本：vue.js
• 生产版本：vue.min.js

<div id="app">
	{{ }}
</div>
<script src="js/vue.min.js"></script>
<script>
	new Vue({
		el: '#app'
	})
</script>

Vue实例

el：实例

new Vue({
    el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

data：数据

<div id='app'>
    {{ msg }}
</div>
<script>
    var app = new Vue({
    	el: '#app',
    	data: {
    		msg: '数据',
    	}
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data为插件表达式中的变量提供数据 -->
<!-- data中的数据可以通过Vue实例直接或间接访问-->

methods：方法

<style>
    .box { background-color: orange }
</style>
<div id='app'>
    <p class="box" v-on:click="pClick">测试</p>
	<p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>
    var app = new Vue({
    	el: '#app',
    	methods: {
            pClick () {
                // 点击测试
            },
            pOver () {
                // 悬浮测试
            }
    	}
    })
</script>
<!-- 了解v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->

computed：计算

<div id="app">
 	<input type="text" v-model="a">
    <input type="text" v-model="b">
    <div>
        {{ c }}
    </div>
</div>

<script>
	// 一个变量依赖于多个变量
    new Vue({
        el: "#app",
        data: {
            a: "",
            b: "",
        },
        computed: {
            c: function() {
                // this代表该vue实例
                return this.a + this.b;
            }
        }
    })
</script>

watch：监听

<div id="app">
 	<input type="text" v-model="ab">
    <div>
        {{ a }}
        {{ b }}
    </div>
</div>

<script>
	// 多个变量依赖于一个变量
    new Vue({
        el: "#app",
        data: {
            ab: "",
            a: "",
            b: "",
        },
        watch: {
            ab: function() {
                // 逻辑根据需求而定
                this.a = this.ab[0];
                this.b = this.ab[1];
            }
        }
    })
</script>

delimiters：分隔符

<div id='app'>
    ${ msg }
</div>
<script>
    new Vue({
    	el: '#app',
    	data: {
    		msg: 'message'
    	},
        delimiters: ['${', '}']
    })
</script>

生命周期钩子

• 表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数
• 钩子函数: 满足特点条件被回调的方法
• 详情参见：

生命周期钩子

new Vue({
    el: "#app",
    data: {
        msg: "message"
    },
    beforeCreate () {
        console.log("实例刚刚创建");
        console.log(this.msg);
    },
    created () {
        console.log("实例创建成功, data, methods已拥有");
        console.log(this.msg);
    },
    mounted () {
        console.log("页面已被vue实例渲染, data, methods已更新");
    }
    // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
})