Vue快速入门（Vue2.x）

白豆五

已于 2022-12-11 19:29:11 修改

阅读量498

点赞数 1

分类专栏：前端技术文章标签： vue.js 前端 javascript

于 2022-08-03 18:16:01 首次发布

本文链接：https://blog.csdn.net/qq_46921028/article/details/126146154

版权

前端技术专栏收录该内容

6 篇文章 2 订阅

订阅专栏

在这里插入图片描述

崇德尚学厚积薄发。

1、Vue.js 是什么？

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架。

Vue 的核心库只关注视图层，不仅易与上手，还便于与第三方库或已有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

官网：https://cn.vuejs.org/

在这里插入图片描述

2、入门案例

第一步：创建一个html页面，并生成html骨架。

在这里插入图片描述

第二步：引入vue.js文件（本地引入和cdn方式都可以）

# cdn方式
<script src="https://unpkg.com/vue/dist/vue.js"></script>

# 本地引入
<script src="vue.min.js"></script>

在这里插入图片描述

第三部：在html页面创建div标签，并为div标签配置id属性。

<div id="app"></div>

在这里插入图片描述

第四部：编写vue代码（固定结构）

<script>
    // 创建一个vue对象
    new Vue({
        el:'#app', //通过“css选择器字符串”获取对应的DOM标签
        data: {    //定义页面中显示的模型数据,并共享el所指向的容器
            message: 'Hello Vue!'
        }
    })
</script>

在这里插入图片描述

第五步：使用 插值表达式 获取data属性里面的数据。

{{message}}

在这里插入图片描述

执行测试：

在这里插入图片描述

声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。（这里通过模板语法，告诉浏览器一个结果，哪里该渲染什么数据，而我们也能清楚明白哪里能显示什么内容，而不是注重为什么能实现这个结果）
核心思想就是没有繁琐的DOM操作，例如 jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作。

3、在VSCode中创建代码片段

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets
在这里插入图片描述

{
	"vue htm": {
		"scope": "html",
		"prefix": "vuehtml",
		"body": [
			"<!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>",
			" <div id=\"app\">",
			"",
			" </div>",
			" <script src=\"vue.min.js\"></script>",
			" <script>",
			" new Vue({",
			" el: '#app',",
			" data: {",
			" $1",
			" }",
			" })",
			" </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "my vue template in html"
	}
}

在这里插入图片描述

使用方法：在html页面中输入vuehtml并按tab键，然后它会自动生成刚才创建的模板内容。
在这里插入图片描述

4、基本语法

4.1、基本数据渲染和指令

v-bind 单向数据绑定

在vue中 v-bind 特性被称为指令。指令带有前缀 v- 。

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号 : 。

<!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>
    <div id="app">
        <!-- v-bind指令  单向数据绑定
            这个指令一般用在标签的属性里面,获取模型中的数据。
        -->

        <h1>
            <!-- 使用插值表达式将数据渲染到页面上 -->
            {{content}} 
        </h1>

         <!--将鼠标悬浮内容上会显示adadad-->
        <h1 title="adadad">
            {{content}} 
        </h1>

        <!-- 
             使用v-bind指令 将模型中的数据绑定在html属性中
             此时title会显示message的值
         -->
        <h1 v-bind:title="message">
            {{content}} 
        </h1>

		<!-- v-bind指令 简便写法 -->
        <h2 :title="message">{{content}}</h2>
        
    </div>

    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: '我是标题',
                message: '页面加载与' + new Date().toLocaleString()
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

4.2、双向数据绑定

使用 v-model指令进行双向数据绑定。

<!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>
    <div id="app">
        <!-- v-bind:value只能进行单向的数据绑定 -->
        <input type="text" v-bind:value="searchMap.keyWord">
        <!-- v-model 可以进行双向的数据绑定 -->
        <input type="text" v-model="searchMap.keyWord">

        <p>您要查询的是:{{searchMap.keyWord}}</p>
    </div>

    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap: {
                    keyWord: '抖音'
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

双向绑定他会同步更新数据。
单向绑定 v-bind 经常用在属性中。
双向绑定 v-model 用在表单中。

4.3、事件操作

v-on 绑定事件

需求：点击查询按钮，按照输入框中输入的内容查找公司相关信息

<!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>
    <div id="app">
        <!-- 
            v-on指令用于绑定事件
            click是指定要绑定的事件类型
            当点击button按钮时,调用vue中methods节点里面定义的方法
         -->
        <button v-on:click="search()">查询</button>

         <!-- v-on指令简便写法 -->
         <button @click="f1()">查询1</button>


        <p>您要查询的是:{{searchMap.keyWord}}</p>
        <p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
    </div>

    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap: {
                    keyWord: '抖音'
                },
                // 查询结果
                result:{}
            },
            // 在methods属性中定义多个方法
            methods:{
                search(){
                    console.log('search...')
                },
                f1(){
                    console.log('f1...')
                }
            }
        })
    </script>
