IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放器↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: 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 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/29 19:07:52-

图片自动播放器
↓图片自动播放器↓ 		TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计