vue基础_day01

最新推荐文章于 2023-01-10 14:34:49 发布
最新推荐文章于 2023-01-10 14:34:49 发布
阅读量632 收藏 1
点赞数
分类专栏： 学习 文章标签： java vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Java_pipixia/article/details/100021303
版权

文章目录

1 ECMAScript6

1.1 es6的认识

  1. ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范
  2. ES6就是现在最新的JS语法
  3. 后期更多使用年号来做版本(ES2017,ES2018,…)

1.2 es6常用语法

1.2.1 let&const
  1. let:用来声明变量。它的用法类似于var(但是声明的变量只在 let 命令所在的代码块内有效。)
  2. 代码块有效
  3. 不能重复声明
  4. 没有变量提升
/*
    var的测试结果,在循环外部可以获取，但是let是无法获取的
    大家可以注意,let更加符合我们java对于一个变量的定义
*/
for (var i = 0; i < 5; i++) {
    console.debug(i);
}
console.debug("外部i:"+i); //外部i:5

for (let j = 0; j < 5; j++) {
    console.debug(j)
}
console.debug("外部j:"+j); //ReferenceError: j is not defined

const:声明常量不能修改

const val = "abc";
val = "bcd"; //invalid assignment to const `val'
1.2.2 解构表达式

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
解构变量赋值

//以前变量赋值
let a = "张三";
let b = "李四";
let c = "王五";
console.debug(a,b,c);
//使用解构变量赋值
let [a,b,c] = ["张三","李四","王五"]
console.debug(a,b,c);

数组解构

let arr = ["皮皮虾","皮皮怪","皮皮虫"];
let [a,b,c] = arr;
console.debug(a,b,c);

对象解构

let person = {name:"皮皮虾",age:18};
//把person对象中的值根据名称直接赋值给name与age两个属性
let {name,age} = person;
console.debug(name,age);
1.2.3 箭头函数

相当于咱们Java中的lambda表达式

<script>
  /*function say() {
        console.log("皮皮虾说：")
    }
    say();*/
    /**
     * ()：方法的参数
     * {}：方法体 （如果方法体只有一句代码  大括号可以省略）
     * */
    /*let say =(mag)=> console.log("皮皮怪说：" + mag);
    say("你打不过我的!");*/

    //定义一个常量
    const person = {name:"皮皮虾" , age:18};
    //准备相应的方法
    /*function say(p) {
        console.log("名称：" +p.name )
    }
    say(person)*/

   /* let say = ({name,age}) => {
        console.log("名称：" +name )
    };
    say(person)*/

   let user = {
       name:"xxx",
       hello:()=> {
           console.log("皮皮坏")
       },
       hello2(){
           console.log("是真的坏")
       }
   };
   user.hello();
   user.hello2();
</script>
1.2.4 Promise
  1. 异步编程的解决方案(比传统的解决方案更加强大)
  2. Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件
  3. 我们可以在Promise中封装一个异步请求的结果
    注：
    以后咱们会使用axios(更加的简单啦)，它是对Promise的底层的封装，大家可以先简单理解为就是咱们原生Ajax与JQuery封装后的区别
<script>
    /**
     * resolve：成功后执行的函数
     * reject：失败后执行的函数
     */
    var promise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            let num = Math.random();
            if (num>0.5){
                //执行成功
                resolve("你怕是个皮皮虾...");
            }else {
                //执行失败
                reject("才不是...");
            }
        },2000)
    });
    //这里就是执行相应的功能
    promise.then(function (msg) {
        console.log(msg)
    }).catch(function (msg) {
        console.log(msg)
    })
</script>
1.2.5 模块化规范
  1. 模块化就是把代码拆分,可以重复利用
  2. 模块化是一种思想,前端有很多规范可以实现这种思想
  3. commonJs:nodeJS中的实现方案
  4. amd/cmd:可以在浏览器中直接实现
  5. ES6：可以在浏览器中直接实现
  6. ES6咱们使用两个命令构成：export和import
  7. export命令用于规定模块的对外接口
  8. import命令用于导入其他模块提供的功能
1.2.5.1 导出功能

导出代码

//定义一个变量(对象)
const util ={
    add(a,b){
        return a+b;
    }
}
//导出这个变量(对象)
export util;

导出代码简写形式

//直接导出相应的变量
export const util ={
    add(a,b){
        return a+b;
    }
}

可以导出任何东西(基本类型,函数,数组,对象)

var name = "小张";
var age = 34;
export {name,age}

