Day103.前端基础一：VS Code、ECMAScript 6(ES6)、Vue

焰火青年·

已于 2022-08-17 14:57:06 修改

阅读量284

点赞数 1

分类专栏：前端文章标签：前端 servlet 服务器

于 2022-07-15 11:07:30 首次发布

本文链接：https://blog.csdn.net/a111042555/article/details/125797573

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、下载和安装VS Code、初始设置

1、创建工程

2、浏览网页

二、ECMAScript 6(ES6) 基本语法 ★

2. 基本数据渲染和指令 v-bind:属性

3. 双向数据绑定 v-model

4. 事件绑定 @click、v-on:click

4. 修饰符 (取消默认事件)

5. 条件渲染 ★

6. 列表渲染 v-for="(user,i) in userList" >

关于前端

前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要。最初所有的开发工作都是由后端工程师完成的，随着业务越来越繁杂，工作量变大，于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来，形成了前端开发。

PRD（产品原型-产品经理） - PSD（视觉设计-UI工程师(不是美工)） - HTML/CSS/JavaScript（PC/移动端网页，实现网页端的视觉展示和交互-前端工程师）

一、下载和安装VS Code、初始设置

Visual Studio Code - Code Editing. Redefined 微软出品

1、中文界面配置

首先安装中文插件：Chinese (Simplified) Language Pack for Visual Studio Code
右下角弹出是否重启vs，点击“yes”
有些机器重启后如果界面没有变化，则点击左边栏Manage -> Command Paletet...【Ctrl+Shift+p】
在搜索框中输入“configure display language”，回车
打开locale.json文件，修改文件下的属性 "locale":"zh-cn"

{
	// 定义 VS Code 的显示语言。
	// 请参阅 https://go.microsoft.com/fwlink/?LinkId=761051，了解支持的语言列表。
	
	"locale":"zh-cn" // 更改将在重新启动 VS Code 之后生效。
}

插件安装：

1、创建工程

开启完整的Emmet语法支持

设置中搜索 Emmet：启用如下选项，必要时重启vs

快捷键：! + Tab

复制当前行：Shift + Alt + Up/down

2、浏览网页

以文件路径方式打开网页预览

需要安装“open in browser”插件：

文件右键 -> Open In Default Browser

以服务器方式打开网页预览

需要安装“Live Server”插件：

文件右键 -> Open with Live Server

3. 提出代码片段

Alt + Shift (或鼠标中键) 全部选中，加“，End键换到行尾，添加”,

{
	// Place your view 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

		"Print to console": {
		"scope": "html",
		"prefix": "vuehtml", //快捷键
		"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"    <meta charset=\"UTF-8\">",
"    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"    <title>Document</title>",
"</head>",
"<body>",
"    <dev id=\"app\">",
"        <h1>{{message}}</h1>",
"    </dev>  ",
"    <!-- 导入vue -->",
"    <script src=\"vue.min.js\"></script>",
"    <script>",
"        let app = new Vue({",
"            el:'#app',   //#id选择器， .类选择器",
"            data:{",
"                message: 'Hello Vue!'",
"            }",
"        })",
"    </script>",
"",
"</body>",
"</html>",
		],
		"description": "vue基础代码html片段"
	}


}

二、ECMAScript 6(ES6) 基本语法 ★

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

1. let声明变量

1.let 区分作用域，var 不区分作用域
2.let不可以重复声明变量，可以重复声明变量
3var会提升变量声明 (提前声明，但不赋值)，let不会

2. const 常量

1. 常量无法修改只读变量

2. 声明常量时必须赋值

3. 解构赋值

    <script>
        //解构数组,ES6方式 ，同时声明多个变量
        let[x,y,z] = [1,2,3]
        console.log(x,y,z)

        //解构对象  ES6方式
        let {name,age} = user
        console.log(name,age)
    </script>

4. 模板字符串 (插值表达式)

反引号、飘号 ``，还可以进行运算判断

    <script>
        let str = "hello"
        let className = "java220314"
        //传统方式
        console.log(str +"" + className + "!");
        //模板字符串
        console.log(`${str} ${className}!`);

        //长字符串
        let head = `
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
`   
        console.log(head);

        //插值表达式调用函数
        function getName(){
            return "java220314"
        }
        console.log(`${str} ${getName()} !`);

    </script>