</body>
</html>

完善search()方法：

search() {
    console.log('search...')
    // 为result对象赋值
    this.result = {
      title:'抖音',
      site:'https://www.douyin.com/'
    }
}

在这里插入图片描述

4.4、修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如 .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():(即阻止事件原本的默认行为)

<!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>测试vue修饰符</title>
</head>

<body>
    <div id="app">

        <!-- 
            v-on:submit.prevent="onSubmitForm"
            当我们点击保存,不会直接提交表单,而是执行自定义的onSubmitForm方法

            v-model: 双向绑定,v-model="user.name" 同步user对象中的数据
         -->
        <form action="save" v-on:submit.prevent="onSubmitForm">
            <input type="text" id="name" v-model="user.name">
            <button type="submit">保存</button>
        </form>
    </div>

    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                // 定义user对象
                user: {}
            },
            methods: {
                onSubmitForm() {
                    // 简单的异步判断
                    if(this.user.name){ 
                        alert('提交表单...')
                    }else{
                        alert('请输入用户名')
                    }
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

4.5、条件渲染

v-if：条件指令

data:{
	ok:false
}

注意：单个复选框绑定到布尔值

<!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>v-if条件指令</title>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="ok">同意许可协议
        <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
        <h4 v-if="ok">用户已用意许可,请稍后...</h4>
        <h4 v-else>未同意许可</h4>


    </div>

    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok: false
            }
        })
    </script>
</body>

</html>

请添加图片描述

v-show：条件指令

使用v-show完成和上面相同的功能：

<!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>v-show条件指令</title>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="ok">同意许可协议
        <!-- v:show 条件指令 初始渲染开销大 -->
        <h4 v-show="ok">show：Lorem ipsum dolor sit amet.</h4>
        <h4 v-show="!ok">no</h4>


    </div>

    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok: false
            }
        })
    </script>
</body>

</html>

请添加图片描述

v-if和v-show的区别：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

4.6、列表渲染

v-for 列表循环指令

例1：简单的列表渲染

<!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>
    <div id="app">
        <ul>
            <!-- 循环十次,每次都把值传给n,并输出n -->
            <li v-for="n in 10">{{n}}</li>
        </ul>
    </div>

    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>

在这里插入图片描述

<!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>
    <div id="app">
        <ul>
            <!-- 循环十次,每次都把值传给n,并输出n -->
            <li v-for="n in 10">{{n}}</li>
        </ul>

        <ul>
             <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
            <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
         </ul>
    </div>

    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>

在这里插入图片描述

例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>
    <div id="app">
        <!-- 遍历数据列表 -->
        <table border="1">
            <!-- <tr v-for="user in userList"> --> <!--不带索引-->
            <tr v-for="(user,index) in userList">  <!--带索引-->
                <td>{{index}}</td>
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
    </div>

    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                // 定义一个用户列表
                userList: [
                    { id: 1001, name: 'jack', age: 18 },
                    { id: 1002, name: 'tom', age: 28 },
                    { id: 1003, name: 'helen', age: 33 }
                ]
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

5、组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

在这里插入图片描述

5.1、局部组件

局部组件，只能在当前页面有效。

定义组件（在components属性中定义）

<script>
    new Vue({
        el: '#app',
        data: {},
        // 定义局部组件，这里可以定义多个局部组件
        components: {
            // 组件的名字
            'Navbar': {
                // 组件的内容
                template: '<ul><li>首页</li><li>学员管理</li></li></ul>'
            }

        }
    })
