Vue快速入门-CSDN博客

本文链接：https://blog.csdn.net/jbykmzls/article/details/132520412

概念：Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷，更加高效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue快速入门</title>
    <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",
        data:{
            message:"Hello Vue"
        }
        })
    </script>
</html>

常用指令

v-bind

v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue快速入门</title>
    <script src="JS/vue.js"></script>
</head>
<body>
   <div id="app">
    <!-- 为HTML标签绑定属性值，如设置href，css样式等 -->
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
    <!-- 为表单元素上创建双向数据绑定 -->
        <input type="text" v-model="url">
   </div>

    
</body>
    <script>
        // 定义Vue对象
       new Vue({
        el:"#app",/* Vue接管区域 */
        data:{
            url: "https://picx.zhimg.com/80/v2-e07198dd7d926bfa3ed6eb635c5f50c9_1440w.webp?source=1940ef5c"
        }
       })
    </script>
</html>

运行实例：

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue快速入门</title>
    <script src="JS/vue.js"></script>
</head>
<body>
   <div id="app">
        <input type="text" value="来点我" v-on:click="handle()">
        <input type="text" value="来点我" @click="handle()">
   </div>
</body>
    <script>
        // 定义Vue对象
       new Vue({
        el:"#app",
        data :{

        },
        methods: {
            handle:function(){
                alert("我被点了")
            }
        },
        
       })
    </script>
</html>

案例：通过Vue完成表格数据的渲染展示

完成效果展示：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩</title>
    <script src="JS/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>成绩</th>
                    <th>等级</th>
                </tr>
                <tr align="center" v-for="(user, index) in users" >
                    <td>{{index+1}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td>
                        <span v-if="user.gender==1">男</span>
                        <span v-if="user.gender==2">女</span>
                    </td>
                    <td>{{user.score}}</td>
                    <td>
                        <span v-if="user.score>=85">优秀</span>
                        <span v-else-if="user.score>=60">及格</span>
                        <span style="color: red;" v-else>不及格</span>
                    </td>
                </tr>
        </table>

    </div>
</body>
    <Script>
        new Vue({
            el:"#app",
            data :{
                users:[{
                    name:"Tom",
                    age:20,
                    gender:1,
                    score:78
                },{
                    name:"Rose",
                    age:18,
                    gender:2,
                    score: 86
                },{
                    name:"Jerry",
                    age:26,
                    gender:1,
                    score:90
               },{
                name:"Tony",
                    age:30,
                    gender:1,
                    score:52
              }]
            }
            
        })
    </Script>
</html>

Vue生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

状态   阶段周期

beforeCreate 创建前

created 创建后

beforeMount 载入前

mounted    挂载完成

beforeUpdate     更新前

updated 更新后

beforeDestory    销毁前

destroued 销毁后

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功（发送到服务端，获取数据）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
    <script src="JS/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data: {

        },
        method:{

        },
        mounted() {
            alert("挂载完成")
        }

    })  
</script>
</html>