可以省略名称

export default {
    add(a,b){
        return a+b;
    }
}
1.2.5.2 导入功能

导入代码

//导入util(注:如果导入的是default关键字导出,这个util的名称随便取)
import util from 'hello.js'
//调用util中的方法
util.sum(3,4)

批量导入

//批量导入前面导出的name和age
import {name,age} from 'user.js'
console.debug(name,age);

在这里插入图片描述

2 Vue入门

2.1 什么是vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

  1. Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html
  2. Vue只关注视图层。
  3. Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
  4. Vue的目标是通过尽可能简单的 API - - - 实现响应的数据绑定和组合的视图组件。
  5. Vue学习起来非常简单。

Vue的特点
轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。
数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
指令
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
插件化
Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
组件化
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

2.2 el,data与method

2.2.1 使用Vue三步曲
  1. 引入Vue.js
  2. 准备被挂载的元素
  3. JS完成挂载
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、引入vue的js支持-->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
    2、准备Vue容器
    可以使用id，class，标签等选择器
-->
<div id="app">
    {{msg}}
</div>
<!--3、vue与容器建立关系-->
<script>
    new Vue({
        //el:挂载
        el: "#app",
        data: {
            msg: "Hello,皮皮虾..."
        }
    })
</script>
</body>
</html>
2.2.2 Vue的重要元素

el

  1. el是用于完成挂载功能
  2. 挂载可以使用id,class,标签
  3. 不管使用哪些方式，都只能挂载一个
  4. 建议使用id进行挂载、
  5. 只要挂载成功的元素，才能使用vue的功能(表达式等)
    data
  6. data是咱们的数据
  7. 获取数据有两种方式
  8. 直接在js中获取/设计
  9. 在表达式中来获取
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}}  === {{sex}} <br>
    {{employee}} ===  {{employee.name}}=== {{employee.age}} <br>
    {{hobbys}} === {{hobbys[0]}}
</div>


<script>

    var vue = new Vue({
        el:"#app",
        //data:代表相应的数据
        data:{
            msg:"我是个东西",
            sex:true,
            employee:{
                name:"张扬",
                age:18
            },
            hobbys:["打篮球","写代码","看别写代码"]
        }
    })

    alert(0);
    //当数据发生变化后,表达式中的数据也会同时变化
    // vue.msg = "我其实不是个东西";
    vue.msg = "haha"

</script>
</body>
</html>

methods
指的是咱们的方法元素
调用方法的位置
在js中直接调用
可以用表达式调用
可以直接使用this获取到data中的数据

2.3 vue的钩子方法

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

2.3.1 vue的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程
创建实例
装载模板
渲染模板
Vue为生命周期中的每个状态都设置了钩子函数（监听函数）
created与mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作

2.3.2 vue的表达式
  1. 可以使用四则运算符
  2. 可以使用三目运算符
  3. 字符串,对象,数组都可以直接操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、引入vue的js支持-->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{mag}} {{4+6}}
</div>
<!--3、vue与容器建立关系-->
<script>
    var v = new Vue({
        el: "#app",
        data: {
            mag: "皮皮虾"
        }
    });
</script>
</body>
</html>

2.4 vue重要指令

在这里插入图片描述

2.4.1 v-html与v-text
  1. html会解析HTML标签(相当:innerHTML)
  2. text不会解析HTML标签(相当:innerText)
<body>
<div id="app">
    <!--v-html:会计算数据中的标签-->
    <div v-html="msg"></div>
    <!--v-text:不会计算数据中的标签-->
    <div v-text="msg"></div>
</div>
<!--3、vue与容器建立关系-->
<script>
    var v = new Vue({
        el: "#app",
        data: {
            msg: "<h1>皮皮虾</h1>"
        }
    });
</script>
</body>

在这里插入图片描述

2.4.2 v-for
  1. 遍历咱们的数据(数字,字符串,对象,集合)
  2. 数字就是普通的循环 for(var i=1;i<=数字;i++)
  3. 字符串是拿到每一个字母
  4. 对象循环
    ①v:代表对象的属性值
    ②k:代表对象的属性名
    ③i:代表索引
  5. 数组循环
    ①v:代表对象的属性值
    ②i:代表索引
<body>
<div id="app">
    <!--无序列表-->
    <ul>
        <li v-for="(item,index) in hobbys">{{index+1}} - {{item}}</li>
    </ul>
    <ul>
        <li v-for="(val,name,index) in employee">{{name}}:{{val}}</li>
    </ul>

    <!--遍历字符串-->
    <ul>
        <li v-for="v in msg">{{v}}</li>
    </ul>

    <!--遍历数字-->
    <ul>
        <li v-for="v in num">{{v}}</li>
    </ul>
