谷粒学院(三)

最新推荐文章于 2023-10-28 18:27:52 发布

归去来兮★

最新推荐文章于 2023-10-28 18:27:52 发布

阅读量1k

点赞数 1

分类专栏： java 文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/zhouhe_/article/details/120877911

版权

java 专栏收录该内容

108 篇文章 1 订阅

订阅专栏

文章目录

ECMAScript 6

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

基本语法

let声明变量

let 与 var的区别：

let 定义的变量在一个局部作用域中(就是一个{}中)，var 定义的变量在全局作用域名
一个变量名，let的只可以声明一次，var 可以声明多次

const声明常量

声明常量必须赋值，且不允许改变

解构赋值

数组解构

let [x,y,z] = [1,2,3];
console.log(x,y,z);

对象解构

var person = {name:"zhangsan",age:13};
let {name,age} = person;
console.log(name,age)

模版字符串

`` 配合 ${} 使用，可以在字符串中加入变量和表达式

// 传递变量
var name = "zhangsan";
var age = "13";
var str = `my name is ${name},my age is ${age}`;
console.log(str);
// 传递表达式
function f(){
    return "hello world";
}
console.log(`es6 ${f()}`)

声明对象简写

var name = "zhangsan";
var age = "13";
var person = {name,age};
console.log(person);

方法的简写

// 常规写法
const p1 = {
    eat:function() {
        console.log("eat1")
    }
}

// 简写方法
const p2 = {
    eat(){
        console.log("eat2")
    }
}
p1.eat();
p2.eat();

对象拓展运算符

对象复制 & 对象合并

// 对象复制
var person = {name:"zhangsan",age:13};
var newPerson = {...person};
console.log(newPerson);
// 对象合并
var n = {name:"lisi"};
var a = {age:14};
var p = {...n,...a}
console.log(p);

箭头函数

var fun = (a,b)=>a+b;
console.log(fun(3,2));

VUE

入门案例

<body>
    <div id="app">
    {{message}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"hello Vue"
        }
    })
</script>

在vs code中创建代码片段

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets

注意：制作代码片段的时候，字符串中如果包含文件中复制过来的“Tab”键的空格，要换成“空格键”的空格

{
    "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"
    }

单向绑定与双向绑定

v-bind:filedName => 单向绑定属性绑定

v-model => 双向绑定

<body>
    <div id="app">
      单向绑定：  <input type="text"  v-bind:value="msg">
      双向绑定：  <input type="text" v-model="msg" >
      {{msg}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:"hello"
            }
        })
    </script>
</body>

事件绑定

v-on:XXX <=> @XXX

XXX :事件名

<body>
    <div id="app">
      <button v-on:click="search()">查询1</button>
      <button @click="search()">查询2</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {},
            methods:{
                search(){
                    console.log("点击了按钮")
                }
            }
        })
    </script>
</body>

修饰符

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

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

即阻止事件原本的默认行为 v-on:事件.prevent

<body>
    <div id="app">
        <form action="save" v-on:submit.prevent="onSubmit()">
            <input type="text" v-model="msg">
            <input type="submit" value="提交" >

        </form>
  
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:""
        },
        methods:{
            onSubmit(){
                if(this.msg.length > 0){
                    alert("去提交了")
                }else{
                    alert("请输入值")
                }
            }
        }
    })
</script>

条件渲染

V-for

<body>
    <div id="app">
      <input type="checkbox" v-model="ok"> 是否选择
      <span v-if="ok">哈哈哈哈哈</span>
      <span v-else>呵呵呵呵</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:true
            }
        })
    </script>
</body>

循环遍历

<body>
    <div id="app">
        <!-- 普通遍历 -->
        <ul>
            <li v-for="(item,index) in 10">{{item}} ---- {{index}}</li>
        </ul>
        <!-- 遍历数组 -->
        <table width="200" border="1">
            <tr v-for="item in list">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list:[
                    {name:"zhangsan",age:13},
                    {name:"lisi",age:14},
                    {name:"wangwu",age:15}
                
                ]
            }
        })
    </script>
</body>

axios的使用和new Vue({})的基本格式

<body>
    <div id="app">

        <template v-for="item in userList">
            <div> {{item.name}} ----> {{item.age}}</div>
        </template>
    </div>
    <!-- 导包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList:[]
            },
            created(){
                this.getData();
            },
            methods:{
                getData(){
                    axios.get("user.json")
                        .then(res=>{
                            console.log("获取成功",res)
                            this.userList=res.data.data
                        })
                        .catch(err=>{
                            console.log("获取失败",err)
                        })
                }
            }
        })
    </script>
</body>

Element-ui

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

官网： https://element.eleme.cn

