Vue

快速使用

第一步

引入vue.js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BdShsdmF-1611054368487)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20210119154633394.png)]

第二步

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

第三步

<script>
    // 创建一个vue对象
    new Vue({
        el: '#app',//绑定vue作用的范围
        data: {//定义页面中显示的模型数据
            message: 'Hello Vue!'
        }
    })
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
          <!-- {{}} 插值表达式，绑定vue中的data数据 -->
          {{message}}
    </div>
    <script src="vue.min.js"></script>

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

v-bind单向绑定

<div id="app">
        <!-- v-bind指令
            单向数据绑定
            这个指令一般用在标签属性里面，获取值
        -->
        <h1 v-bind:title="message">
            {{content}}

        </h1>

        <!--简写方式,title属性鼠标长期放在上面会有标题出现-->
        <h2 :title="message">
                {{content}}
            </h2>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: '我是标题',
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        })
    </script>

v-model双向绑定

<input type="text" v-bind:value="searchMap.keyWord"/>
<!--双向绑定-->
<input type="text" v-model="searchMap.keyWord"/>

v-on事件操作

<div id="app">
    <!--vue绑定事件-->
    <button v-on:click="search()">查询</button>

    <!--vue绑定事件简写,后面的方法加不加括号都一样-->
    <button @click="search()">查询1</button>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            searchMap:{
                keyWord: '尚硅谷'
            },
            //查询结果
            result: {}
        },
        methods:{//定义多个方法
            search() {
                console.log('search....')
            },
            f1() {
                console.log('f1...')
            }
        }
    })
</script>

.prevent修饰符阻止默认行为

<div id="app">
    <form action="save" v-on:submit.prevent="onSubmit">
        <input type="text" id="name" v-model="user.username"/>
        <button type="submit">保存</button>
    </form>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            user:{}
        },
        methods:{
            onSubmit() {
                if (this.user.username) {
                    console.log('提交表单')
                } else {
                    alert('请输入用户名')
                }
            }
        }
    })
</script>

v-if条件判断(执行的时候才加载)

v-show条件判断(一开始就加载)

<div id="app">
    <input type="checkbox" v-model="ok"/>是否同意
    <!--条件指令 v-if  v-else -->
    <h1 v-if="ok">尚硅谷</h1>
    <h1 v-else>谷粒学院</h1>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            ok:false
        }
    })
</script>

v-for列表循环指令

<div id="app">
    <ul>
        <li v-for="n in 10"> {{n}} </li>
    </ul>
    <ol>
        <li v-for="(n,index) in 10">{{n}} -- {{index}}</li>
    </ol>

    <hr/>
    <table border="1">
        <tr v-for="user in userList">
            <td>{{user.id}}</td>
            <td>{{user.username}}</td>
            <td>{{user.age}}</td>
        </tr>
    </table>

</div>
<script src="vue.min.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>

全局组件

第一步

组件进行定义

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PfIRv5Zw-1611054368490)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20210119181350536.png)]

第二步

组件进行引入使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-paoX3OLi-1611054368491)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20210119181412018.png)]

vue的生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YI532XyW-1611054368494)(file:///D:/JAVA—SpringBoot%E5%88%86%E5%B8%83%E5%BC%8F%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/up%E7%AC%94%E8%AE%B0/day03/day03%E7%AC%94%E8%AE%B0/day03%E9%A1%B9%E7%9B%AE%E3%80%90%E9%A1%B9%E7%9B%AE%E5%89%8D%E7%AB%AF%E7%9B%B8%E5%85%B3%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%B8%80%E3%80%91/index_files/0.9177152660737906.png)]

<div id="app">
       hello

</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
        },
        created() {
            debugger
            //在页面渲染之前执行
            console.log('created....')
        },
        mounted() {
            debugger
            //在页面渲染之后执行
            console.log('mounted....')
        }
    })
</script>

vue路由（必须要先引入vue再引入router）

第一步

引入，和引入vue一样（必须要先引入vue再引入router）

第二步

<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
<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.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>

axios

结构固定

箭头函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VhMg0XyJ-1611054368498)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20210119185928501.png)]

<div id="app">
    <!--把userList数组里面数据显示 使用v-for指令 -->
    <div v-for="user in userList">
        {{user.name}} -- {{user.age}}
    </div>
</div>
<script src="vue.min.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 =>{//请求成功执行then方法
                        //response就是请求之后返回数据
                        //console.log(response)
                        //通过response获取具体数据，赋值给定义空数组
                        this.userList = response.data.data.items
                        console.log(this.userList)
                    }) 
                    .catch(error =>{
                    }) //请求失败执行catch方法
            }
        }
    })
</script>