</div>
<!--3、vue与容器建立关系-->
<script>
    new Vue({
        el: "#app",
        data: {
            hobbys:["皮皮虾","打","皮皮怪"],
            msg:"asdasdsad",
            num:12,
            employee:{
                name:"皮皮虾",
                age:18,
                sex:true,
                say() {
                    console.log("aaaaa")
                }
            }
        }
    });
</script>
</body>

在这里插入图片描述

2.4.3 v-bind的使用
  1. bind主要是用于绑定相应的属性 <标签 v-bind:属性名="属性值">
  2. bind有一种简写形式 <标签 :属性名="属性值">
  3. 如果直接把整个对象进行属性绑定 <标签 v-bind="对象">
<body>
<div id="app">
    <!--bind：绑定属性-->
    <!--<img src="img/1.jpg">-->
    <!--<img v-bind:src="imgUrl" v-bind:width="width" />-->
    <!--bind的简写形式-->
    <img :src="imgUrl" :width="width" :height="height" />

    <img v-bind="imgAttr">
</div>
<!--3、vue与容器建立关系-->
<script>
    new Vue({
        el: "#app",
        data: {
            imgUrl:"img/1.jpg",
            width:100,
            height:100,
            imgAttr:{
                src:"img/1.jpg",
                width:100,
                height:150
            }
        }
    });
</script>
</body>

3 Nodejs&Npm安装

3.1 安装NodeJs

  1. 下载后直接安装
  2. 安装后测试
    ①确定环境变量中是否有nodejs的配置
    ②输入命令 node -v ：查看node的版本
    ③输入命令 npm -v : 查看npm的版本
    在这里插入图片描述
    ④输入命令 npm install npm@latest -g 升级npm
    在这里插入图片描述

3.2 idea中的npm安装

在这里插入图片描述在idea下方的Teminal即可输入命令

3.3 命令学习

  1. 初始化命令
    ①npm init ->初始化，会在项目中创建一个package.json文件 (相当于建了一个maven的pom.xml文件)
    ②npm init -y ->初始化(跳转确定信息)
  2. 安装命令
    ①全局安装(所有项目都能用)
    npm install -g vue
    npm -g root 安装路径
    ②局部安装(安装项目可以使用)
    npm install/i vue
    在这里插入图片描述
  3. 其它命令
    ①查看某个模块：npm list vue
    ②列表模块(查看所有模块)：npm ls
    ③卸载模块：npm uninstall vue
    ④更新模块：npm update vue
    ⑤运行工程：npm run dev/test/online -> 平时运行使用(需要配置,现在无法执行)
    ⑥编译工程：npm run build -> 上线时需要进行编译(编译完扔到服务器中运行)