Node.js

What node.js?

之前学习过java,运行java需要安装jdk环境

学习的这个node.js,是JavaScript的运行环境，用于执行javaScript代码，不需要浏览器，直接使用node.js运行javaScript代码

需要安装 node.js

模拟浏览器效果，比如tomcat

使用node.js 执行javaScript代码

node hello.js

NPM

一.简介

什么是NPM？

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

NPM工具的安装位置

我们通过npm可以很方便的下载js库，管理前端工程

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

查看当前版本： npm -v

二.使用npm管理项目

1.项目初始化

创建一个项目文件夹

cmd 进入使用命令： npm init [-y]

2.修改npm镜像

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

3.npm install 命令

安装指定包： npm install jquery

安装指定版本包： npm install jquery@2.1.x

项目到打包到生产环境不包含的依赖：npm install -D eslint

全局安装：npm install -g webpack

4.其他命令

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

Babel

一.简介

Babel 是一个广泛使用的转码器，可以将ES6代码转换为ES5代码，从而在现有的环境执行。

这意味，您可以现在就用ES6 编写程序，而不用担心现有的环境是否支持

二.安装

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

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

三.Babel 的使用

1.初始化项目

npm init -y

2.创建文件

例如： hello.js

3.配置 .babelrc

Babel的配置文件是 .babelrc ,存放在项目的跟目录下，该文件用来转码规则和插件

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

4.安装转码器

项目中安装

npm install --save-dev babel-preset-es2015

5.转码

# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整个目录转码
mkdir dist2

# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2

模块化

什么是模块化？

1.开发后端接口时，开发controller, service,mapper,controller注入service，service注入mapper,在后端中，类与类之间的调用称为后端的模块化操作

2.前端模块化，在前端中，js 与 js 之间的调用称为前端模块化操作

一.es5实现模块化操作

t1.js

const a = function(){
    console.log("helloAAAA")
}
const b = function(){
    console.log("helloAAAA")
}

module.exports={
    a,
    b
}

t2.js

const t1 = require("./t1.js")
t1.b();

二.es6实现模块化操作

注意：如果使用es6写法实现模块化操作，在node.js 环境中能直接运行的，需要使用babel把es6 代码转换为 es5 代码，才可以在 node.js 进行运行

方式一

t1.js


export function a(){console.log("hello worldAAA")};
export function b(){console.log("hello worldBBB")};

t2.js

import t1 from "./t1.js"
t1.a();
t1.b()

方式二

t1.js

export default{
  a(){console.log("hello worldAAA")},
  b(){console.log("hello worldBBB")};
}

Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

一、Webpack安装

全局安装：npm install -g webpack webpack-cli

查看版本： webpack -v

二.初始化项目

创建 webpack文件夹

进入webpack 目录

执行命令 npm init -y
创建src文件夹

src 下创建 common.js

exports.info = function (str) {
       document.write(str);
}

src 下创建 utils.js

exports.add = function (a, b) {
        return a + b;
    }

src下创建main.js

const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));

三.js打包

1.webpack目录下创建配置文件webpack.config.js、

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

2.命令行执行编译命令

webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

另一种方式：

也可以配置项目的npm运行命令，修改package.json文件
"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }
运行npm命令执行打包
npm run dev

3**.webpack目录下创建index.html**

// 引用bundle.js

<body>
    <script src="dist/bundle.js"></script>
</body>

4**.浏览器中查看index.html**

项目前端页面的搭建

一,快速搭建

下载vue-admin-template

https://gitee.com/quick_dev/vue-admin-template/repository/archive/master.zip
解压到工作区

改名
安装依赖

npm install
启动项目

npm run dev

归去来兮★

关注

1
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

谷粒学院(三)

文章目录

基本语法

let声明变量

const声明常量

解构赋值

模版字符串

声明对象简写

方法的简写

对象拓展运算符

箭头函数

VUE

入门案例

在vs code中创建代码片段

单向绑定 与 双向绑定

事件绑定

修饰符

条件渲染

循环遍历

axios的使用和new Vue({})的基本格式

Element-ui

Node.js

What node.js?

使用node.js 执行javaScript代码

NPM

一.简介

二.使用npm管理项目

1.项目初始化

2.修改npm镜像

3.npm install 命令

4.其他命令

Babel

一.简介

二.安装

三.Babel 的使用

1.初始化项目

2.创建文件

3.配置 .babelrc

4.安装转码器

5.转码

模块化

什么是模块化？

一.es5实现模块化操作

二.es6实现模块化操作

Webpack

一、Webpack安装

二.初始化项目

src下创建main.js

三.js打包

项目前端页面的搭建

一,快速搭建

单向绑定与双向绑定