Vue纯零基础教学第三天--到走入Vue项目实际开发的内心深处-CSDN博客

让我们手摸着手大步向前走 ,最近看完曾国藩传，觉得很不错，还有杜月笙与孟小冬，推荐大家在写代码的时候，要多读书，好增加自己的文艺气息。多些对书的感悟，放心游戏，多出去走走，今天的北京真冷 3月30日记。

侦听器实现模糊搜索

  // 侦听器，实现搜索功能异步操作
    watch: {
      // es6方法中的简写在写一次以后就不写了
      //   在search 里面 能用 nweValue 进行检索数据
      //   模糊查询 所有的接口通过json--server 给我们提供的接口
      search(newValue, oldValue) {
        axios
          .get("http://localhost:3000/brands?name_like=${newValue}")
          .then(response => {
            this.items = response.data;
          })
          .catch(err => {});
      }
    },
复制代码

VUE的核心组件和路由生命周期

组件

    组件就是页面上功能完备的区域。 结构，样式 ，js，
    组件允许我们使用小型，独立和通常可服用的组件构建大型应用，仔细想任何的应用界面
    都可以抽象为一个组件数目
    组件是可以复用的vue 实例，且带有一个名字
    模块：侧重于功能或者数据的封装
    组件：包含了template style 和 script
    组件有自己的作用域
    template 每个组件模板有且只有一个根元素
    组件中的data 要求 必须是一个函数且需要返回一个对象
复制代码

组件的分类和使用

    分类：全局注册和局部注册
    使用步骤：1、注册组件，2通过名字使用组件
复制代码

局部组件

 <script>
        // 这里不能访问 组件中的data 
        // 组件也不能访问new Vue 里面的成员
      new Vue({
        el: "#app",
        // 局部组件
        components: {
             // 组件有自己的作用域
          com: {
            // 组件就是一个vue 的实例
            // 组件的模板中应该只有一个根元素
            template: "<div><span>首页 {{msg}} </span></div>",
            data(){
                // 组件中的data 必须的一个函数,因为要让不同的实例管理自己               
                return{
                    msg:'hello',
                }
            }
            
          }
        },
        methods: {}
      });
    </script>
复制代码

全局注册组件

 // 全局组件
  Vue.component("Coma", {
    template:
      "<div><button @click='handle'>按钮</button><span>{{count}}</span></div>",
    data() {
      return {
        count: 0
      }
    },
    methods: {
      handle() {
        this.count ++;
      }
    }
  });
复制代码

父子组件

// 父组件
  Vue.component("parant-com", {
    template: "<div>父组件---使用子组件<child-com/></div>"
  });
  // 子组件
  Vue.component("child-com", {
    template: "<div>子组件</div>"
  });
复制代码

父子组件介绍在父组件里面要把子组件放到里面才能生效 <\child-com/>

props 父组件给子组件传值与传递不同数据

  <script>
      Vue.component("com", {
        //   props 道具 里面是传的是数组
        // 接收父组件传过来的值  把外部的值传给组件内部,这几记住穿过来的就是字符串
        props: ["leve1", "leve2"],
        //  这里要绑定变量 所以 我们要绑定
        // prop 传递数字，布尔值，数组对象，单向数据流所有prop 向下传输
        template: "<div><span>{{leve1}}</span>-----<span>{{leve2}}</span></div>",
        mounted(){
            console.log(this.leve1)
        }
      });

      new Vue({
        el: "#app",
        data: {
            // leve1:1
            // leve1:true
            // 这个prop 用来传递 一个初始值，那这个子组件接下来希望将其作为本地的prop数据
            // 来使用这种情况下最后定义一个本地的data属性将这个prop 用作初始值
            leve1:{name:'首页'}
        },
        methods: {}
      });
    </script>
复制代码

生命周期钩子函数讲解重点 *****

生命周期 -----从生到死生命周期钩子函数

beforeCreate  刚刚创建实例
created      init 注入  调用
   往下走 设置 el
   继续走 设置 template 模板
  然后在设置与没有设置el 与 模板  中 做出选择

  beforeMount 没有挂载 时候可以进行干预
  mounted     编译好的模板替换到 el 挂载页面上页面加载完毕
  
beforeUpdate  数据更新一变化 执行函数更新
updated        更新完毕渲染

