Vue2快速入门

news2024/11/22 18:53:22

Vue 介绍
Vue 是一套构建用户界面的渐进式前端框架
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合
通过尽可能简单的API来实现响应数据的绑定和组合的视图组件
特点
易用：在有HTML CSS JavaScript的基础上，快速上手
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用
性能：20kb min＋gzip运行大小、超快虚拟DOM、最省心的优化
Vue2 快速入门
1.下载和引入vue.js文件
2.编写入门程序
- 视图：负责页面渲染，主要由HTML+CSS构成
- 脚本：负责业务数据模型(Model)以及数据的处理逻辑
Vue 核心对象：每一个Vue程序都是从一个Vue 核心对象开始的
- let vm = new Vue({
- 选项列表；
- });
选项列表
- el选项：用于接收获取到页面中的元素（根据常用选择器获取）
- data选项：用于保存当前Vue对象中的数据;在视图中声明的变量需要在此处赋值
- methods选项：用于定义方法;方法可以直接通过对象名调用，this代表当前Vue对象
数据绑定
- 在视图部分获取脚本部分的数据
- {{变量名}}
实例
1.下载和引入vue.js文件
2.编写入门程序

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>快速入门</title>
    </head>
    <body>
        <!-- 视图 -->
        <div id="div">
            <div>姓名：{{name}}</div>
            <div>班级：{{classroom}}</div>
            <button onclick="hi()">打招呼</button>
            <button onclick="update()">修改班级</button>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        //脚本
        let vm = new Vue({
            el:"#div",
            data:{
                name:"张三",
                classroom:"acm"
            },
            methods:{
                study(){
                    alert(this.name + "正在" + this.classroom + "好好学习!");
                }
            }
        });

        //定义打招呼方式
        function hi(){
            vm.study();
        }
        //定义修改班级
        function update(){
            vm.classroom = "java";
        }
    </script>
</html>