vue框架-摩杜云开发者社区

1、vue框架

vue框架的简单使用如下所示，并且是双向数据绑定的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试四</title>
    <!-- 引入vue框架 -->
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <input type="text" v-model="message">
     <!-- 插值表达式 -->
    {{message}}
</div>

</body>
<script>
    new Vue(
        {
            el: "#app",      //vue接管的区域
            data: {
                message: "Hello Vue!"
            }
        }
    );
</script>
</html>

1.1、vue框架的常用指令

1.1.1、v-bind指令和 v-model指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试四</title>
    <!-- 引入vue框架 -->
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <a rel="nofollow" v-bind:href="url">链接一</a>
    <a rel="nofollow" :href="url">链接二</a>
    <!-- 可以实现表单标签和数据模型的双向数据绑定，即当修改表单标签中的数据时同时也会修改数据模型中的数据   -->
    <input v-model="url">
</div>

</body>
<script>
    new Vue(
        {
            el: "#app",      //vue接管的区域
            data: {
                url: "https://www.baidu.com"
            }
        }
    );
</script>
</html>

1.1.2、v-on指令

1.1.3、剩下的常用指令

1.1.4、v-for指令

2、vue的生命周期

具体的声明周期执行情况如下：

==其中比较重要的是：mounted！！！主要用途是向服务端发送请求。==

使用如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试五</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    
</div>

</body>
<script>
    //创建vue对象
    new Vue({
        el: "#app",     //vue接管的区域
        data: {},
        mounted() {
            alert("vue挂载完成!发送请求到服务端!")
        }
    })
</script>

</html>