关于对vue的学习总结

最新推荐文章于 2024-12-12 09:13:18 发布

小研睡不醒

最新推荐文章于 2024-12-12 09:13:18 发布

阅读量2.5k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/fps_ll/article/details/122523465

版权

本文分享了作者在学习Vue.js一周后的体会，强调Vue如何通过数据代理简化前端开发，并介绍了Vue的基础特性，如data、methods、computed、watch以及生命周期和内置指令。作者认为理解Vue的原理和组件化是深入学习的关键。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在我开始接触vue了,之前就听学长学姐他们说,学完vue之后写项目就会快很多,我现在接触了一星期多vue,的确发自内心感觉,确实方便了很多.

首先,接触的就是原理,关于vue对数据的代理,本质就是defineprototype其中 getter是读取数据,setter修改数据.

<div id="root">
        <h1>学校名称:{{name}}</h1>
        <h1>学校地址:{{address}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false //全局配置
        // 其中data里的值存到vue原型中_data中   其中对于  name & address  都有对应的getter  和  setter
        // 获取的值不只是_data中的值而是通过代理把name和address中的值获取出来
        // 与Object.defineproperty中  getter 和  setter作用一样
        const vm = new Vue({
            el: '#root',
            data: {
                name: '河南科技学院',
                address: '新乡市红旗区洪门镇'
            }
        });
    </script>

其中data里的值存到vue原型中_data中其中对于 name & address 都有对应的getter 和 setter

获取的值不只是_data中的值而是通过代理把name和address中的值获取出来与Object.defineproperty中 getter 和 setter作用一样

其中vue还有很多属性,methods computed watch 这些都是最基础的

还有许多内置指令 v-if v-show v-for v-else-if v-else

最重要的就是生命周期

还有组件的基本写法

<div id="root">
        <hello></hello>
        <!-- 编写school组件标签 -->
        <school></school>
    </div>
    <div id="root2">
        <hello></hello>
    </div>
    <script>
        Vue.config.productionTip = false //全局配置

        // 第一步 创建组件
        const school = Vue.extend({
            template: `
            <div>
                <h1>学校名称:{{schoolName}}</h1>
                <h1>学校地址:{{address}}</h1>
            </div>
            `,
            data() {
                return {
                    schoolName: '河南科技学院',
                    address: '河南新乡'
                }
            },
        })
  
        const hello = Vue.extend({
            template: `
            <div>
                <h1>你好!{{age}}</h1>
            </div>
            `,
            data() {
                return {
                    age: 18
                }
            },
        })
        // 全局注册
        Vue.component('hello', hello)

        new Vue({
            el: '#root',
            // 第二步注册组件(局部注册)
            components: {
                school: school
            },
        });
        new Vue({
            el: '#root2',
            // 第二步注册组件(局部注册)

        });
    </script>

目前的学习不算是太多,但是要把原理弄清楚,vue还是需要慢慢沉淀去学习.