</script>

使用组件

<div id="app">
    <!-- 以标签的方式使用,扩展HTML的标签 -->
    <Navbar></Navbar>
</div>

在这里插入图片描述

5.2、全局组件

全局组件，可以在多个页面中使用，就是将组件封装到一个js文件中，然后使用的时候引入对应的组件和标签即可。

1、在components文件夹中创建一个Navbar.js文件。

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li></li></ul>'
})

在这里插入图片描述
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>vue全局组件的使用</title>
</head>

<body>
    <div id="app">
        <Navbar></Navbar>
    </div>

    <script src="vue.min.js"></script>
    <script src="components/Navbar.js"></script>

    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

在这里插入图片描述

6、Vue实例生命周期

在这里插入图片描述
重要的声明周期方法：

created，在页面渲染之前执行。
mounted，在页面渲染之后执行。

演示

<!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>
    <div id="app">
        {{message}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'hello world!'
            },
            created() {
                debugger // 前端断点调试

                // 在页面渲染之前执行
                console.log('created...');

            },
            mounted() {
                debugger
                // 在页面渲染之后执行
                console.log('mounted...');

            }
        })
    </script>
</body>

</html>

播放按钮是执行到下一个断点处。
右边那个是向下执行。
请添加图片描述
在这里插入图片描述

面试

你知道vue生命周期吗？

我知道vue生命周期有很多方法，如 beforCreate、created、mounted等，主要用到的生命周期方法是 created和mounted，created渲染之前执行，mounted渲染之后执行。

分析生命周期相关方法的执行时机:

//===创建时的四个事件
beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行
 console.log(this.message) //undefined
 this.show() //TypeError: this.show is not a function
 // beforeCreate执行时，data 和 methods 中的 数据都还没有没初始化
},
created() { // 第二个被执行的钩子方法
 console.log(this.message) //床前明月光
 this.show() //执行show方法
 // created执行时，data 和 methods 都已经被初始化好了！
 // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount() { // 第三个被执行的钩子方法
 console.log(document.getElementById('h3').innerText) //{{ message }}
 // beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
},
mounted() { // 第四个被执行的钩子方法
 console.log(document.getElementById('h3').innerText) //床前明月光
 // 内存中的模板已经渲染到页面，用户已经可以看见内容
},
//===运行中的两个事件
beforeUpdate() { // 数据更新的前一刻
 console.log('界面显示的内容：' + document.getElementById('h3').innerText)
 console.log('data 中的 message 数据是：' + this.message)
 // beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染
},
updated() {
 console.log('界面显示的内容：' + document.getElementById('h3').innerText)
 console.log('data 中的 message 数据是：' + this.message)
 // updated执行时，内存中的数据已更新，并且页面已经被渲染
}

7、路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库。

1、创建html页面，然后引入js文件（vue和vue-router）：

<script src="vue.min.js"></script> 
<script src="vue-router.min.js"></script>

2、编写html:

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航 -->
        <!-- 通过传入 `to` 属性指定链接 -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/">首页</router-link>
        <router-link to="/student">会员管理</router-link>
        <router-link to="/teacher">讲师管理</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

3、编写js:

<!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>
    <div id="app">
        <!-- 二、编写html -->
        <h1>Hello App!</h1>
        <p>
            <!-- 使用 router-link 组件来导航 -->
            <!-- 通过传入 `to` 属性指定链接 -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/">首页</router-link>
            <router-link to="/student">会员管理</router-link>
            <router-link to="/teacher">讲师管理</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>


    <!-- 一、引入js,顺序:先引入vue、再引入router -->
    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>

    <!-- 三、编写js -->
    <script>
        // 1. 定义（路由）组件。
        // 可以从其他文件 import 进来
        const Welcome = { template: '<div>欢迎</div>' }
        const Student = { template: '<div>student list</div>' }
        const Teacher = { template: '<div>teacher list</div>' }
        // 2. 定义路由
        // 每个路由应该映射一个组件。
        const routes = [
            { path: '/', redirect: '/welcome' }, //设置默认指向的路径
            { path: '/welcome', component: Welcome },
            { path: '/student', component: Student },
            { path: '/teacher', component: Teacher }
        ]
        // 3. 创建 router 实例，然后传 `routes` 配置
        const router = new VueRouter({
            routes // （缩写）相当于 routes: routes
        })
        // 4. 创建和挂载根实例。
        // 从而让整个应用都有路由功能
        const app = new Vue({
            el: '#app',
            router
        })
        // 现在，应用已经启动了！
    </script>