5. 声明对象简写

    <script>
        let name = 'zhang3'
        let age = 33
        //传统方式
        let user = {
            name:name,
            age:age
        }
        console.log(user);

        //声明对象简写
        let user1 = {name,age}
        console.log(user1)
    </script>

6. 声明函数简写

函数直接声明，方法定义到对象内

    <script>
        //定义函数
        function f1(){

        }
        let f2 = function(){

        }
        
        //定义方法
        let user = {
            name:'zhangsan',
            age:33,
            // sayHi:function(){
            //     console.log('hello zhang3')
            // }
            //简写
            sayHi(){
                console.log('hello zhang3')
            }
        }
        user.sayHi()
    </script>

7. 对象扩展运算符

... 在java中是可变参数

<script>
        let user = {
            name:'zhang3',
            age:33
        }
        //等号操作：赋值了内存地址，指向同一个内存空间
        let user1 = user
        console.log(user1==user); //true
        //使用对象扩展运算符赋值user，复制了内存，创建了新对象
        let user2 = {...user}
        console.log(user2==user); //false

        //对象扩展运算符，赋值属性
        let name = {name:'lisi'}
        let age = {age:44}
        let user3 = {...name,...age}
        console.log(user3);

        let user4 = {...user,user3}
        console.log(user4) //user3会覆盖user4


    </script>

8. 箭头函数

与java lambda表达式区别

只有函数式接口(只有一个方法)才可以使用

    <script>
        let f1 = function(a){
            return a
        }
        console.log(f1(100))
        //只有一个参数时，()可以省略，
        //方法体只有一行{}可以省略，return就是参数时候，return 可以省略
        let f2 = a => a
        console.log(f2(200))

        let f3 = (a,b) => a + b
        console.log(f3(100,200))

        //在回调函数中应用
        //$.get("url",function(data){})
        //$.get("url",data=>{})
    </script>

三、Vue ★★

Vue (读音类似于 view) 是一套用于构建用户界面(前端)的渐进式框架。

官方网站：Vue.js

1. 初始Vue.js

导入vue.min.js

<body>
    <dev id="app">
        <h1>{{message}}</h1>
    </dev>  
    <!-- 导入vue -->
    <script src="vue.min.js"></script>
    <script>
        let app = new Vue({
            el:'#app',   //#id选择器， .类选择器
            data:{
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

2. 基本数据渲染和指令 v-bind:属性

        <!-- v-bind:可以把静态属性编程可以被渲染的属性 -->
        <h1 v-bind:title="title">{{message}}</h1>
        <h1 :title="title">{{message}}</h1>

3. 双向数据绑定 v-model

    <div id="app">
        <div><input type="text" v-model="search.info"></input></div><br>
    </div>  
    <!-- 导入vue -->
    <script src="vue.min.js"></script>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                search: {
                    info:'尚硅谷'
                }
            }
        })
    </script>

4. 事件绑定 @click、v-on:click

    <dev id="app">
        <div><button v-on:click="searchInfo()">咨询</button></div>
        <div><button @click="searchInfo()">咨询</button></div>
    </dev>  
    <script src="vue.min.js"></script>
    <script>
        let app = new Vue({
            el:'#app',
            methods: {
                searchInfo(){
                    console.log("search.info...")
                }
            }
        })
    </script>

4. 修饰符 (取消默认事件) prevent

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

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

即阻止事件原本的默认行为

    <dev id="app">
        <!-- .prevent取消默认事件 -->
        <form action="" v-on:submit.prevent ="dosubmit()">
            <div> <input type="text" v-model="user.name"></input></div>
            <button type="submit">提交表单</buttoon>
        </form>
    </dev>  
    <script src="vue.min.js"></script>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                user:{}
            },
            methods:{
                dosubmit(){
                    console.log("dosubmit")
                }
            }
        })
    </script>

5. 条件渲染 ★

