2021-07-24大连东软实训第五天---vue组件（二）-阿里云开发者社区

refs的使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="button" value="获取HTML的DOM元素" @click="getEL" />
      <h1 ref="myh">这是一个h1</h1>
      <login ref="login"></login>
    </div>
    <script type="text/javascript">
      let vm=new Vue({
        el:'#app',
        data:{
        },
        methods:{
          getEL(){
            alert(this.$refs.myh.innerText);
            alert(this.$refs.login.msg);
          }
        },
        components:{
          login:{
            template:"<h3>这是组件中的h3</h3>",
            data(){
              return{
                msg:"子组件的数据"
              }
        }
        }}
      });
    </script>
  </body>
</html>

vue路由

前端路由为了实现dom模拟多页面

路由高亮+动画

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    <style type="text/css">
      .myclass{
        font-size: 24px;
        color: blue;
      }
      .v-enter,.v-leave-to{
        opacity: 0;
        transform:translateX(200px) ;
      }
      .v-enter-active,
      .v-leave-active{
        transition: all 0.8s ease;
      }
    </style>
  </head>
  <body>
    <div id="app">
<!--      <a href="#/login">登录</a> -->
      <!-- 在页面中使用router-view标签来显示组件，该标签就是一个占位符，将组件渲染到此 -->
      <!-- router-link会被解析为a标签 -->
      <router-link to="/login" >登录</router-link>
      <router-link to="/register">注册</router-link>
      <transition mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <script type="text/javascript">
      let login={
        template:"<h1>登录组件</h1>"
      }
      let register={
        template:"<h1>注册组件</h1>"
      }
      let router=new VueRouter({
        //定义路由的匹配规则
        routes:[
          {
            path:"/",
            redirect:'/login'
          },
          {
            path:"/login",
            component:login
          },
          {
            path:"/register",
            component:register
          }
        ],
        linkActiveClass:'myclass'
      });
      //定义路由的匹配规则使用的是组件的模板的名字而不是组件名字
      let vm=new Vue({
        el:'#app',
        data:{
          msg:"hello vue"
        },
        router:router
      });
    </script>
  </body>
</html>

用query

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    <style type="text/css">
      .myclass{
        font-size: 24px;
        color: blue;
      }
      .v-enter,.v-leave-to{
        opacity: 0;
        transform:translateX(200px) ;
      }
      .v-enter-active,
      .v-leave-active{
        transition: all 0.8s ease;
      }
    </style>
  </head>
  <body>
    <div id="app">
<!--      <a href="#/login">登录</a> -->
      <!-- 在页面中使用router-view标签来显示组件，该标签就是一个占位符，将组件渲染到此 -->
      <!-- router-link会被解析为a标签 -->
      <router-link to="/login?id=10&name=tom" >登录</router-link>
      <router-link to="/register">注册</router-link>
      <transition mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <script type="text/javascript">
      let login={
        template:"<h1>登录组件-------{{id}}---{{$route.query.id}}</h1>",
        data(){
          return{
            id:''
          }
        },
        created(){
          this.id=this.$route.query.id
        }
      }
      let register={
        template:"<h1>注册组件</h1>"
      }
      let router=new VueRouter({
        //定义路由的匹配规则
        routes:[
          {
            path:"/",
            redirect:'/login'
          },
          {
            path:"/login",
            component:login
          },
          {
            path:"/register",
            component:register
          }
        ],
        linkActiveClass:'myclass'
      });
      //定义路由的匹配规则使用的是组件的模板的名字而不是组件名字
      let vm=new Vue({
        el:'#app',
        data:{
          msg:"hello vue"
        },
        router:router
      });
    </script>
  </body>
</html>