</body>

</html>

在这里插入图片描述

8、axios

axios是独立于vue的一个项目（不是vue里面的），axios它基于promise用于浏览器和node.js的http客户端。

使用axios经常和vue一起使用，实现ajax操作（发送异步请求）。

使用axios应用场景:

在这里插入图片描述

axios使用

1、创建html页面，然后引入js文件(vue和axios)：

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>

在这里插入图片描述
注意：测试时需要开启后端服务器，并且后端开启跨域访问权限

2、创建json文件（模拟后台数据）：

{
    "success": true,
    "code": 20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"张三","age":20},
            {"name":"李四","age":21},
            {"name":"王五","age":18}
        ]
    }
}

在这里插入图片描述

3、使用axios发送ajax请求，请求data.json文件，得到数据，然后在页面中渲染：

<!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>axios的使用</title>
    </title>
</head>

<body>
    <div id="app">
        <div v-for="user in userList">
            {{user.name}} -- {{user.age}} 
        </div>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            // 固定的结构
            data: { // 在data定义变量和初始值
                userList: [] // 定义一个空数组，接收响应的数据
            },
            created() { // created在页面渲染之前执行
                // 在它里面调用定义的方法
                this.getUserList()

            },
            methods: { // 在methods中编写具体的方法
                // 查询所有用户数据
                getUserList() {
                    // 使用axios发送ajax请求
                    // axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
                    axios.get("data.json")
                        .then(response => {
                            // response就是请求之后返回的数据（响应信息）
                            // console.log(response)
                            // 通过response获取具体的数据，用userList接收
                            this.userList=response.data.data.items
                            // console.log(this.userList)
                        })   // 请求成功 执行then方法

                        .catch(error => {
                            // error接收失败的信息

                        })  // 请求失败 执行catch方法
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

9、element-ui

element-ui 是饿了么前端出品，基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建。

官网：https://element.eleme.cn/#/zh-CN

在这里插入图片描述

element-ui组件库：https://element.eleme.cn/#/zh-CN/component/layout

在这里插入图片描述

element-ui官方案例

1、创建html页面，cdn方式引入css和js文件：

<!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">
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Document</title>
</head>

<body>
    <div id="app">

    </div>
    <!-- cdn方式引入vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入element-ui组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>

在这里插入图片描述

2、编写html代码：

<div id="app">
    <!-- 按钮 -->
    <el-button @click="visible = true">Button</el-button>
    <!-- 默认情况 visible为false 对话框不显示-->
    <!-- 当点击按钮后visible为true 显示对话框 -->
    <!-- dialog 对话框  -->
    <el-dialog :visible.sync="visible" title="Hello world">
        <p>Hello Element</p>
    </el-dialog>
</div>

在这里插入图片描述

关于.sync的扩展：https://www.jianshu.com/p/d42c508ea9de

3、编写js代码：

<!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">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 按钮 -->
        <el-button @click="visible = true">Button</el-button>
        <!-- 默认情况 visible为false 对话框不显示-->
        <!-- 当点击按钮后visible为true 显示对话框 -->
        <!-- dialog 对话框  -->
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Hello Element</p>
        </el-dialog>
    </div>

    <script src="vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {//定义Vue中data的另一种方式
                return { visible: false }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述
测试：

10、Node.js

nodejs官网：https://nodejs.org/en/

nodejs中文网：http://nodejs.cn/

Node.js是JavaScript的运行环境，用于执行JavaScript脚本，这样就不在依赖浏览器啦，直接使用node.js运行JavaScript代码。
Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。
模拟服务器效果，比如 tomcat、jobss等。

10.1、安装Node.js

官网下载地址：http://nodejs.cn/download/

LTS：长期支持版本、 Current：最新版。

国内镜像下载地址（node-v10.14.2版本）：https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v10.14.2/node-v10.14.2-x64.msi

在这里插入图片描述

10.2 检测是否安装成功

快捷键win+r，输入cmd ，打开命令提示符窗口。

输入： node -v ，验证是否安装成功。

在这里插入图片描述
安装成功后会显示对应的版本号。

10.3、快速入门

1、创建一个test1.js文件：

console.log('hello world!')

在这里插入图片描述

2、通过终端（或者cmd方式）执行js文件：

node test1.js

在这里插入图片描述

浏览器的内核包括两部分核心：

DOM渲染引擎、js解析器（js引擎）。
js运行在浏览器内核中的js引擎内部。
Node.js是脱离浏览器环境运行JavaScript程序，基于V8 引擎（Chrome 的 JavaScript的引擎）。

10.4、服务器端应用开发

1、创建 app.js 文件：

const http = require('http');
// 创建一个http服务
http.createServer(function (request, response) {
    // 发送 HTTP 头部
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, { 'Content-Type': 'text/plain' });
    // 发送响应数据 "Hello World"
    response.end('Hello World');
}).listen(9001);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:9001/')

2、运行服务器程序：

node app.js

在这里插入图片描述

3、浏览器测试访问：http://127.0.0.1:9001/

在这里插入图片描述
停止服务：ctrl + c

11、npm （包管理工具）

11.1、什么是NPM?

NPM（全称：Node Package Manager），是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

11.2 NPM的安装位置

我们通过npm 可以很方便地下载js库，管理前端工程。（类似 maven下载jar包，管理java项目）

Node.js默认安装的npm包和工具的位置：nodejs目录\node_modules

在这个目录下你可以看见 npm目录，npm本身就是被NPM包管理器管理的一个工具，说明Node.js已经集成了npm工具。

在这里插入图片描述

在命令提示符窗口，输入npm -v命令，查看npm版本：

在这里插入图片描述

11.3、修改npm镜像

NPM默认从官方的镜像源：http://npmjs.com下载，但是这个网站在国内速度很慢。
推荐使用淘宝镜像源：http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

设置镜像地址：

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list

在这里插入图片描述

11.4、使用npm管理项目

1、创建一个空的文件夹

在这里插入图片描述

2、初始化项目

#建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化
npm init

#按照提示输入相关信息，如果是用默认值则直接回车即可,最后输入yes。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。

在这里插入图片描述

如果想直接生成 package.json 文件，使用命令: npm init -y。

在这里插入图片描述

3、在当前项目中使用npm下载js依赖，命令：npm install 依赖名称

在这里插入图片描述

11.5、npm install命令的使用

#使用 npm install xxx 默认安装依赖包的最新版
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的<dependencies>
npm install jquery

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目

#安装指定版本依赖
npm install jquery@3.6.0

#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint

#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack

11.6、其它命令

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

12、Babel（转码器）

Babel是一个广泛使用的转码器，可以将ES6代码（简洁）转为ES5代码（对浏览器兼容性很好），最终在现有环境中执行。
这意味着，你就可以用 ES6 编写程序，不用担心现有环境是否支持。

12.1、安装 Babel

安装命令行转码工具

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

# 全局安装 babel-cli
npm install --global babel-cli
#查看是否安装成功
babel --version

在这里插入图片描述

12.2、Babel的使用

1、初始化项目:

npm init -y

2、创建js文件，编写es6代码：

// ES6代码
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素+1
input = input.map(item => item + 1)
console.log(input)

在这里插入图片描述

3、创建babel配置文件：

在项目的根目录下，创建.babelrc配置文件，该文件用来设置转码规则和插件，基本格式如下。

{
 "presets": [],
 "plugins": []
}

然后为presets字段配置转码规则，规则为: es2015。

{
 "presets": ["es2015"],
 "plugins": []
}

在这里插入图片描述

4、为项目安装es2015转码器：

# --save-dev 开发时的依赖包
npm install --save-dev babel-preset-es2015

在这里插入图片描述

5、使用命令转码（在当前项目中执行）

# 1、根据文件转码
# 将es6\01.js文件,转es5到dist目录下
babel es6/01.js -o dist/01_es5.js

在这里插入图片描述

# 2、根据文件夹转码
# 将es6中的文件,转成es5,然后放到dist目录
babel es6 -d dist

在这里插入图片描述

白豆五

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录