虽然Vue3.0的时代就要带来啦~~但是还是有必要给认真学习一下Vue2.0哦

Java学术趴
62 阅读5分钟

我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123…

👨‍🎓作者：Java学术趴

🏦仓库：Github、Gitee

✏️博客：CSDN、掘金、InfoQ、云+社区

💌公众号：Java学术趴

🚫特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系小编授权。

🙏版权声明：文章里的部分文字或者图片来自于互联网以及百度百科，如有侵权请尽快联系小编。微信搜索公众号Java学术趴联系小编。

☠️每日毒鸡汤：这个社会是存在不公平的，不要抱怨，因为没有用！人总是在反省中进步的！

👋大家好！我是你们的老朋友Java学术趴，好久没有时间写文章，最近忙着找工作。没有太多的时间给大家分享文章，从今天开始给大家持续发布新的技术文章，还希望大家多多支持支持。新的一年就要到来了，还记着在前几年，从SSM到SpringBoot，在到SpringBoot+vue2.0的时代。今年估计又会发生巨大的编程语言变革。俗话说：时代的几步必然会带动科技的发展，科技的发展必将带来新一波编程语言的到来。在今年，个人认为Vue3.0的时代就会到来，现在我们正处于Vue2.0+Vue3.0的时代，今年Vue3.0必将会替代Vue2.0的存在。

我们这篇文章也是会从Vue2.0到Vue3.0来一个过度，让大家先巩固一下Vue2.0，之后Vue3.0进发。大家如果感觉有帮助的话，可以点赞多支持支持。感谢感谢~~💓💓💓

Vue基础语法

现在的Vue局面是Vue2.0到Vue3.0之间的过度时期。

1. Vue概念

1.1 Vue是什么

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

  • 我们只需要将一些数据传递给前端，而不需要关注前端界面的构成。

渐进式：

  • Vue可以自底向上逐层的应用

    • 简单应用：只需一个轻量小巧的核心库。
    • 复杂应用：可以引入各式各样的Vue插件。

1.2 Vue的开发者

  • 尤雨溪（中国程序员）

后起之秀，生态完整，已然成为国内前端工程师的必备技能。

1.3 Vue的特点

  1. 采用组件化模式，提高代码复用率、切让代码更好维护。

  • 一个Vue文件就是一个组件。在Vue文件中存储的就是HTML、CSS以及JS文件。
  • 我们将一个整体的网页分为多个Vue组件，这样修改一个Vue组件的时候不会影响另一个组件中的内容。这就提高了代码的维护性以及复用率。
  1. 声明式编码，让编码人员无需直接操作DOM，提高开发效率。

  • 使用Vue中的组件(v-for)来遍历这个数据并且写入到前端界面。
  1. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

  • 当新增数据的时候，新的数据会覆盖以前的数据。这样写非常浪费时间。我们想做的只是添加以前没有的数据，而已经存在的数据就不去处理它。提高效率

  • 使用Vue构建一个虚拟DOM，当新增数据的时候，新的虚拟DOM和以前的DOM进行比较，(这个比较使用的Diff算法)当第二次多添加数据的时候，只会将多的数据从虚拟DOM传递俄给真实的DOM。这样就不会造成大量的数据传递以及覆盖。

1.4 HTML引入Vue

1.4.1 初识Vue

  • 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象.
  • root容器里面的代码仍然符合HTML规范,只不过混入了一些特殊的Vue语法.
  • root容器里的代码被称为 [Vue模板].
  • Vue实列和容器是一一对应的关系.
  • 真实开发中只有一个Vue实例,并且会配合着组件一起使用.
  • {{xxx}}}中的xxx要写js表达式,且xxx可以直接读取到data中的所有属性值.
  • 一旦data中的数据发生变化,那么页面中用到该数据的地方会自动更新.

1.4.2 区分JS表达式与JS代码(语句)

表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:

(1) a
(2) a+b
(3) demo(1)
(4) x === y ? 'a' : 'b'
复制代码

js语句：就是简单的JS代码语句，不包含任何数据的计算


(1) if(){}
(2) for(){}
复制代码

