【基础入门】Vue学习总结-第一天

最新推荐文章于 2023-07-05 15:41:03 发布

码上游

最新推荐文章于 2023-07-05 15:41:03 发布

阅读量204

点赞数

分类专栏： web前端开发 -T 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/pakerder/article/details/125253090

版权

web前端开发 -T 专栏收录该内容

19 篇文章 4 订阅

订阅专栏

1.Vue是什么？

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

与传统JS和JQuery框架不同，Vue的渐进式框架表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。
形成Vue渐进式框架的核心概念为：组件化，MVVM，响应式，和生命周期，下面会一个个详细介绍。

2.库和框架的区别？

库：本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把 控制权交给使用者

代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码

区别

核心点：谁起到主导作用（控制反转）
- 框架中控制整个流程的是框架
- 使用库，由开发人员决定如何调用库中提供的方法（辅助）

3.理解MVVM？

MVVM ===> M / V / VM
M：model数据模型
V：view视图
VM：ViewModel 视图模型

MVVM模式（全称为Model-View-ViewModel）为Vue实现数据双向绑定。在MVVM中，View为视图层，ViewModel为业务逻辑层，Model为数据层。

什么是数据双向绑定呢？当用户使View变化时（如填写表单），变化会自动同步到ViewModel处理相应逻辑，并将变化更新到Model数据库。反之，若服务端数据变化（如股价波动），变化会自动同步到ViewModel处理相应逻辑，并将变化同步到View展现给用户。

在用Vue之前，完成HTML和JS之间的交互需要使用大量的DOM操作来实现动态加载。MVVM的数据双向绑定减少了DOM操作，更高效地实现了视图和数据的交互。同时，MVVM使界面、交互和数据层分离，便于设计人员负责设计界面，后端开发人员提供数据接口，而前端开发人员专注于业务交互逻辑的实现。

4.初识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 -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
        2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
        3.root容器里的代码被称为【Vue模板】
        4.Vue实例与容器是一一对应的
        5.真实开发中只有一个Vue实例，并且会配合着组件一起使用:
        6.{{xxx}}中的xxx要写js表达式，并且xxx可以自动读取到data中的所有属性
        7.一旦data中的数据发生改变，那么模板中用到该数据的地方会自动更新

        注意区分: js表达式 和js代码(语句)
            1.表达式 :  一个表达式会生成一个值，可以放在任何一个需要值的地方
                (1): a
                (2): a+b
                (3): demo(1)
                (4): x===y?'a':'b'
            
            2.js代码(语句)
                (1).  if(){}
                (2).  for(){}
    -->

    <!-- 容器和Vue实例是一对一关系，一个容器跟一个实例对应 -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- {{}} 为分隔符 -->
        <h1>Hello,{{name}},{{address}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //创建Vue实例
        const x = new Vue({
            el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: { //data中用于存储数据，数据供el指定的容器使用，值我们暂时写成一个对象
                name: 'Tencent',
                address: '北京市'
            }
        })
    </script>
</body>

</html>

5.Vue模板语法

Vue模板语法有两大类:
            1.插值语法:
                功能:用于解析标签体内容
                写法:{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性
            2.指令语法:
                功能:用于解析标签（包括标签属性，标签体内容，绑定事件....）
                举例:v-bind:href="xxx" 或简写为 :href="xxx" xxx同样要写js表达式
                且可以直接读取到data中的所有属性.
                备注:Vue中有很多的指令，且形式都是: v-???，磁珠只拿v-bind举个例子

6.数据绑定两种方式

 Vue中有两种绑定的方式:
        1.单向绑定(v-bind): 数据只能从data流向页面
        2.双向绑定(v-mode):数据不仅能从data流向页面，还可以从页面流向数据
        备注:
            1.双向绑定一般都应用在表单雷元素
            2.v-model:value可简写为v-model  因为v-model默认手机的就是value值

写法展示:

 <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 普通写法 -->
        <!-- v-bind单向绑定，v-model双向绑定 -->
        <!-- 单向数据绑定:<input type="text" v-bind:value="name">
        <br> 双向数据绑定:
        <input type="text" v-model:value="name"> -->

        <!-- 简单写法 -->
        单向数据绑定:<input type="text" :value="name">
        <br> 双向数据绑定:
        <input type="text" v-model="name">


        <!-- 如下代码是错误的，因为v-model只能应用在表单雷元素(输入类元素) -->
        <!-- <h2 v-model:x="name">你好啊</h2> -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷'
        }
    })
</script>

7.el与data的两种写法

el两种
        1.new Vue 配置el属性
        2.先创建Vue实例，随后再通过实例vm.$mount('#root')指定el的值

        data两种
        1.对象式
        2.函数式
        如何选择 以后学习到组件时，data必须使用函数式，否则会报错

        重要原则
        由Vue管理的函数 一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，指向全局了

8.回顾Object.defineproperty方法作用:给一个对象添加属性

<!-- 准备一个容器 -->
    <div id="root">
    </div>

    <script type="text/javascript">
        let number = 18
        let person = {
            name: '张三',
            sex: '男'
        }

        Object.defineProperty(person, 'age', {
            // value: 18,
            // enumerable: true, //控制属性是否可以枚举，默认是false
            // writable: true, //控制属性是否被修改，默认false
            // configurable: true //控制属性是否被删除，默认是false

            // 有人读取person的age属性时，get函数就会被调用，且返回时就是age
            get: function() {
                console.log('有人想读age了');
                return number
            },

            //当有人修改person的age属性时，set函数就会被调用，且会受到修改的具体值
            set(value) {
                console.log('有人修改了age属性，且值是', value);
                number = value;
            }
        })
        console.log(person);
    </script>