<body>
    <div id="app">
        <div><input type="checkbox" v-model="ok">是否同意1{{ok}}</input></div>
        <div v-if="ok">同意</div>
        <!-- <div v-if="!ok">查看协议</div> -->
        <div v-else>查看协议</div>
    </div>  

    <div id="app2">
        <div><input type="checkbox" v-model="ok">是否同意2{{ok}}</input></div>
        <div v-show="ok">同意</div>
        <div v-show="!ok">查看协议</div>
    </div>  

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

        let app2 = new Vue({
            el:'#app2',
            data:{
                ok:false
            }
        })
    </script>

</body>

v-if 与 v-show 的区别：v-if是动态加载，v-show会全部加载出来

6. 列表渲染 v-for="(user,i) in userList" >

    <div id="app">
        <!-- 列表渲染 -->
        <ul>
            <li v-for="n in num">{{n}}</li>
        </ul>
        <!-- 表格渲染 -->
        <!-- 快捷键:table>tr>td*3 -->
        <table v-for="(user,i) in userList" >  <!-- :key? -->
            <tr>
                <td>{{i+1}}</td>
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
    </div>  
    <script src="vue.min.js"></script>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                num:[1,2,3,4,5],
                userList:[
                    {id:1,name:'zhang3',age:33},
                    {id:2,name:'li3',age:44},
                    {id:3,name:'wang5',age:55}
                ]
            }
        })
    </script>

五、Vue 高级语法

1. 局部组件 components

组件（Component）是 Vue.js 最强大的功能之一。注意：声明只能有一个大写字母！！

    <div id="app">
        <!-- 使用组件 -->
        <Navbar></Navbar>
        <Navbar></Navbar>
        <Navbar></Navbar>

    </div>
    <script src="vue.min.js"></script>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                
            },
            components: {
                //局部组件  注意：只能有一个大写字母！！
                'Navbar':{
                    template:"<ul><li>菜单1</li><li>菜单2</li><li>菜单3</li></ul>"
                }
            }
        })
    </script>

2. 全局组件

    <body>
        <div id="app">
            <!-- 使用组件 -->
            <Navbar></Navbar>
            <Navbar></Navbar>
            <Navbar></Navbar>
    
        </div>
        <script src="vue.min.js"></script>
        <script src="Navbar.js"></script>
        <script>
            //全局组件，提取到了js文件
            //Vue.component('Navbar',{template:"<ul><li>菜单1</li><li>菜单2</li><li>菜单3</li></ul>"})

            let app = new Vue({
                el:'#app',
                data:{
                    
                },
            })
        </script>

    </body>

Navbar.js

//全局组件
Vue.component('Navbar',{template:"<ul><li>菜单1</li><li>菜单2</li><li>菜单3</li></ul>"})

3. 生命周期钩子函数 ★★

created：属性、方法已创建，

mounted：完成渲染

    <div id="app">
       <div><h1 id="h1">{{message}}</h1></div>
       <div><button v-on:click="updateInfo()">更新</button></div>
    </div>  
    <script src="vue.min.js"></script>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                message:'床前明月光'
            },
            methods:{
                showInfo(){
                    console.log("showInfo....");
                },
                updateInfo(){
                    console.log("updateInfo....");
                    this.message = '疑是地上霜'
                }
            },
            //初始化 四个钩子方法
            beforeCreate(){
                //初始化之前执行,vue属性方法均未创建
                //console.log(this.message);
                //this.showInfo();
            },
            created(){
                //初始化完成，vue数据已可以使用，但未渲染
                console.log(this.message);
                this.showInfo();
            },
            beforeMount() {
                //数据挂载前 (渲染前)
                let text = document.getElementById("h1").innerText
                console.log("内存模板："+this.message);
                console.log("页面元素："+text);
            },
            mounted(){
                //完成数据挂载(完成渲染)
                console.log("mounted");
                let text = document.getElementById("h1").innerText
                console.log("内存模板："+this.message);
                console.log("页面元素："+text);
            }
        })
    </script>

六、路由 (了解)

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。选择不同的菜单，打开不同的网页。

网关 gateway、消息中间件rabbitMQ中，也有类似概念。

需要引入js包，先引入vue

    <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>
    
      <!-- 注意导入顺序 -->
    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>

    <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>