Vue——初识vue

1.浏览器控制台报错

2.Vue入门

3.Vue模版语法

4.数据绑定

5.el与data的两种写法

总结

本系列属于纯干货系列，我们也不多说，直接上干货。

1.浏览器控制台报错

GET http://127.0.0.1:5500/favicon.ico 404 (Not Found)

具体如下图

这是为什么呢？？？

其实这就是一个页签资源找不到了，我们看网络GET请求并没有在vue的服务器里找到资源，我们这时候只需要在项目的根路径下放一个图片，将图片名和后缀全部修改为如下所示favicon.ico，即可。

2.Vue入门

直接上入门代码，代码内部提供了详细的注释，下面是一些解释：

这段代码是一个使用Vue.js框架的简单示例。下面对代码进行逐行解释：

<script type="text/javascript" src="../js/vue.js"></script>：引入Vue.js库，用于使用Vue框架的功能。
<div id="root">：一个容器元素，用于将Vue实例渲染到页面上。
<h2>我是 {{name}} 公司的CEO {{comp}} </h2>：二级标题，使用Vue的差值表达式来显示动态数据。{{name}}和{{comp}}会分别被Vue实例中的name和comp属性的值替换。
<script type="text/javascript">：JavaScript脚本的开始标签。
Vue.config.productionTip = false：设置Vue的配置，这里是禁止Vue在启动时生成生产提示。
const vm = new Vue({：创建Vue实例的语法，vm是Vue实例的名称，可以取任意合法的变量名。
el:'#root',：通过el选项指定Vue实例要挂载的容器，这里指定为id为root的元素。
data:{：Vue实例的一个选项，用于定义数据。
name:'WenJGo',：一个数据属性，名称为name，初始值为WenJGo。

以上就是这段代码的解释，它的功能是在页面上显示"hello"和一段动态数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01初识vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello</h1>
        <!-- 这里的{{}}是差值表达式（也称差值表达式） -->
        <!-- 注意区分js表达式和js代码，{{放js表达式}} 
        
        1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方
            （1）a
             (2) a + b
             (3) function(1)
             (4) x === y ? 'a' : 'b'
        2.js代码(语句)：
            (1) if
            (2) for
        -->
        <h2>我是 {{name}} 公司的CEO {{comp}},{{1+5}},{{Date.now()}} </h2>
    </div>

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

        // 创建vue实例
        const vm = new Vue({
            // el(element),这里用于指定当前vue为哪个容器服务，通常为css选择器字符串
            // 这里的通常也就是说还有其他写法，只是不常用如下所示
            // el:document.getElementById('root')
            el:'#root',
            data:{
                // data中用于存储数据
                // 数组给el指定的容器使用，其他的容器无法使用
                // 在以后使用组件之后，data就不是对象的形式了，是函数
                name:'WenJGo',
                comp:'Masoul科技有限公司'
            }
        })
    </script>
    
</body>
</html>

如果不采用id选择器，而采用类选择器，有相同的class的话vue只会解析第一个

一个容器若有多个vue实例，则只采用第一个vue容器，所以容器和vue实例是一对一的关系

3.Vue模版语法

（1）插值语法：适合写在标签体里的内容

<h1>标签体</h1>

（2）指令语法：适合用于解析标签（v-bind用于解析标签属性）

<h1 x="标签属性">标签体</h1>

下面是详细解释：

Vue的标签语法和指令语法是Vue框架中常用的语法，用于在HTML模板中动态地渲染数据和操作DOM元素。

标签语法 Vue使用双大括号 {{}} 来绑定数据，将数据动态渲染到HTML中。例如：

<div>
  <p>{{ message }}</p>
</div>

其中message是Vue实例中的一个数据，它将动态地渲染到<p>标签中。

指令语法指令是Vue中用于操作DOM元素的方法，以v-开头。常用的指令有v-model、v-bind和v-on。

v-model指令用于在表单元素上实现双向数据绑定。例如：

<input v-model="message" type="text">

其中message是Vue实例中的一个数据，当用户在输入框中输入内容时，会自动更新到message中，反之亦然。

v-bind指令用于将Vue实例中的数据绑定到HTML元素的属性上。例如：

<img v-bind:src="imageUrl">

其中imageUrl是Vue实例中的一个数据，它将绑定到<img>标签的src属性上。

v-on指令用于监听DOM事件，并在触发时调用Vue实例中的方法。例如：

<button v-on:click="handleClick">Click me!</button>

当用户点击按钮时，会调用Vue实例中的handleClick方法。

除了上述常用的指令外，Vue还提供了许多其他指令，如v-if、v-for、v-show等，可以实现更丰富的操作和逻辑控制。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模版语法</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h4>你好，{{name}}</h4>

        <hr/>
        <h1>指令语法</h1>
        <!-- 加上v-bind：之后，vue会把""中的东西当做表达式执行 -->
        <a v-bind:href="url.toUpperCase()" v-bind:x="gogogo">
            点击去学习{{name}}的人工智能文章嘿嘿
        </a>
        <!-- v-bind:的简写 -->
         <!-- 'v-bind:' 可以简写为 ' : '-->
        <a :href="url2">
            点击去学习{{school.name}}的另一个人工智能文章嘿嘿
        </a>

        <a :href="Date.now()">
            时间戳
        </a>
    </div>


</body>
<script type="text/javascript">
    Vue.config.productionTip = 'false'

    new Vue({
        el:'#root',
        data:{
            name:'WenJGo111',
            url:'https://blog.csdn.net/DDDDWJDDDD/article/details/141531378?spm=1001.2014.3001.5501',
            url2:'https://blog.csdn.net/DDDDWJDDDD/article/details/138379882',
            gogogo:'yesyessss',
            school:{
                name:'WenJGo222'
            }
        }
    })
</script>
</html>

4.数据绑定

v-bind是Vue中的一个指令，用于将Vue实例中的数据绑定到HTML元素的属性上，实现单向数据绑定。

例如，我们可以使用v-bind将Vue实例中的一个数据绑定到一个图片的src属性上：

<img v-bind:src="imageUrl">

在这个例子中，属性绑定是单向的，即Vue实例中的数据发生变化时，会自动更新到绑定的属性上，但是如果用户修改了src属性的值，不会自动反映到Vue实例中的数据上。

而v-model是Vue中的另一个指令，用于实现双向数据绑定。它可以将表单元素的值与Vue实例中的数据进行双向绑定，实现数据的即时更新。

例如，我们可以在一个输入框中使用v-model指令来绑定Vue实例中的一个数据：

<input v-model="message" type="text">

这样，当用户在输入框中输入内容时，Vue实例中的message数据会自动更新，反之亦然。这就是双向绑定，数据的变化会自动更新到视图，视图的变化也会自动更新到数据。

需要注意的是，v-model指令只能用于表单元素上，如输入框、复选框、单选框等，而且有一些特殊用法，如在复选框中使用v-model可以绑定一个数组，实现多选功能。

总结起来，v-bind实现了单向数据绑定，将Vue实例中的数据绑定到HTML元素的属性上；而v-model实现了双向数据绑定，将Vue实例中的数据与表单元素的值进行双向绑定，使数据的变化能够即时反映到视图，并且视图的变化也能够即时更新到数据。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>
    <!-- 
    v-bind:是一个单向的数据绑定，可从data中读取数据
    但是不可以影响data中的数据 

    v-model:是一个双向的数据绑定，可从data中读取数据
    也可以影响data中的数据 
    -->
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name">
        <br>
        双向数据绑定：<input type="text" v-model:value="name">
        <br>
        <h2 v-bind:x="name">你好啊</h2>
        <!-- 这里会报错，因为v-model不支持h2 
        因为v-model只能应用在表单类元素
        （输入类元素：input，单选多选框等）上 
        这些元素都有value值，v-model就是影响value的
        -->
        <!-- v-model:value可以简写为v-model因为v-model默认搜集的就是value值 -->
        <h2 v-model:x="name">你好啊</h2>
    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'WenJGo'
        }
    })
