Vue学习入门

jie~TestPeo

已于 2024-07-03 15:56:08 修改

阅读量580

点赞数 15

分类专栏： javaWeb 文章标签： vue.js 学习前端

于 2024-07-03 11:46:05 首次发布

本文链接：https://blog.csdn.net/m0_61801450/article/details/140147243

版权

javaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

介绍

新手程序员一枚，渴望成为大神，来点关注来点赞，给我介绍几个大神也行，球球了。

主要记录自己的学习过程，将之前的笔记进行整理并分享一下，有错误请指出，谢谢各位大佬爷们的观看。

下面开始分享我的笔记

VSCode插件

Auto Close Tag
Auto Rename Tag
Chinese (Simplified) (简体中文) Language
Code Runner
Code Spell Checker
HTML CSS Support
IntelliJ IDEA Keybindings
JavaScript (ES6) code snippets
Live Server
Mithril Emmet
open in browser
Path Intellisense
Vetur
Vue
Vue 3 Snippets
VueHelper

HTML模板

创建文件模板

<!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">       
        <title>%%</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        
    </body>
</html>

Vue指令

知识点

{{}}：插值表达式内容为：变量、三元运算符、函数调用、算术运算
v-model：在表单元素上创建双向绑定。
v-bind：为HTML标签绑定属性值、如href、css样式等。
v-on：为HTML标签绑定事件。
v-if、v-else-if、v-else：条件渲染某元素。
v-show：条件展示某元素、切换display的值为none。
v-for：列表渲染，遍历容器的元素对象的属性。

案例

1.One

div样式

<div id="app">
    <!-- v-bind -->
    <a v-bind:href="url">链接</a>
    <a :href="url">另一个链接</a>
    <!-- v-model -->
    <input type="text" v-model="massage">
    <!-- {{}}操作符 -->
    {{massage}}
    <!-- v-on -->
    <input type="button" value="按钮" v-on:click="handle()">
    <input type="button" value="另一个按钮" @click="handle()">
</div>

js代码

 <script>
    //Vue对象
    new Vue({
        el:"#app",//Vue接管区域
        data:{
            massage:"hello world",
            url:"https://www.baidu.com"
        },
        methods: {
            handle:function(){
                alert("点击了一次");
            }
        }
    })        
</script>

效果

2.Two

div样式

<div id="appt">

    <!-- v-if等展示 -->
    
    年龄<input type="text" v-model="age">判定为：
    <span v-if="age >= 0 && age <= 35">年轻人(35以下)</span>
    <span v-else-if="age > 35 && age <= 60">中年人(35-60)</span>
    <span v-else-if="age > 60 && age <= 200">老年人(60以上)</span>
    <span v-else>年龄无效(200以上,0以下)</span>
    <br><br>
    
    <!-- v-show 展示 -->
    年龄<input type="text" v-model="age">判定为：
    <span v-show="age >=0 && age<=35">年轻人(35以下)</span>
    <span v-show="age > 35 && age <= 60">中年人(35-60)</span>
    <span v-show="age > 60 && age <= 200">老年人(60以上)</span>
    <span v-show="age > 200 || age < 0">年龄无效(200以上,0以下)</span>

</div>

js

<script>
    //另一个Vue对象
    new Vue({
        el:"#appt",
        data:{
            age:20
        },
        methods:{

        }

    })
</script>

效果

3.案例

div样式

<div id="appr">
    <div v-for="(city, index) in addr">{{index+1}} : {{city}}</div>
</div>

js

<script>
    //Vue对象
    new Vue({
        el:"#appr",
        data:{
            addr:["北京","上海","杭州","南京","香港","深圳"]
        },
        methods:{
            
        }
    })
</script>

效果

综合案例

描述

综合之前指令，填充表格

div样式

<div id="app">
            <div style="margin-bottom: 10px">成绩表</div>
            <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-show="user.score >= 90">优秀</span>
                        <span v-show="user.score >= 60 && user.score < 90">及格</span>
                        <span style="color: red;" v-show="user.score < 60">不及格</span>
                    </td>
                </tr>
            </table>
        </div>

js

<script>
            //Vue对象
            new Vue({
                el:"#app",
                data:{
                    users:[
                        {
                            name:"Tom",
                            age:20,
                            gender:1,
                            score:78
                        },{
                            name:"Rose",
                            age:21,
                            gender:2,
                            score:88
                        },{
                            name:"Jay",
                            age:23,
                            gender:1,
                            score:98
                        },{
                            name:"Bob",
                            age:22,
                            gender:1,
                            score:48
                        },{
                            name:"Tony",
                            age:36,
                            gender:1,
                            score:83
                        },{
                            name:"amy",
                            age:28,
                            gender:2,
                            score:97
                        }
                    ]

                },
                methods: {
                    
                }
            })
        </script>

效果

Vue生命周期

每触发一个生命周期事件，自动执行一个生命周期方法。

流程图

知识点

自动调用生命周期的方法mounted()等方法。
主要用于向服务端发送数据。

案例

js

<script>
            //Vue 对象
            //自动调用生命周期的方法mounted()
            //主要用于向服务端发送数据。
            new Vue({
                el:"#app",
                data:{

                },
                methods: {
                    
                },
                mounted() {
                    console.log("Vue 挂载完成，发送请求到服务端")
                },
            })
        </script>

效果

Ajax

数据交换：通过Ajax可以向服务器发送请求，并获取服务器响应的数据
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页。例如搜索的联想功能，用户名是否可用。

Axios

简化Ajax

// Axios 别名
// axios.get(url,[,config])
// axios.delete(url,[,config])
// axios.post(url,[.data[,config]])
// axios.put(url,[,data[,config]])

代码

<body>
        <input type="button" value="get" onclick="get()">
        <input type="button" value="post" onclick="post()">

        <script>
            
            // Axios 别名
            // axios.get(url,[,config])
            // axios.delete(url,[,config])
            // axios.post(url,[.data[,config]])
            // axios.put(url,[,data[,config]])

            function get(){
                //通过axios发送请求
                //then 为成功回调函数
                axios({
                    method:"get",
                    url:"http://www.baidu.com"//这个地址无效

                }).then(result=> {
                    console.log(result.data);
                })
                //改写
                axios.get("http://www.baidu.com").then(result=>{
                    console.log(result.data);
                })

            }
            function post(){
                axios({
                    method:"post",
                    url:"http://www.baidu.com",//这个地址无效
                    data:"id=1"
                }).then(result=> {
                    console.log(result.data);
                })

                //改写
                axios.post("http://www.baidu.com","id=1").then(result=>{
                    console.log(result.data);
                })

            }

        </script>
    </body>

Vue对象获取Axios取得的数据

<script>
            //Vue获取Axios请求的数据
            new Vue({
                el:"#app",
                data:{
                    emps:[]    //定义数据类型       通过mounted函数获取数据并存储到emp中         
                },
                methods: {
                    
                },
                mounted() {
                    //此处经行Axios请求
                    axios.get("url").then(result=>{
                        this.emps = result.data;
                    })

                },
            })  
        </script>

以上是学习的第一弹笔记。后面会慢慢更新笔记。

项目位置！！！！！

https://gitee.com/zsjnew/admin_web_project.git