1.vue简介

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

2.创建一个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>
<script>
    window.onload = function() {
            //创建一个vue对象
        new Vue(
        {

            el:"#text",//绑定vue的作用范围
            data: {
                //定义界面中显示的模型数据
                message: "hollow word"
            }
        }
    )
    }
  
</script>
<body>
    <div id="text">
        <!--{{}}插值表达式，绑定vue中的data数据-->
         {{message}}
    </div>
    <script src="vue.min.js"></script>

</body>
</html>

3.基础指令的使用

3.1 v-bind指令的使用

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

<script src="vue.min.js"></script>
<script>
    window.onload=function(){
        new Vue({
            el:"#one",
            data:{
                message:"数据绑定" ,
                tip:"这里是温馨提示"
            }
        })
    }
</script>
<body>
       <div id="one">
         <h1  v-bind:title="tip" >
             {{message}}
         </h1>
         <input type="text" :value="message" ></input>
         <p v-bind:title="tip" >你好吗？</p></p>
       </div>    
</body>
</html>

3.2 v-model的使用

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定

<script src="vue.min.js"></script>
<script>
    window,onload=function()
    {
        new Vue({
            el:"#ap",
            data:{
                message:"双向数据绑定"
            }
            
        })
    }
</script>
<body>
  <div id="ap">
       <input type="text" v-bind:value="message"></input>
       <br>
       <input type="text" v-model:value="message"></input>
       {{message}}
  </div>    
</body>

3.3点击事件

点击按钮触发相应的事件用v-on-click或者@click进行触发

<script src="vue.min.js"></script>
<script>
    window.onload=function(){
        new Vue({
            el:"#app",
            data:{
                message:"点我呀",
                index:{
                    i: 0,
                    j: 0
                }
            },
            methods:{
                f(){
                    console.log(this.index.i)
                    this.index.i++
                },
                ff(){
                    alert("你点我干嘛")
                    console.log(this.index.j)
                    this.index.j++
                }
            }
        })
    }
</script>
<body>
            <div id="app">
                <button v-on:click="f()">点我一下</button>
                <button @click="ff">你点我一下试试</button>
            </div>
</body>

3.4条件渲染

v-if 和 v-show

<script src="vue.min.js"></script>
<script>
    window.onload=function()
    {
        new Vue({
            el:"#app",
            data:{
                ok:true
            }
        })
    }
</script>
<body>
        <div id="app">
            <input type="checkbox" v-model="ok" v-checked="ok">是否购买</input>//单个复选框绑定到指令集
            <p v-if="ok">是</p>
            <p v-else="ok">否</p>
            <p v-show="ok">是</p>
        </div>        
</body>

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

3.5列表渲染

v-for：列表循环指令

<script src="vue.min.js"></script>
<script >
    window.onload=function()
    {
        new Vue({
            el:"#app",
            data:{
                user:[
                    {username:"张三",age:18},
                    {username:"李四",age:11},
                    {username:"王五",age:15},
                    {username:"邓六",age:34},
                    {username:"胡七",age:46},
                    {username:"陈八",age:14}  

                ]
            }
        })
    }
</script>
<body>
    <div id="app">
        <p v-for="n in 10">{{n}}</p>
        <p v-for="(n,index) in 10">{{n}}---{{index}}</p>
        <table >
            <tr v-for="u in user">
                <td>{{u.username}}</td>
                <td>{{u.age}}</td>
            </tr>
        </table>
    </div>
</body>

3.6组件

组件分为局部组件和外部组件（一般用来当做标签使用）
外部组件一遍写在js中

Vue.component('navvc',
   {
       template :"<p>how are you?</p></p>"
   }
)

<script src="vue.min.js"></script>
<script src="text.js"></script>
<script >
    window.onload=function()
    {
        new Vue({
            el:"#app",
            components:{
                'nac':{
                    template:"<ul><li>苹果</li><li>梨</li></ul>"
                }
            }
        })
    }
</script>
<body>
    <div id="app">
        <nac></nac>
        <navvc></navvc>
    </div>

</body>

3.7路由

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

 <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>
    <script >
        window.onload=function()
        {
            // 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>
</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>
</body>