</script>
</html>

5.el与data的两种写法

el的两种写法： a) 在创建Vue实例时配置el属性。 b) 先创建Vue实例，然后通过vm.$mount('#root')指定el的值。
data的两种写法： a) 对象式：将data选项设置为一个普通的JavaScript对象。 b) 函数式：将data选项设置为一个返回对象的函数。

如何选择写法：目前可以选择任意一种写法，但是在学习到组件时，必须使用函数式写法，否则会报错。

一个重要的原则： 由Vue管理的函数不能使用箭头函数，如果使用了箭头函数，this将不再指向Vue实例。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el与data的两种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>

    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
    
    <div id="app">
        <h1>你好，{{name}}</h1>
    </div>

</body>

<script type="text/javascript">
    Vue.config.productionTip = false
    const v = new Vue({
        // 第一种el写法
        // el:'#root',
        data:{
            name:'WenJGo'
        }
    })

    console.log(v)
    setTimeout(() =>{
        // 这种写法比较灵活，比如这里可以等1s再动
        // 第二种el写法
        v.$mount('#root')
        // mount
    },1000);

    // data的两种写法
    new Vue({
        el:'#app',
        // data的第一种写法，对象的形式
        // data:{
        //     name:'masoul'
        // }

        // data的第二种写法，函数的形式
        data(){
            // data:function(){：这里的this发现是vue实例对象
            // data:()=>{：这里的this发现是全局的window
            // 所以这里直接写成data:function(){可以简化为data(){
            
            console.log('@@@',this)
            return{
                name:'MASOUL'
            }
        }
    })

</script>
</html>