[JavaScript知识库] vue基础操作

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue基础操作 -> 正文阅读

[JavaScript知识库]vue基础操作

单向数据绑定v-bind

<!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.0">
    <title>Document</title>
</head>

<body>
    <!-- 引入Js文件 -->
    <script src="vue.min.js"></script>

    <!-- 创建div标签，加上id的属性 -->
    <div id="app">
        <!-- 插值表达式 -->
        {{message}}
        <!-- 单向数据绑定 一般用于标签属性 -->
        <h1 v-bind:title="message">
            {{content}}
        </h1>
    </div>

    <script>
        // 创建一个vue对象
        new Vue({
            el: '#app',// 绑定作用范围
            data: { // 定义页面中显示的模型数据
                content: '我是标题',
                message: '页面加载于' + new Date().toLocaleString()
            }
        })
    </script>

</body>

</html>

vue事件操作

<!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.0">
    <title>Document</title>
</head>

<body>


    <!-- 引入Js文件 -->
    <script src="vue.min.js"></script>

    <!-- 创建div标签，加上id的属性 -->
    <div id="app">
        <!-- 绑定事件 -->
        <button v-on:click="search()">查询1</button>
        <button @click="search()">查询2</button>
    </div>

    <script>
        // 创建一个vue对象
        new Vue({
            el: '#app',// 绑定作用范围
            data: { // 定义页面中显示的模型数据
                searchMap: {
                    keyword: 'shang gui'
                },
                result: {

                }
            },
            methods: {
                search() {// 定义一个方法
                    console.log('search...')
                }
            }
        })
    </script>

</body>

</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.0">
    <title>Document</title>
</head>

<body>



    <!-- 创建div标签，加上id的属性 -->
    <div id="app">
        <input type="checkbox" v-model="ok" />是否同意
        <h1 v-if="ok">this is v-if</h1>
        <h1 v-else>this is v-else</h1>
    </div>

    <!-- 引入Js文件 -->
    <script src="vue.min.js"></script>

    <script>
        // 创建一个vue对象
        new Vue({
            el: '#app',// 绑定作用范围
            data: { // 定义页面中显示的模型数据
                ok: true
            }
        })
    </script>

</body>

</html>

v-for

<!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.0">
    <title>Document</title>
</head>

<body>

    <!-- 创建div标签，加上id的属性 -->
    <div id="app">
        <ul>
            <li v-for="n in 10">
                {{n + 100}}
            </li>
        </ul>
        <hr />

        <table>
            <tr v-for="user in users">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
            </tr>
        </table>

    </div>

    <!-- 引入Js文件 -->
    <script src="vue.min.js"></script>

    <script>
        // 创建一个vue对象
        new Vue({
            el: '#app',// 绑定作用范围
            data: {
                users: [ // 定义页面中显示的模型数据
                    { id: 1, name: 'zs' },
                    { id: 2, name: 'zs2' },
                    { id: 3, name: 'z3' },
                    { id: 4, name: 'zs4' },
                    { id: 5, name: 'zs5' }
                ]
            }
        })
    </script>

</body>

</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.0">
    <title>Document</title>
</head>

<body>

    <!-- 创建div标签，加上id的属性 -->
    <div id="app">
        <Navbar></Navbar>
    </div>

    <!-- 引入Js文件 -->
    <script src="vue.min.js"></script>

    <script>
        // 创建一个vue对象
        new Vue({
            el: '#app',// 绑定作用范围
            components: {
                'Navbar': {
                    // 组件的内容
                    template: '<ul><li>首页</li><li>学员管理</li></ul>'
                }
            }
        })
    </script>


</body>

</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.0">
    <title>Document</title>
</head>

<body>
    <!-- 创建div标签，加上id的属性 -->

    <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>

    <!-- 引入Js文件 -->
    <script src="vue.min.js"></script>
    <script src="vue-router.min.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
        })
        // 4. 创建和挂载根实例。
        // 从而让整个应用都有路由功能
        const app = new Vue({
            el: '#app',
            router
        })
            // 现在，应用已经启动了！
    </script>

</body>

</html>

axios

<!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.0">
    <title>Document</title>
</head>

<body>



    <!-- 引入Js文件 -->
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>

    <!-- 创建div标签，加上id的属性 -->
    <div id="app">
        <!-- 将数组中的值进行显示 -->
        <table border="1">
            <tr v-for="item in teachers">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.intro}}</td>
                <td>{{item.career}}</td>
                <td>{{item.level}}</td>
                <!-- <td>{{item.avatar}}</td> -->
                <td>{{item.sort}}</td>
                <td>{{item.isDeleted}}</td>
                <td>{{item.gmtCreate}}</td>
                <td>{{item.gmtModified}}</td>
            </tr>
        </table>

    </div>

    <script>
        // 创建一个vue对象
        new Vue({
            el: '#app',// 绑定作用范围
            data: { // 定义变量和初始值
                teachers: []
            },
            created() {// 调用定义的方法，在页面渲染之前执行
                this.getTeachers()
            },
            methods: { // 编写具体的方法
                getTeachers() {
                    // 发送ajax请求
                    // axios.提交方式（“请求的接口路径”）
                    axios.get("data.json")
                        .then(response => {
                            // response就是返回之后的数据
                            // console.log(response)
                            // 赋值给空的数组
                            this.teachers = response.data.data.items
                            console.log(this.teachers)
                        })//请求成功会执行then方法
                        .catch(error => {

                        })// 请求失败会执行catch方法
                }

            }
        })
    </script>

</body>

</html>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-10-22 10:51:58 更:2021-10-22 10:52:30

360图书馆购物三丰科技阅读网日历万年历 2024年5日历

-2024/5/13 1:25:21-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码