用param

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>路由提交参数</title>
    <script src="../js/vue-2.4.0.js"></script>
    <!-- 1.  引入路由文件 -->
    <script src="../js/vue-router-3.0.1.js"></script>
    <style type="text/css">
      .myclass {
        font-size: 24px;
        color: blue;
        background: pink;
      }
      .v-enter,
      .v-leave-to {
        opacity: 0;
        transform: translateX(200px);
      }
      .v-enter-active,
      .v-leave-active {
        transition: all 0.8s ease;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <router-link to="/login/101/tom">登录</router-link>
      <router-link to="/register">注册</router-link>
      <transition mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <script type="text/javascript">
      let login = {
        template: "<h1>登录组件~~~{{id}}~~~~{{this.$route.params.name}}</h1>",
        data() {
          return {
            id:''
          }
        },
        created() {
          console.log(this.$route.params.id);
          this.id = this.$route.params.id;
        }
      }
      let register = {
        template: "<h1>注册组件</h1>"
      }
      //修改path的匹配路径
      let router = new VueRouter({
        routes: [
          {path:"/",redirect: '/login'},
          {path:"/login/:id/:name",component: login},
          {path:"/register",component: register}
        ],
        linkActiveClass: 'myclass'
      });
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello vue hello vue"
        },
        //3. 挂载router
        router
      });
    </script>
  </body>
</html>

页面嵌套

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>路由嵌套</title>
    <script src="../js/vue-2.4.0.js"></script>
    <!-- 1.  引入路由文件 -->
    <script src="../js/vue-router-3.0.1.js"></script>
    <style type="text/css">
      .myclass {
        font-size: 24px;
        color: blue;
        background: pink;
      }
      .v-enter,
      .v-leave-to {
        opacity: 0;
        transform: translateX(100px);
      }
      .v-enter-active,
      .v-leave-active {
        transition: all 0.4s ease;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <router-link to="/account/">账号</router-link>
      <router-link to="/goods">商品</router-link>
      <transition mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <template id="account">
      <div>
        <h1>账号组件</h1>
        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>
        <router-view></router-view>
      </div>
    </template>
    <script type="text/javascript">
      let account = {
        template: "#account",
      }
      let goods = {
        template: "<h1>商品组件</h1>",
      }
      let login = {
        template: "<h3>登录组件</h3>",
      }
      let register = {
        template: "<h3>注册组件</h3>"
      }
      //修改path的匹配路径
      let router = new VueRouter({
        routes: [
          {path:"/",redirect: '/login'},
          {
            path:"/account",
            component: account,
            children: [//注意：children属性是一个数组
              {path:"/account/login",component: login},
              {path:"/account/register",component: register}
            ]
          },
          {path:"/goods",component: goods},
        ],
        linkActiveClass: 'myclass'
      });
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello vue hello vue"
        },
        //3. 挂载router
        router
      });
    </script>
  </body>
</html>

页面布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>经典布局</title>
    <script src="../js/vue-2.4.0.js"></script>
    <script src="../js/vue-router-3.0.1.js"></script>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .header {
        width: 100%;
        height: 100px;
        background: pink;
      }
      .box {
        height: 600px;
        display: flex;
      }
      .left {
        background: red;
        flex: 3;
      }
      .main {
        background: blue;
        flex: 7;
      }
      /*.left {
        width: 30%;
        height: 600px;
        background: red;
        float: left;
      }
      .main {
        width: 70%;
        height: 600px;
        background: blue;
        float: right;
      }*/
    </style>
  </head>
  <body>
    <div id="app">
      <router-view class="header"></router-view>
      <div class="box">
        <router-view name="left" class="left"></router-view>
        <router-view name="main" class="main"></router-view>
      </div>
    </div>
    <script type="text/javascript">
      let header = {
        template: "<h1>头部组件</h1>"
      }
      let left = {
        template: "<h1>导航组件</h1>"
      }
      let main = {
        template: "<h1>主体组件</h1>"
      }
      let router = new VueRouter({
        routes:[
          {path:"/", components: {
              default: header,
              left: left,
              main
            } 
          },
        ]
      });
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello vue hello vue"
        },
        router
      });
    </script>
  </body>
</html>

2021-07-24大连东软实训第五天---vue组件（二）

热门文章

最新文章

相关课程

相关电子书

相关实验场景