1.4.3 第一个Vue实例以及其中的核心知识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试第一个Vue程序</title>
​
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../../../js/vue.js"></script>
</head>
<body>
​
    <!--
        初识Vue:
            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(){}
    -->
​
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- Vue中提供了插值运算符 {{key}} 注意:这只是一个符号,与解构赋值和对象没有任何的关系-->
        <!-- 这里还可以进行相关方法的调用. 比如:字符串调用全部转化为大写的方法.-->
        <h1>Hello,{{name}},{{language.toUpperCase()}},{{Date.now()}}</h1>
    </div>
​
    <script type="text/javascript">
        Vue.config.productionTip = false;  // 阻止 Vue 在启动时生成生产提示。
​
        // 创建Vue实例。初始化Vue的时候，使用的是构造方法，里面传递了一个参数，并且这个参数是一个对象
        new Vue({
            /*这里的key值是固定的，value值要保持格式一致。*/
            /*
                el是:element的简称。使用el把Vue与dom对象进行绑定。
                可以使用id选择器、类选择器、标签选择器等方法。和CSS是一样的。
                就是告诉Vue，一会要将处理完的成果交过div这个盒子处理。在盒子上进行
                数据的显示。
                还可以使用带代码的方式手动获取：(不常使用)
                    document.getElementById("root")
            */
            el:'#root', // el用于指定当前Vue实列为哪个容器服务，值通常为css选择器字符串。
            /*
            * 实际开发中，我们需要处理的数据肯定有很多，所以此时就需要一种结构来存储这么多的数据
            * 并且还要保持数据的唯一性。
            *
            * 所以：我们的data数据对象的形式来存储数据(使用键值对的方式)，key是唯一的，保持了取出
            *      数据时不会重复。
            *
            * data中用于存储数据，数据供el所指定的容器使用。
            *
            * 这个存储数据的解构:我们暂时写成一个对象
            * 在以后的开发中,当我们使用组件的时候,会把存储数据的解构写成一个函数
            * */
            data:{
                name:'清华大学',
                language:'English'
            }
        })
    </script>
</body>
</html>
复制代码

1.5 el与data的两种写法

1.5.1 el的两种写法

el：绑定展示该Vue组件的容器。


(1) new Vue时候配置el属性。
(2) 先创建Vue实例，随后在通过vm.$mount('#root')指定el的值。
复制代码
  • el的第一种写法：创建Vue的时候配el属性

const v = new Vue({
        // el:'#root', // 关联Vue与data数据的第一种形式
        data:{
            name:'清华大学',
            language:'English'
        }
    })
复制代码
  • el的第二种写法：使用Vue实例对象来指定el属性

const v = new Vue({
        data:{
            name:'清华大学',
            language:'English'
        }
    })
    console.log(v);
    v.$mount("#root");
// 第二种绑定el的方式比较灵活。比如：可以给他设置打印这个数据的时间
setTimeout(function (){
        v.$mount("#root");
    },2000);
复制代码

1.5.2 data的两种写法


(1) 对象式
(2) 函数式
复制代码
  • data的第一种写法：对象式

data:{
  name:'清华大学',
  language:'English'
}
复制代码
  • data的第二种写法：函数式

// 原始形式
data:function(){
    console.log(this);  // Vue对象。
    /*函数需要有返回值，并且返回值是一个对象*/
    return{
        name:'清华大学'
    }
}
// 使用 es6 中的语法。对象的简化写法 （去掉 :function）
data(){
  console.log(this);  // Vue对象。
  /*函数需要有返回值，并且返回值是一个对象*/
  return{
    name:'清华大学'
  }
}
​
/*
当我们学习到组件的时候，data只能使用函数式的形式
记住这里只能使用这种普通函数的方式，不能使用箭头函数
因为箭头函数的this指向的是 windows，我们需要让this指向当前元素
也就是让this指向Vue这个对象。
在对象中创建函数我们使用简化对象的写法。去掉 :function
*/
复制代码

1.5.3 一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不在是Vue实例了。 就变成了windows

avatar
文章
阅读
粉丝