Vue封神之路(3.) Vue的基本使用及单向数据绑定-CSDN博客

本文链接：https://blog.csdn.net/wei18791957243/article/details/126679948

目录

1. 首先区分几个概念（函数，函数对象，构造函数）

1.1 函数

1.2 函数对象

1.3 构造函数

2. Vue的基本使用

2.1 模板

2.2 代码演示和注释

1. 首先区分几个概念（函数，函数对象，构造函数）

1.1 函数

函数就是函数，我们定义的时候都叫函数，函数在使用的时候是加（）使用我们称之为函数

1.2 函数对象

函数如果加.(点)使用，那么我们称之为函数对象

1.3 构造函数

函数在使用的时候才会区分函数（普通函数调用）和构造函数（构造函数调用），
如果函数直接加（）就叫普通函数调用
如果函数加 new()+ 就叫构造函数调用

2. Vue的基本使用

2.1 模板

模板有模板语法（分为两种）：、

插值语法 {{}} ：它主要是给标签插入内容
指令语法：它主要是用来操作标签的，包含属性也包含内容，但是指令比较多，每个指令只能做一件事情

2.2 代码演示和注释

指令操作属性和插值语法操作内容，我们所写的就是不再是字符串了，全部都变为js表达式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>

<body>
    
    <div id="app">
        
        <p>{{msg}}</p>
        
        <a v-bind:href="url">点击去百度</a>
        <br/>
        
        <a :href="url">点击去百度（简写）</a>
        
        <p>{{msg.toUpperCase()}}</p>
        
        <a :href="url + '测试'">点击去百度（简写）测试</a>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
        // 配置对象：键名不能更改，值可以改变的对象
        new Vue({
            el: '#app', // 这个值是一个css选择器字符串，它其实后期通过这个css找挂载点
            data: {
                msg: '这是msg',
                url: 'https://www.baidu.com'
            },
            // 模板，这样的写法以后不用，1.没提示   2.嵌套起来很复杂
            // template: '<p>{{msg}}</p>'
        })
    </script>
</body>

</html>