一 . 基本概念

1.1 Vue.js是什么？

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

二. 基本命令使用

vue基本结构

<!-- id标识vue作用的范围 -->
<div id="app">
    <!-- {{}} 插值表达式，绑定vue中的data数据 -->
    {{ message }}
</div>
<script src="vue.min.js"></script>
<script>
    // 创建一个vue对象
    new Vue({
        el: '#app',//绑定vue作用的范围
        data: {//定义页面中显示的模型数据
            message: 'Hello Vue!'
        },
        created() {
        
        },  //页面创建时调用
        methods:{
        }  //页面定义的方法
    })
</script>

2.1 单向绑定与数据渲染

v-bind （简写为 “：”）与插值表达式

单向数据绑定，可以绑定vue模型中的数据到Html中
插值表达式{{}} 使用模板数据用于显示文本数据


<body>
    <div id="app">
            <h2 v-bind:title="message">   //此时title显示的是模型中的数据
                {{content}}    //插值表达式，显示的是模型中的content中的数据
            </h2>
<!--        v-bind简写方式 -->
            <h1 :title="message">  
                {{content}}
            </h1>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: "页面标题",
                message: "页面加载于"+new Date().toLocaleString()
            }
        })
    </script>
</body>

2.2 双向数据绑定 v-model

常用于input输入框中，获取用户的输入从而赋值给模型数据进行传递

    <div id="app">
        <input :value="name"/>  //单向绑定
        <input v-model:value="name"/>  //双向绑定
        {{name}}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                name: "吕建友"
            }
        })
    </script>

2.3 事件 v-on(简写为“@”)

事件调用的方法定义在 vue 对象声明的 methods 节点中

    <div id="app">
        <button v-on:click="eat()">提交</button>
        <button @click="eat()">提交2</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                name: "吕建友"
            },
            methods:{
                eat(){
                    console.log("吃东西......");
                }
            }
        })
    </script>

2.4 条件渲染

2.4.1 条件指令：v-if

要进行多个判断直接使用多个v-if即可，一个v-else匹配一个v-if

    <div id="app">
        <input type="checkbox" v-model="ok"/>是否同意
        <h2 v-if="ok">同意了</h2>
        <h2 v-else>不同意</h2>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok: false
            }
        })
    </script>

2.4.2 条件指令： v-for

    <div id="app">
        <table>
         <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
         <!-- 遍历数据时，为了避免重复，往往需要设置一个:key来防止重复-->
            <tr v-for="(user,index) in userList" :key = "index">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>

        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                    {
                        id:1,
                        username:"李宁",
                        age:99
                    },
                    {
                        id:2,
                        username:"耐克",
                        age:15
                    },
                    {
                        id:3,
                        username:"H&M",
                        age:02
                    }
                ]
            }
        })
    </script>

3.vue生命周期

最常见的三个周期我们要了解到

created：在页面渲染之前执行
mounted: 在页面渲染之后执行
destroyes: 页面销毁后执行

生命周期.png

//===创建时的四个事件
beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行
    console.log(this.message) //undefined
    this.show() //TypeError: this.show is not a function
    // beforeCreate执行时，data 和 methods 中的 数据都还没有没初始化
},
created() { // 第二个被执行的钩子方法
    console.log(this.message) //床前明月光
    this.show() //执行show方法
    // created执行时，data 和 methods 都已经被初始化好了！
    // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount() { // 第三个被执行的钩子方法
    console.log(document.getElementById('h3').innerText) //{{ message }}
    // beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
},
mounted() { // 第四个被执行的钩子方法
    console.log(document.getElementById('h3').innerText) //床前明月光
    // 内存中的模板已经渲染到页面，用户已经可以看见内容
},

4. vue路由

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

4.1 引入js

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

4.2 编写页面

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

5. axios

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端

在浏览器中可以帮助我们完成 ajax请求的发送
在node.js中可以向远程接口发送请求

5.1 导入数据

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>

5.2 开启调用

  methods: {
        getList(id) {
            //vm = this
            axios.get('http://localhost:8081/admin/ucenter/member')
            .then(response => {
                console.log(response)
                this.memberList = response.data.data.items
            })
            .catch(error => {
                console.log(error)
            })
        }
    }

Vue入门学习