虞铭轩、
关注
专栏目录
Vue基础（day01）
weixin_44181400的博客
12-18 368
vue基本代码结构 var vm = new Vue({ el : '#app',//表示，当前new的 Vue 实例，要控制页面上的那个区域 //这里的data就是MVVM中的M,专门用来保存每个页面的数据 data : { //data属性中，存放的是el中要用到的数据 ...
VUE前置基础 day01
m0_72962890的博客
11-25 2265
vue前置基础学习
Vue_day01
Funny_Chou的博客
10-31 159
Vue_day01
Vue基础-day01
m0_65505088的博客
02-22 124
Vue是什么？是一个渐进式的Javascript框架。 vue的特点：渐进式，声明式渲染，数据驱动视图 (响应式)，极少的去写DOM操作相关代码，双向绑定，组件系统，不兼容IE8及以下浏览器。 Vue-cli作用？@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目，脚手架是为了保证各施工过程顺利进行而搭设的工作平台。 @vue/cli的好处：开箱即用，0配置webpack，babel支持，css, less支持，开发服务器支持。 库: 封装的属性或方法 (.
Vue基础-Day 01
web_nbsp的博客
09-20 202
vue基础
VUE前台项目day_01
m0_61235042的博客
01-10 171
VUE电商项目第一天知识点
vue基础01day
weixin_50430856的博客
10-12 448
vue 一，什么是vue vue是第三方开发的，渐进式的，基于MVVM设计模式的纯前端的js框架 第三方：别人写好的，我们直接下好即可 渐进式：可以逐步在项目中引入vue各项功能，同时可以与其他技术混用，但是不推荐（只要不是使用框架，一律使用es5，不能出现es6；我们使用框架的时候就使用es6） mvvm 设计模式： 1，传统前端三大部分：html/css/JavaScript 问题：html/css功能都太弱了，对于页面中发生的一切变化都需要JavaScript来编写，导致了需要JavaScript编写
Vue基础day01
阿卡内的博客
04-05 594
Vue基础day01
Day_01 Vue基础
lbw18的博客
03-04 366
文章目录1-Vue指令介绍(掌握)2-Vue文本操作(掌握)3-Vue的事件处理(掌握)4-Vue事件修饰符(掌握)5-Vue双向绑定(掌握) 1-Vue指令介绍(掌握) 概述 是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。 使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。 常用指令 2-Vue文本操作(掌握) 概述 使用v-html、v-text指令，将Vue变量插入到标签内容中。 代码实现 <!DOCTY
day01_Vue01-基础语法3.ppt
01-15
vue 基础知识点
Day02_vue脚手架_基础API(1).pdf
最新发布
05-03
在学习Vue之前，掌握一些基础的JavaScript知识是必要的。如描述中所列，你需要了解表达式、变量、`new`操作符的用途、实例化对象、对象的属性和方法、赋值和取值、`this`的指向、以及模块化开发的概念。例如，变量是...
vue-component_day04_04_交互添加.zip
03-13
在"vue-component_day04_04_交互添加.zip"这个资源中，我们可以推测这是关于Vue组件交互性增强的一个教程，特别是针对第四天课程的第四个主题。在这个阶段，你可能将学习如何在Vue应用中添加用户交互功能，如事件...
前端开发Vue基础篇：Day01 初识Vue.pdf
11-08
Vue.js是当前前端开发领域中非常流行的一个JavaScript框架，它主要用来构建用户界面，属于渐进式框架。渐进式框架的意思是，开发者可以将Vue作为应用的一部分，逐步地添加到现有的项目中，而无需一开始就将所有代码...
vue-基础-day01.md
01-10
vue-基础-day01.md
Shiro_项目_权限判断&菜单配置
Java_pipixia的博客
08-09 2283
文章目录1 权限判断1.1 获取到所有的权限进行判断1.2 重写权限拦截器1.3 applicationContext-shiro.xml配置自定义拦截器1.4 MyRealm 进行权限判断2 菜单操作2.1 设计domain层2.1.1 配置menu类2.1.2 配置Permission类2.2 完成菜单显示功能2.2.1 MenuRepository类2.2.2 MenuServiceImpl...
java_项目_EasyPoi导入与导出
Java_pipixia的博客
08-11 2061
文章目录1 Java操作Excel1.1 概念1.2 JXL与POI优缺点1.3 引入poi需要的jar包1.4 创建Excel(完成99乘法表)1.5 java读取Excel2 EasyPoi使用2.1 引入easypoi的jar包2.2 基本导出2. 3员工页面 Employee.jsp 加上导出按钮2.4 EmployeeController添加方法3 EasyPoi导入功能3.1 Impo...
RabbitMq
Java_pipixia的博客
10-09 1654
文章目录1.RabbitMQ概念1.1.基本概念1.2.RabbitMQ使用场景1.3.常见的消息队列2.RabbitMQ的原理2.1.原理图2.2.执行流程3.安装RabbitMQ3.1.安装erlang语音3.2.配置erlang的环境变量3.3.安装RabbitMQ3.4.安装RabbitMQ的可视化插件3.5.访问测试4.Rabbit的使用-helloworld4.1.helloworld...
SpringBoot
Java_pipixia的博客
09-14 1572
文章目录1 SpringBoot介绍1.1 SpringBoot基本概念1.2 回顾Spring的IOC,DI,AOP2 Spring的注解配置2.1 Anno配置IOC2.1.1 创建Spring的配置类2.1.2 在配置类中定义Bean2.1.3 测试2.2 ComponentScan&ComponentScans自动扫描2.2.1 准备MyBean帖@Component2.2.2 创...
Vue基础教程：Day02 模板语法与v-for的key属性解析
在Day02的Vue基础知识中，主要涉及了几个核心的指令，它们在构建动态内容时非常关键： 1. **v-html** - 这个指令用于将HTML字符串插入到DOM元素内。例如，在示例中，`v-html="htmlTxt"`将`htmlTxt`的数据（包含HTML...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值