Vue学习日记Day01

最新推荐文章于 2024-04-22 10:08:51 发布

san良

最新推荐文章于 2024-04-22 10:08:51 发布

阅读量97

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_51687691/article/details/129773250

版权

Vue

1.用于构建用户界面的渐进式JS框架
2.采用组件化模式，提供代码复用
3.声明式的编码方式，减少编码人员直接操作DOM的功能
4.通过虚拟DOM+Diff算法：当某个表格数据需要更新一行内容时，不需要更新所以内容，而是使用Diff算法根据新旧DOM得出最优的更新逻辑，最终只更新新增的那一条节约系统开销

Demo1-HelloWorld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 一、Vue引入方式 -->

    <!-- 
        完整版：同时包含编译器和运行时的版本。

        编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

        运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。 
    -->
    <!-- CDN引入 -->
    <!-- 对于制作原型或学习，你可以这样使用最新版本： -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
    <!-- 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏： -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script> -->

    <!-- js文件引入 -->
    <script src="../static/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}       
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: function() {
                return {
                    message: "Hello Vue!"
                }
            }
        })
    </script>
</body>
</html>

Demo2-Vue语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 一、Vue引入方式 -->

    <!-- 
        完整版：同时包含编译器和运行时的版本。

        编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

        运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。 
    -->
    <!-- CDN引入 -->
    <!-- 对于制作原型或学习，你可以这样使用最新版本： -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
    <!-- 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏： -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script> -->

    <!-- js文件引入 -->
    <script src="../static/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-if="key">
            <!-- 插值语法 -->
            {{message}}
            {{nowTime}}
        </p>
        <!-- 指令语法v-bind:xxx xxx为需要绑定的属性名，=后内容为绑定的值 -->
        <a v-bind:href="href">{{message}}</a>
        <ul>
            <li v-for="(value, index) in students">
                {{index}} {{value}} 
            </li>
        </ul>
    </div>

    <script>
        // 一个Vue实例对应一个Html代码块，代码块中可以通过{{XXX}}这种方式访问到Vue实例中的数据
        var app = new Vue({
            el: "#app",
            data: function() {
                return {
                    message: "Hello Vue!",
                    key: true,
                    href: "https://www.baidu.com",
                    students: ["张三", "李四", "王五"]
                }
            },
            computed: {
                nowTime() {
                    return new Date().toLocaleTimeString();
                },
            },
        })
    </script>
</body>
</html>

Demo3-Object.defineProperty(a, b, {})实现数据代理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var student = {
            name: "张三"
        };
        var teacher = {
            name: "李四"
        }

        Object.defineProperty(student, "teacherName", {
            get() {
                console.log("student.teacherName.get()");
                return teacher.name;
            },
            set(value) {
                console.log("student.teacherName.set()");
                teacher.name = value;
            }
        })

        Object.defineProperty(teacher, "studentName", {
            writable: false,//是否可修改
            enumerable: false,//是否可枚举：遍历for(let item in teacher)
            configurable: false,//是否可删除
            get() {
                console.log("teacher.studentName.get()");
                return student.name;
            },
            set(value) {
                console.log("teacher.studentName.set()");
                student.name = value;
            }
        })
    </script>
</body>
</html>

san良

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习日记Day01

4.通过虚拟DOM+Diff算法：当某个表格数据需要更新一行内容时，不需要更新所以内容，而是使用Diff算法根据新旧DOM得出最优的更新逻辑，最终只更新新增的那一条节约系统开销。3.声明式的编码方式，减少编码人员直接操作DOM的功能。1.用于构建用户界面的渐进式JS框架。2.采用组件化模式，提供代码复用。
复制链接

扫一扫