vue入门

首先要引入Vue的js文件vue.js

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

示例

 <div id="app">
        <!-- ${}el表达式在Vue中是{{}}插值表达式 -->
        {{message}}
    </div>

<script>

    new Vue({
        el:'#app',//绑定Vue的作用域
        data:{
            message:'hello'
            }
    })
     
</script>

el:'#app'类似于$("#app")

---

数据渲染与指令

1.v-bind单向绑定(可简写为：)

  <div id="app">
    <!-- v-bind指令  单向数据绑定 一般用在标签的属性里 -->
    <h1 v-bind:title="message">
      vdssdvsdv
    </h1>
    <!-- 简写形式 -->
    <h2 :title="message">
      vdssdvsdv
    </h2>
  </div>
  <script src="vue.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        context: '我是嘻嘻嘻',
        message: 'xxx' + new Date().toLocaleString()
      }
    })
  </script>

2.v-model双向绑定（动态绑定到value属性，所以可以不写：value）

     <div id="app">
          <!-- 单向绑定  只有自己改变 -->
          <input type="text" v-bind:value="searchMap.key"></input>
          <!-- 双向绑定   别人和自己一起改变-->
          <input type="text" v-model="searchMap.key"></input>

          {{searchMap.key}}
     </div>
     <script src="vue.min.js"></script>
     <script>
          new Vue({
               el: '#app',
               data: {
                    searchMap: {
                         key: 'xxx'
                    }
               }
          })
     </script>

3.v-on绑定事件（简写@）

    <div id="app">
        <!-- vue绑定事件 -->
        <button v-on:click="search()">fgv</button>
        <!-- 简写方式@ -->
        <button @click="search()">fgv</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap: {
                    keyWord: '尚硅谷'
                },
                //查询结果
                result: {}
            },
            methods: {//定义多个方法
                search() {
                    console.log("cacscasca")
                },
                f1() {
                    console.log("gkgykg")
                }
            }
        })
    </script>

这里的方法其实就是search:function(){}的简写形式

4.修饰符.prevent

阻止原来要发生的行为，执行自定义的方法

    <div id="app">
        <!-- 阻止表单提交执行绑定的事件的方法 -->
        <form action="save" v-on:submit.prevent="onSubmit">

            <input type="text" id="name" v-model="user.name"></input>
            <button type="submit">save</button>
        </form>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user: {}
            },
            methods: {
                onSubmit() {
                    if (this.user.name != null) {
                        console.log("tijiao")
                    } else {
                        alert("qingshuru")
                    }
                }
            }
        })
    </script>

5.v-if条件渲染

   <div id="app">
      <input type="checkbox" v-model="ok">同意许可协议
      <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
      <h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
      <h1 v-else>no</h1>
   </div>
   <script src="vue.min.js"></script>
   <script>
      new Vue({
         el: '#app',
         data: {
            ok: false
         }
      })
   </script>

6.v-for

    <div id="app">

        <!-- 简单的列表渲染 -->
        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul>
        <!-- 要得到索引 -->
        <ul>
            <li v-for="(n,index) in 10">{{n}}----{{index}}</li>
        </ul>


        <hr />

        <!-- 最常用的遍历列表 -->
        <table border="1">
            <tr v-for="n in userList">
                <td>{{n.id}}</td>
                <td>{{n.username}}</td>
                <td>{{n.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>

---

vue 生命周期

  <div id="app">
    防不胜防白癜风
  </div>
  <script src="vue.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      //在页面渲染之前执行
      created() {
        debugger//加断点
        console.log("creadscsdv")
      },
      //在页面渲染之后执行
      mounted() {
        debugger//加断点
        console.log("dcvsdvsd")
      }
    })
  </script>

---

vue路由（就是类似菜单栏）

首先要引入vue-router.js文件（细节要先引入vue再引入router）

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

---