Vue基础语法

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

1. Vue概念

1.1 Vue是什么

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

微信截图_20220610165700.png

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

渐进式：

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

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

1.2 Vue的开发者

尤雨溪（中国程序员）

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

1.3 Vue的特点

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

网络异常，图片无法展示

一个Vue文件就是一个组件。在Vue文件中存储的就是HTML、CSS以及JS文件。
我们将一个整体的网页分为多个Vue组件，这样修改一个Vue组件的时候不会影响另一个组件中的内容。这就提高了代码的维护性以及复用率。

声明式编码，让编码人员无需直接操作DOM，提高开发效率。

微信截图_20220610165915.png

使用Vue中的组件(v-for)来遍历这个数据并且写入到前端界面。

使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

微信截图_20220610165940.png

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

微信截图_20220610165951.png

使用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

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