【前端】Vue.js

最新推荐文章于 2024-05-06 18:46:17 发布

HoneyProMax

最新推荐文章于 2024-05-06 18:46:17 发布

阅读量133

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44559317/article/details/107744400

版权

Author: Honey
软件工程工科男
CSDN @Honey

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代
化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

初始Vue.js：

引入vue.js或vue.min.js文件
<div>标签
new Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="vue.js"></script>

    <div id="app">
        <!-- {{}}插值表达式，绑定vue中data数据-->
        {{ message }}
    </div>

    <script>
        //创建一个vue对象
        new Vue({
            el:'#app',
            data:{
                message:'Hello Vue!'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
vs code快速创建代码片段：
文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets

{
 "vue htm": {
 "scope": "html",
 "prefix": "vuehtml",
 "body": [
 "<!DOCTYPE html>",
 "<html lang=\"en\">",
 "",
 "<head>",
 " <meta charset=\"UTF-8\">",
 " <meta name=\"viewport\" content=\"width=device-width, initialscale=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"
 }
}

注意：代码片段中js文件要引用正确
使用快捷vuehtml可快速生成html文件
在这里插入图片描述

基本语法：

1.v-bind
v-bind 特性被称为指令。指令带有前缀 v除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）9

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initialscale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>
        <div id="app">
            <!--v-bind指令
                单向数据绑定
                这个指令一般指在标签属性里面，获取值
            -->
            <h1 v-bind:title="message">
                {{content}}
            </h1>
        </div>
        <script src="vue.js"></script>
        <script>
            new Vue({
            el: '#app',
            data: {
                content:'我是标题',
                message:'页面加载于' + new Date().toLocaleString()
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述
message:鼠标悬浮可显示

2.v-model 进行双向数据绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-bind:value只能进行单向的数据渲染 -->
        <input type="text" v-bind:value="searchMap.keyWord">
        <!-- v-model 可以进行双向的数据绑定 -->
        <input type="text" v-model="searchMap.keyWord">
        <p>您要查询的是：{{searchMap.keyWord}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: '尚硅谷'
                    }
            }
        })
    </script>
</body>

</html>

3.事件
使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的
方法 -->
        <button v-on:click="search()">查询</button>
        <!-- v-on 指令的简写形式 @ -->
        <button @click="search">查询1</button>
        <p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: '尚硅谷'
                    },
                    //查询结果
                    result:{}
            },
            methods:{
            search(){
                console.log('search')
                this.result = {
                    "title":"尚硅谷",
                    "site":"http://www.atguigu.com"
                    }
                }
            }
        })

    </script>
</body>

</html>

在这里插入图片描述

4.修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
说白了就是阻止该执行的，执行指定的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 修饰符用于指出一个指令应该以特殊方式绑定。
        这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的
        event.preventDefault()：
        即阻止表单提交的默认行为 -->
        <form action="save" v-on:submit.prevent="onSubmit">
            <label for="username">
            <input type="text" id="username" v-model="user.username">
            <button type="submit">保存</button>
            </label>
        </form>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user: {}
            },
            methods: {
                onSubmit() {
                if (this.user.username) {
                console.log('提交表单')
                } else {
                alert('请输入用户名')
                    }
                }
            }
        })

    </script>
</body>

</html>

框中无内容，弹窗请输入用户名；有内容，打印‘提交表单’

5、条件渲染
v-if/v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initialscale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>
        <div id="app">
            <input type="checkbox" v-model="ok">同意许可协议
            <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
            <h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
            <h1 v-else>no</h1>

            <!-- v:show 条件指令 初始渲染开销大 -->
            <!-- <h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
            <h1 v-show="!ok">no</h1> -->
        </div>
        <script src="vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    ok:false
                }
            })
        </script>
    </body>

</html>

