Vue学习笔记

第一章 Vue核心

01 Vue简介

vue是什么？

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

构建用户界面：数据——》界面

渐进式：vue可以自底向上逐层的应用

谁开发的？

尤雨溪

Vue的特点

  • 采用组件化模式，提供代码复用率，且让代码更高维护。
  • 声明式编码，让编码人员无需直接操作DOM，提高开发效率。
  • 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

学习Vue之前要掌握的JavaScript基础知识？

ES6语法规范

ES6模块化

包管理器

原型，原型链

数组常用方法

axios

promise

……

02 初始Vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <!-- 设置页签图标 -->
    <link rel="icon" href="../apple.ico" type="image/png"> 
    <!-- 引入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">
        <h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        //创建Vue实例
        new Vue({
            el:'#root',  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{ //data中用于存储数据，数据供el所指定的容器去使用；值我们暂时先写成一个对象。
                name:'yyb',
                address:'陕西杨凌',
                
            }
        })
    </script>
</body>
</html>

03 模版语法

  • 分类
    • 插值依法
    • 指令语法
  • 注意：v-bind:可以简写成:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模版语法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        Vue模板语法有2大类：
            1.插值语法：
                    功能：用于解析标签体内容。
                    写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
            2.指令语法：
                    功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
                    举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
                                且可以直接读取到data中的所有属性。
                    备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

	-->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <!-- v-bind:可以简写成: -->
        <a v-bind:href="school.url.toUpperCase()" x="hello">点击进入{{school.name}}的博客</a>
        <a :href="school.url" x="hello">点击进入{{school.name}}的博客</a>
    </div>
</body>

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

    new Vue({
        el:'#root',
        data:{
            name:'jack',
            school:{
                name:'yyb',
                url:'https://spongebobyyb.github.io/',
            }
        }
    })
</script>

</html>
  • 执行效果

参考资料

003_尚硅谷Vue技术_Vue官网使用指南_哔哩哔哩_bilibili