javawebweb前端开发

 

web 

全球广域网,也叫万维网(www world wide web),能够通过浏览器访问的网站

前端响应框架,后端响应数据,前端给后端的地址

web前端开发

www制定网页标准

html:结构

css:样式表现

script:动作行为

html,css

html(hypertext markup language):超文本标记语言(可以引入文件视频音频)

xml:可扩展的标记性语言

不区分大小写

可以用单引号和双引号属性

语法松散


shift+!出结构

img

 id不能重复

超链接

controls="controls"

br换行

页面布局盒子模型

通过margin居中

上下0,左右自动

表格边框

表单标签

label聚焦

button长方形单选,radio圆形单选

JS

脚本语言:直接用浏览器打开 

css放body里面,js放后面

var可以重复定义

数据类型

函数

对象

 

JSON

必须使用双引号

BOM(浏览器对象模型)

 

DOM文档对象模型

 设置新的值

字体设置为红色

事件监听

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <title>JS事件监听</title>

</head>

<body>


 

    <img id="light" src="../快速入门/img/off.gif">

    <br>

    <br>

    <input type="button" value="点亮" οnclick="on()">

    <input type="button" value="熄灭" οnclick="off()">

    <br>

    <br>

    <input type="text" id="name" value="ITCAST" οnfοcus="lower()" οnblur="upper()"></input>

    <br>

    <input type="checkbox" name="hobby"> 电影</input>

    <input type="checkbox" name="hobby"> 旅游</input>

    <input type="checkbox" name="hobby"> 游戏</input>

    <br>

    <input type="button" value="全选" οnclick="checkAll()">

    <input type="button" value="反选" οnclick="reverse()">

</body>

<script>

    function on() {

        /* 1.获取img元素对象 */

        var img = document.getElementById('light');

        img.src = "../快速入门/img/on.gif";

    }

    function off() {

        document.getElementById('light').src = "../快速入门/img/off.gif";

    }


 

    function lower() {

        //1.获取输入框元素对象

        var input = document.getElementById('name');

        input.value = input.value.toLowerCase();

    }

    function upper() {

        var input = document.getElementById('name');

        input.value = input.value.toUpperCase();

    }

    function checkAll() {

        var hobbys = document.getElementsByName('hobby');

        for (let i = 0; i < hobbys.length; i++) {

            const element = hobbys[i];

            element.checked = true;

        }

    }


 

    function reverse() {

        var hobbys = document.getElementsByName('hobby');

        for (let i = 0; i < hobbys.length; i++) {

            const element = hobbys[i];

            element.checked = false;

        }

    }

</script>


 

</html>

VUE

#ID选择器

 

 

要使用指令必须要在div中使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

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

</head>

<body>

    <div id="app">

        <!-- border边框宽度 -->

        <table border="1" cellspacing="0" width="60%">

            <tr>

                <th>编号</th>

                <th>姓名</th>

                <th>年龄</th>

                <th>性别</th>

                <th>成绩</th>

                <th>等级</th>

            </tr>

            <tr align="center" v-for="(user,index) in users">

                <td>{{index+1}}</td>

                <td>{{user.name}}</td>

                <td>{{user.age}}</td>

                <td>

                    <span v-if="user.gender==1">男</span>

                    <span v-if="user.gender==2">女</span>

                </td>

                <td>{{user.score}}</td>

                <td>

                    <span v-if="user.score>=85">优秀</span>

                    <span v-else-if="user.score>=60">及格</span>

                    <span style="color: red;" v-else>不及格</span>

                </td>

            </tr>

        </table>

    </div>

</body>

<script>

    new Vue({

        el: "#app",

        data: {

            users: [

                {

                    name: "Tom",

                    age: 20,

                    gender: 1,

                    score: 78

                }, {

                    name: "Rose",

                    age: 18,

                    gender: 2,

                    score: 86

                }, {

                    name: "Rose2",

                    age: 18,

                    gender: 2,

                    score: 50

                }, {

                    name: "Rose3",

                    age: 18,

                    gender: 1,

                    score: 86

                }

            ]

        }, methods: {

        },

    })

</script>

</html>

生命周期

AJAX异步交互技术

xml标记语言用来存储数据的

axious

Vue.js主要用于构建前端应用程序的用户界面和逻辑,而Axios主要用于处理HTTP请求,从而与后端服务器通信。

写在mounted里面

YAPI

脚手架

nodejs相当于java的jdk

淘宝镜像:加速下载

 vue项目简介

Element

vue路由