在这里插入图片描述
6、列表渲染

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initialscale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>
        <div id="app">
            <!-- 1、简单的列表渲染 -->
            <ul>
                <li v-for="n in 10">{{ n }} </li>
            </ul>
            <ul>
            <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
            <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>

            <!-- 2、遍历数据列表 -->
            <table border="1">
                <!-- <tr v-for="item in userList"></tr> -->
                <tr v-for="(item, index) in userList">
                <td>{{index}}</td>
                <td>{{item.id}}</td>
                <td>{{item.username}}</td>
                <td>{{item.age}}</td>
                </tr>
            </table>
        </div>
        <script src="vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    userList: [
                                { id: 1, username: 'helen', age: 18 },
                                { id: 2, username: 'peter', age: 28 },
                                { id: 3, username: 'andy', age: 38 }
                            ]
                }
            })
        </script>
    </body>

</html>

在这里插入图片描述

组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码
局部组件：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initialscale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>
        <div id="app">
            <Navbar></Navbar>
        </div>
        <script src="vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                
                },
                //定义局部组件，可以定义多个局部组件
                components:{
                    //组建的名称
                    'Navbar':{
                        //组件的内容
                        template:'<ul><li>首页</li><li>学员管理</li></ul>'
                    }
                }
            })
        </script>
    </body>

</html>

在这里插入图片描述
全局组件：
创建Narbar.js文件

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
   })

引入js文件，调用组件

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initialscale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>
        <div id="app">
            <Navbar></Navbar>
        </div>
        <script src="vue.js"></script>
        <script src="components/Navbar.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                
                }
            })
        </script>
    </body>

</html>

在这里插入图片描述
vue生命周期:
created() 渲染之前执行
mounted() 渲染之后执行

路由：
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

引入js
两个js文件顺序不能交换

<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initialscale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>
        <div id="app">
            <h1>Hello App!</h1>
            <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/">首页</router-link>
            <router-link to="/student">会员管理</router-link>
            <router-link to="/teacher">讲师管理</router-link>
            </p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
        <script src="vue.js"></script>
        <script src="vue-router.js"></script>
        <script>
            // 1. 定义（路由）组件。
            // 可以从其他文件 import 进来
            const Welcome = { template: '<div>欢迎</div>' }
            const Student = { template: '<div>student list</div>' }
            const Teacher = { template: '<div>teacher list</div>' }
            // 2. 定义路由
            // 每个路由应该映射一个组件。
            const routes = [
            { path: '/', redirect: '/welcome' }, //设置默认指向的路径
            { path: '/welcome', component: Welcome },
            { path: '/student', component: Student },
            { path: '/teacher', component: Teacher }
            ]
            // 3. 创建 router 实例，然后传 `routes` 配置
            const router = new VueRouter({
            routes // （缩写）相当于 routes: routes
            })

            new Vue({
                el: '#app',
                router
            })
        </script>
    </body>

</html>

在这里插入图片描述

axios

在这里插入图片描述
axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端
在浏览器中可以帮助我们完成 ajax请求的发送
在node.js中可以向远程接口发送请求

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initialscale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>
        <div id="app">
            <table border="1">
                <tr>
                <td>姓名</td>
                <td>年龄</td>
                </tr>
                <tr v-for="item in userList">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                </td>
                </tr>
               </table>
        </div>
        <script src="vue.js"></script>
        <script src="axios.min.js"></script>
        <script>
            new Vue({
                el: '#app',
                //固定的结构
                data: {//在data中定义变量和初始值
                    //定义数据
                    userList:[]
                },
                created(){//页面渲染之前执行
                    //调用定义的方法
                    this.getUserList()
                },

                methods:{//编写具体的方法
                    //创建方法 查询所有用户数据
                    getUserList(){
                        //使用axios发送ajax请求
                        //axios.提交方法("请求接口路径").then(箭头函数).catch(箭头函数)
                        axios.get("data.json")
                        .then(response =>{
                            //response就是请求之后返回数据
                            //console.log('***' + response)
                            this.userList = response.data.data.items
                            console.log(this.userList)
                        })//请求成功执行then方法
                        .catch(error =>{

                        })//请求失败时调用
                    }
                }
            })
        </script>
    </body>

</html>

{
    "success":true,
    "code":20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"Honey","age":18},
            {"name":"Tom","age":18},
            {"name":"Jerry","age":18}
        ]
    }
}

HoneyProMax

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端】Vue.js

Author: Honey软件工程工科男CSDN @HoneyVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。初始Vue.js：引入vue.js或vue.min.js文件<div>标签new Vue<!DOCTYPE html><htm.
复制链接

扫一扫