Vue2

李骁梓

于 2024-04-20 08:58:58 发布

阅读量500

点赞数 25

分类专栏： web vue2 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_59855900/article/details/137912368

版权

web 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

一、Vue概述

Vue 是一款用于构建用户界面的渐进式的JavaScript框架。

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

既可以局部改造，也可以整体开发，称之为渐进式。

官网:https://cn.vuejs.org/

Model：数据模型，里面包含了很多的业务数据以及数据的处理方法。

View：视图层，只负责数据的展示，就是界面展示html的标签，也可以理解为就是DOM元素。

ViewModel：是View和Model通信的桥梁，可以完成Model和View的数据绑定。

双向数据绑定：一旦完成了数据绑定，数据模型中数据发生变化ViewModel会自动的更新视图层当中的展示，一旦视图层当中的数据发生变化，ViewModel也会自动的更新数据模型当中的数据，这个就称为双向数据绑定ViewModel是双向数据绑定的核心，是vue框架提供的功能。

二、局部使用Vue

快速入门

Vue2:1.引入Vue.js文件2.在JS代码区，创建Vue核心对象，定义数据模型3.编写视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2-快速入门</title><!-- 引入vue.js -->
    <script src="js\vue.js"></script>
</head>
<body>
    <!-- 3.定义视图 -->
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>
<script>
    //2.定义Vue对象
    new Vue({
        el:"#app",//vue接管的区域
        data:{//data数据模型
            message:"hello vue2"
        }
    })
</script>
</html>

Vue3 ：1.准备html页面,并引入Vue模块2.创建Vue程序的应用实例3.准备元素(div)，被Vue控制

4.构建用户界面：准备数据，通过插值表达式渲染页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3-快速入门</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <!-- 引入vue模块 -->
    <script type="module"> 
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        /* 创建vue的应用实例 */
        createApp({
            data(){
                return{
                    //定义数据
                    msg:'hello vue3'
                }
            }
        }).mount("#app");
    </script>
</body>
</html>

插值表达式：形式{{表达式}}

内容可以是：变量、三元运算符、函数调用、算术运算

常用指令

指令:HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如:v-if，v-for..

通过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">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model="url">
        <input type="button" value="点击按钮" v-on:click="handle()">
        <input type="button" value="点击按钮" @click="handle()">
        <br><br>
        年龄<input type="text" v-model="age">经判定为：
        <span v-if="age <= 35">年轻人(35岁及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60岁)</span>
        <span v-else>老年人(60岁及以下)</span>
        <br><br>
        年龄<input type="text" v-model="age">经判定为：
        <span v-show="age <= 35">年轻人(35岁及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60岁)</span>
        <span v-show="age >= 60">老年人(60岁及以下)</span>
        <br>
        <div v-for="addr in addrs">{{addr}}</div>
        <hr>
        <div v-for="(addr,index) in addrs">{{index + 1}}:{{addr}}</div>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app",//接管区域
        data: {
            url: "http://www.baidu.com",
            age: 20,
            addrs:["北京","上海","西安","成都","深圳"]
        },
        methods: {//methods要与data平齐
            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>Vue-指令-案例</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 v-else style="color:red">不及格</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
            }]
        },
        methods:{

        }
    })
</script>
</html>

生命周期

生命周期:指一个对象从创建到销毁的整个过程。

生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。(发送请求到服务端，加载数据）

以下是后面学习vue3课程中需要更新的暂时放个目录

三、整站使用Vue

Vue项目构建工具

Vue项目开发流程

Element-Plus

四、大事件前端

客户端路由

状态管理

李骁梓

关注

25
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Vue2

Vue 是一款用于构建用户界面的渐进式的JavaScript框架。Model：数据模型，里面包含了很多的业务数据以及数据的处理方法。View：视图层，只负责数据的展示，就是界面展示html的标签，也可以理解为就是DOM元素。ViewModel：是View和Model通信的桥梁，可以完成Model和View的数据绑定。双向数据绑定。
复制链接

扫一扫