beforeDestroy  开始销毁 监听器 事件
destroy       销毁完成 
复制代码

使用$mount

使用render 传递组件传值

钩子函数运行原理与机制

<body>
    <div id="app">
      <input ref="txt" type="text" v-model="something" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "hello VUe",
          something: ""
        },
        //    钩子函数 beforecreate 在页面创建好就执行了
        beforeCreate() {
          console.log("beforeCreate", this.msg);
        },
        // 可以获取到data 或者methods 中的成员
        created() {
          console.log("created", this.msg);
        },
        // 当vue 实例 的el 节点或组件挂载到页面以前运行此函数
        beforeMount() {
          console.log("beforeMount", this.$refs.txt);
        },
        // 当vue 实例el 节点或组件挂载到页面以后运行此函数
        mounted() {
          console.log("mounted", this.$refs.txt);
        },
        // 当vue 实例数据 发生改变时触发此函数
        beforeUpdate() {
          console.log("moubeforeUpdatented");
        },
        // 当vue 实例数据 发生改变后触发此函数
        updated() {
          console.log("updated");
        },
        // vue 实例销毁之前触发
        beforeDestroy() {
          console.log("beforeDestroy");
        },
        // vue 实例销毁
        destroyed() {
          console.log("destroyed");
        }
      });
    </script>
  </body>
复制代码

前端路由单页应用

单页应用，是在一个页面完成所有的业务功能，浏览器一开始会加重必须的HTML css 和 javaSCRIPT 之后操作这张页面完成一切都是 js 来控制

优点：
    操作体验流程
    完全的前端组件化
缺点：
    首次加载大量资源
    对搜索引擎不友好
    开发难度相对较高
复制代码

单页应用实现的原理前端路由 DEMO

hash 路由
谨记：前端路由是通过锚点来识别的
复制代码

<body>
    <div id="app">
      <ul>
        <li>
          <a href="#/users">用户管理</a>
        </li>
        <li>
          <a href="#/rights">权限管理</a>
        </li>
        <li>
          <a href="#/roles">角色管理</a>
        </li>
      </ul>
    </div>
    <div id="container"></div>
    <script>
      // 当锚点发生变化
      window.onhashchange = function() {
        //   获取锚点
        var hash = location.hash;
        hash = hash.replace("#", "");
        // 把锚点当成路径来判断
        var container = document.getElementById("container");
        switch (hash) {
          case "/users":
            container.innerHTML = "这里是用户管理";
            
            <!--这里记得使用break 啊不然有穿透效果的 -->
            
            break;
          case "/rights":
            container.innerHTML = "这里是权限管理";
            break;
          case "/roles":
            container.innerHTML = "这里是角色管理";
            break;
        }
      };
    </script>
  </body>
复制代码

router-view

        <!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">
      <ul>
        <li>
          <a href="#/users">用户管理</a>
        </li>
        <li>
          <a href="#/rights">权限管理</a>
        </li>
        <li>
          <a href="#/roles">角色管理</a>
        </li>
      </ul>

  <!-- 给路由匹配到的组件占位  -->
  <router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<!-- 上面是 vue-router 全局引用 -->
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
  /*
    vue-router  会全局 范围内使用vue 自动调用vue.use注册 vue-router  插件
    1、创建路由组件
    2、创建路由对象（设置路由规则） router 路由规则 里面包含 route 路由规则
    3、创建vue 实例配置路由对象
   */
  var users = {
    template: "<div>用户管理的额组件</div>"
  };
  var rights = {
    template: "<div>创建路由权限</div>"
  };
  var roles = {
    template: "<div>创建路由角色</div>"
  };

  var router = new VueRouter({
    // 设置路由规则
    routes: [
    <!-- 这里使用 redirect  进行重定向  -->
      {path:'/',redirect:'/users'}
      { path: "/users", component: users },
      { path: "/rights", component: rights },
      { path: "roles", component: roles }
    ]
  });

  var vm = new Vue({
    el: "#app",
    router
  });
    </script>
  </body>
</html>
    <!-- 
    vue- router 是官方的路由管理器，让构建单页应用易如反掌官网说的
     下载 router npm install vue-router
    
     然后需要导入  在模块化工程中使用它
     import Vue from 'vue'
     import VueRouter from 'vue-router'
    
     Vue.use(VUERouter)
     -->
复制代码