从永远到永远-Node.js_webstorm与eclipse区别-CSDN博客

本文链接：https://blog.csdn.net/MACHENIC/article/details/100870684

本来想自学一下Vue.js，不小心搞出个Node.js。既然Vue.js要用到，那就学呗。网上找了一堆，终于找到个视频是我能看明白的了。
https://www.bilibili.com/video/av17364384/

一、Vue相关概念

Vue.js,React.js,Jquery.js等等，他们都是对于原生js的一个封装。Node.js虽然有着一样的后缀，但是完全不是一个东西。

1.Node.js是什么？

在这里插入图片描述

准确一点来说

显然Node.js都没有可视化界面，Dom和Bom操作是不现实的，他其实是运行ECMAScript文件的。

2.Node.js的特点：

在这里插入图片描述
轻内核：本身就是提供ECMAScript文件运行，要进行一些复杂操作就要借助Node的一些内置模块（但是这些模块严格不算是node内核）或者第三方开发的模块。这些模块大体分三类：

不同于web服务器，nodejs是单线程操作的。
大体了解一下，开始Vuejs学习。

二、Vue学习

1.基本概念

在这里插入图片描述

2.开发工具

VSCode和WebStorm大约相当于eclipse和idea。一个功能全但是吃内存，一个功能少但是轻便。我个人比较喜欢webstorm毕竟Java开发用的idea，这两个一家子的。鉴于是个菜鸟，先从简单的来吧。

1.VSCode安装

1）官网下载zip文件，解压就能用（路径不要有中文）。
2）咱也不知道为啥前端都回汉化，人家汉化咱也汉化。搜索框chinese-》install插件-》CTRL+shift+p-》language-》在这里插入图片描述
-》
中间让重启选同意就行，搞定。

2.第一个vue实例

1、VSCode快速生成html

快速生成htmlhttps://blog.csdn.net/qq_39672732/article/details/88979851

2、编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--
        1.引入Vue.js
        2.创建Vue对象
            el ：指定根element（选择器）
            data：初始化数据（页面打瞌即可访问的）
        3.双向数据绑定 ：v-model
        4.显示数据： {{}} 插值
        5.理解mvvm实现
    -->
    <div id="test">
        <input type="text" v-model="msg">
        <p>我有些话想说 {{msg}}</p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const v=new Vue({
            el:'#test',
            data:{
                msg:'今天是我今年最难过的一天！'
            }
        })
        setTimeout(function () {
            v.msg='1234'
        },2000)
    </script>
</body>
</html>

测试，返回调整不行，怒换ide！！！
然后发现自己写错了代码！！！java程序员，尼玛的类名还能是小写
在这里插入图片描述

3.vue调试工具

3.1 Vue.js devtools安装方法：

https://blog.csdn.net/weixin_38654336/article/details/80790698

3.2 LiveServer

如果启动项目调试控制台没有显示，有可能是vscode直接打开的是本地网页，而没有通过服务器打开文件。安装这个插件，相当于每次以服务器方式启动：
在这里插入图片描述

生产环境就不需要被看到，可以配置使其不显示：

3.3 编码提示插件：

在这里插入图片描述

4.模板语法

4.1 插值语法：{{}}

在这里插入图片描述

题外话：**语句和表达式区别：**语句是具体执行功能，表达式是给一个结果返回值。很多时候不易区分，是因为js里边没有强制要求语句写表达式，导致形式上很多语句看着是一个表达式。

4.2 指令语法： v-开头，但是通常用他的简写。（有很多以下先学习2个）

4.2.1 强制数据绑定

在这里插入图片描述
这样就完成了数据的动态绑定

4.2.2 绑定事件监听

在这里插入图片描述
也可以制定参数：

总结代码：

5. 计算属性和监视

删除线部分1）内容可以直接忽略，其作用在于引出计算属性和监视，但是我感觉有狗尾续貂之嫌，不看也罢！

1）需求：定义的一个对象P，他有firstName和lastName的属性。

在这里插入图片描述
~~需求：增加一个fullName属性，fullName格式是：firstName-lastName。~~

~~浏览器测试：~~

~~需求：并且如果更改了三者中任意一个，其他的属性都能够相应更新。~~

~~Object.definProperty()是Vue中的一个狠核心的方法，通过他能够完成对象属性的计算返回（set()），并且能够**监听(get())**到对象属性的变化。~~
------------------------------------这是一条分割线！---------------------------------------------------------

2）

娘了个腿的，感觉这些老师讲个东西，看似由易到难，循序渐进，实则废话连篇。总结如以下：
实现方法一：
已知道：fullName=firstName+lastName，要实现三者根据彼此变化相应改变，如何实现：

<div id="demo">
        姓：<input type="text" placeholder="FirstName" v-model="firstName"><br>
        名：<input type="text" placeholder="LastName" v-model="lastName"><br>
        姓名（双向）：<input type="text" placeholder="FullName" v-model="fullName"><br>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const vm= new Vue({
            el:'#demo',
            data:{
                firstName:'A',
                lastName:'B',
            },
            computed: {
                fullName:{
                    get(){
                        return this.firstName+'-'+this.lastName
                    },
                    set(value){
                        const names= value.split("-")
                        this.firstName=names[0]
                        this.lastName=names[1]
                    }
                }
            }
        })
    </script>

1、这里的this都是指的Vue对象（后期应该叫组件对象），this.获取的就是Vue的属性值，这个属性值是存储在data中的。
2、根据需求，fullName无法在data中直接定义，必须经过计算获取。get方法监视着其依赖的数据（FirstName和LastName），并对属性计算并返回fullName属性值。
3、set监视着fullName的属性值，当期发生变化时，被调用，并将分别为FirstName和LastName赋予新的属性值。
在这里插入图片描述
实现方法二：使用watch监视属性：

<div id="demo">
                姓：<input type="text" placeholder="FirstName" v-model="firstName"><br>
                名：<input type="text" placeholder="LastName" v-model="lastName"><br>
                姓名（双向）：<input type="text" placeholder="FullName" v-model="fullName"><br>
            </div>
            <script src="../js/vue.js"></script>
            <script>
                const vm= new Vue({
                    el:'#demo',
                    data:{
                        firstName:'A',
                        lastName:'B',
                        fullName:'A-B'
                    },
                    watch: {
                        firstName (value){
                            this.fullName=value+'-'+this.lastName
                        },
                        lastName(value){
                            this.fullName=this.firstName+'-'+value
                        },
                        fullName(value){
                            const names=value.split("-")
                            this.firstName=names[0]
                            this.lastName=names[1]
                        }
                    },
                })
            </script>

也可以使用下边方式，也是监视，只不过它属于Vue实例的，但是上边属于选项：
在这里插入图片描述