前端 - 学习(一)

目录

JS 对象 - JSON

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //自定义JS对象
    var user = {
        name: "Tom",
        age: 18,
        eat: function () {
            alert("肉肉!!!!")
        }
    }
    user.eat();
    alert(user.name);


    //定义JSON 对象
    var jsonData = '{"name":"lisi","age":18,"addr":["北京","上海"]}'

    //JSON 字符串 => JSON对象
    var jsonObj = JSON.parse(jsonData)
    alert(jsonObj.name);

    //JSON对象 => JSON文本
    var jsonData2 = JSON.stringify(jsonObj);
    alert(jsonData2);
</script>
</body>
</html>

JSON定义：

value的取值类型：

Vue 入门

介绍：

基于Vue2，最新版本是vue3，下载vue.js 引入项目，下载地址：

https://v2.vuejs.org/v2/guide/installation.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}   //差值表达式，内容可以是变量、三元运算符、函数调用、算术运算
    </div>
</body>
<script>
    //定义Vue 对象
    new Vue({
        el: "#app",  //Vue 管辖区
        data: {
            message: "Hello Vue!"
        }
    })
</script>
</html>

效果：

Vue指令

常用属性：

v-bind & v-model

使用 IDEA 报错 Namespace 'v-bind' is not bound
依次打开 File-->Preferences for New Projects--> Editor--> Inspections-->XML-->Unbound XML namespace prefix(取消勾选这个选项即可)

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href = "url">连接1 </a>
        <a :href = "url">连接2</a>  <!-- v-bind:href的简写形式 -->

        <input type ="text" v-model="url">
    </div>
</body>
<script>
    //定义Vue 对象
    new Vue({
        el: "#app",  //Vue 管辖区
        data:{
            url:"https://www.baidu.com"
        }
    })
</script>
</html>

v-on

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-on:click="handler()" value="点击我">
        
        <input type="text" @click="handler()" value="点击我啊"> <!--v-on:click 简写形式-->
    </div>
</body>
<script>
    //定义Vue 对象
    new Vue({
        el: "#app",  //Vue 管辖区
        data:{

        },
        methods:{
            handler:function(){
                alert("我被点击了");
            }
        }
    })
</script>
</html>

逻辑判断指令

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        年龄<input type="text" v-model="age"> 经判定为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age <60">中年人(35-60)</span>
        <span v-else="age > 60">老年人(60岁以上)</span>
        <br/>
        年龄<input type="text" v-model="age"> 经判定为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age <60">中年人(35-60)</span>
        <span v-show="age > 60">老年人(60岁以上)</span>
    </div>
</body>
<script>
    //定义Vue 对象
    new Vue({
        el: "#app",  //Vue 管辖区
        data:{
            age:18
        }
    })
</script>
</html>

循环 v-for

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <div v-for="(addr,index) in addrs">{{index}} : {{addr}}</div>

    </div>
</body>
<script>
    //定义Vue 对象
    new Vue({
        el: "#app",  //Vue 管辖区
        data:{
            addrs: ['北京','深圳','广州','上海','佛山']
        }
    })
</script>
</html>

案例

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <table border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr 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 v-else="user.score < 60">不及格</span>
                </td>
            </tr>
        </table>

    </div>
</body>
<script>
    //定义Vue 对象
    new Vue({
        el: "#app",  //Vue 管辖区
        data:{
            users:[{
                name:'Tom',
                age:20,
                gender:1,
                score:78
            },{
                name:'Rose',
                age:18,
                gender:2,
                score:86
            },{
                name:'Jerry',
                age:26,
                gender:1,
                score:90
            },{
                name:'Tony',
                age:30,
                gender:1,
                score:52
            }]
        }
    })
</script>
</html>

遇到报错：
[Vue warn]: Failed to resolve directive: esle

v-else 写成： v-esle

Vue 的生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue 对象
    new Vue({
        el: "#app",  //Vue 管辖区
        mounted(){
            alert("Vue 挂载完毕，发送请求获取数据") //打开浏览器后会自动弹出数据
        }
    })
</script>
</html>

原生Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <input type="button" value="点我加载数据" onclick="getData()">
    <div id="div1">
    </div>
</body>
<script>
    function getData(){
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://yapi.smart-xwork.cn/mock/169327/emp/list");
        xhttp.send();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("div1").innerHTML = this.responseText;
            }
        }
    }
</script>
</html>

axios

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Github开源地址： https://github.com/axios/axios

js 文件下载

发送GET&POST 请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/axios.min.js"></script>
</head>
<body>
</body>
<script>
    //利用axios 发送 get 异步请求
    axios.get('http://yapi.smart-xwork.cn/mock/169327/emp/list').then(result => {
        console.log(result.data)
    })

    // 利用axios 发送post 请求
    axios.post('http://yapi.smart-xwork.cn/mock/169327/emp/deleteById','id=1').then(request => {
        console.log(request.data)
    })
</script>
</html>

案例

效果：

code：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">

    <table border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>图像</th>
            <th>性别</th>
            <th>职位</th>
            <th>入职日期</th>
            <th>最后操作时间</th>
        </tr>

        <tr v-for = "(item,index) in emps">
            <td>{{index + 1}}</td>
            <td>{{item.name}}</td>
            <td>
                <img :src="item.image" width="70px" height="50px">
            </td>
            <td>
                <span v-if = "item.gender == 1">男</span>
                <span v-if = "item.gender == 2">女</span>
            </td>
            <td>{{item.job}}</td>
            <td>{{item.entrydate}}</td>
            <td>{{item.updatetime}}</td>
        </tr>
    </table>

</div>
</body>
<script>
    //定义Vue 对象
    new Vue({
        el: "#app",  //Vue 管辖区
        data: {
            emps:[]
        },
        mounted(){
          axios.get('http://yapi.smart-xwork.cn/mock/169327/emp/list').then(result => {
              this.emps = result.data.data
          })
        }
    })
</script>
</html>

前端工程化

环境准备：

node.js 安装及介绍可参考：https://www.cnblogs.com/czzz/p/15782060.html

安装vue-cli:

npm install -g @vue/cli

vue 工程化入门

  1. 通过命令行的方法创建vue 项目

  1. vs code 中打开项目

调处nmp脚本：

3.启动项目

启动项目成功：

修改项目端口号：

posted @ 2023-04-06 22:37  chuangzhou  阅读(18)  评论(0)  编辑  收藏  举报