JavaWeb之Vue入门

Vue是一套常用的前端框架，基于Vue软件开发者不再需要从零开始编程

        Vue基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。ViewModel连接Model和View，ViewModel检测到Model中的数据发生变化时，View会自动更新，反之同理

一、Vue快速入门        

// 引入官方提供的Vue文件
<script src="js/vue.js"></script>

// 在js文件中创建Vue核心对象，定义数据模型
<script>
    new Vue({
        el: "#app", // Vue的控制区域，#开头，对应视图层中某一标签的id，表示这个Vue对象接管对应标签
        data: { // 数据对象
            message: "Hello Vue!"
        }
    })

</script>

// 编写视图
<div id="app">
    <input type="text" v-model="message">
        {{message}} #在视图中直接获得数据对象的值
</div>

        上图的例子中，message会以Hello Vue的初始值显示在页面上；如果人工在页面上修改框内值，也会同步到数据对象中

二、Vue常用指令

        1. v-bind

        为HTML标签绑定属性值，比如设置href,css样式

<div id="app">
    <a v-bind:href="url">教育</a>
    <a :href="url">教育</a>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            url: ""
        }
    })
</script>

        2. v-model

        实现双向绑定

<input type="text" v-model="url">

        3. v-on

        为HTML标签绑定一个事件

// 为input标签绑定一个事件click，一旦click被触发就调用函数handle()
<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">

// 函数在methods中进行定义
<script>
    new Vue({
        el: "#app",
        data:{},
        methods: {
            handle:function(){}
        }
    })
<script>

        4. v-if/v-else-if/v-else

        只有表达式为True时元素才会被渲染

        5. v-show

        根据条件展示某元素，无论表达式是否为True都会渲染，但如果为False会将该标签的CSS样式设定为display: none

        6. v-for

// 遍历元素
<div v-for="addr in addr" {{addr}} </div>

// 同时需要索引
<div v-for="(addr,index) in addr" {{addr}} </div>

三、生命周期

        生命周期指的是一个对象从创建到销毁的整个过程，一共包含8个节点，每触发一个生命周期事件，就会自动执行一个生命周期方法

beforeCreated	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

        一般在mounted时进行前后端交互

<script>
    new Vue({
        mounted() {
            // 在挂载完成后自动执行这部分的代码
        }
    })
</script>