前端Vue第二部分

HalukiSan
119 阅读9分钟

​

组件注册

  1. 局部组件

    1. 创建一个组件.vue

    2. 引入：import Mycomp from './components/Mycomp.vue'

    3. 注册组件export default { name: 'App', components: {

       Mycomp

      }}

    4. 使用组件

  2. 组件组成

    1. template 视图
    2. script 逻辑
    3. style 样式

  3. 全局组件

    1. 注册全局组件 在Vue对象身上有个Vue.component() 注册全局组件 在所有的组件中 不需要引入 可以直接使用

    2. 语法：Vue.component('my-component-name', {

        // ... 选项 ...

      })

    3. 代码演示

         // import Vue from 'vue'//运行时：vue.runtime.js 
     import Vue from 'vue/dist/vue'
​
     /注册全局组件
     // Vue.component('组件名称',{内容配置})
     Vue.component('my-comp',{
         //视图 template :template作为属性使用 必须vue.js （完整版的vue.js）  默认引入-运行时-vue.runtime.js 
         template:'<div> <h2>我是一个全局组件</h2> <p>{{ msg }}</p></div>',
         //数据
         data(){
             return {
                 msg:'hello vue全局组件'
             }
         },
         //方法
         methods:{
​
         }
     })

    1. 全局组件--可以挂载创建好的局部组件 注册全局import MyBanner from './components/MyBanner.vue'// Vue.component('MyBanner',MyBanner)Vue.component(MyBanner.name,MyBanner)

    2. vue 不同构建版本

      1. vue.js 完整版 --编译器+ 运行时
      2. vue.runtime.js 运行时

  4. 补充一个知识点

    1. 组件的视图模板组成

    2. v-pre

      1. 不需要表达式 跳过这个元素和它的子元素的编译过程 -- 不编译vue语法 直接输出内容
      2. {{ msg }}

    3. v-cloak

      1. 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

      2. [v-cloak] {display: none;}

        {{ message }}

    4. v-once

      1. 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
      2. 可以用于优化更新性能
      3. 语法:
        一定不修改:{{ msg }}

    异步组件

    什么时间用什么时间加载组件。

    Objs:()=>import('@/components/vue-object'),

    Vue的生命周期 参考官网。

    生命周期函数：

    1. beforeCreate new vue实例后 创建之前 -- 获取到data methods 和数据等。

    2. created *** 创建之后

    3. beforeMount 挂载之前

    4. mounted *** 挂载完毕 -- 初次获取DOM元素的地方

    5. beforeUpdate 更新之前 数据更新了 视图时旧的

    6. updated *** 更新之后 数据和视图 同步

    7. beforeDestory 销毁之前 什么都可以用

    8. destory 销毁之后 清空数据 或者时计时器等

      生命周期测试代码

      <template>
  <div>
    <h2>生命周期函数</h2>
    <div id="main">id</div>
    <p>msg：{{ msg }}</p>
    <button @click="msg = '我是新修改的msg'">修改msg</button>
    <!-- <ul>
      <li v-for="item in banner" :key="item.title">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </li>
    </ul> -->
  </div>
</template>
​
<script>
export default {
  name: "life",
​
  data() {
    return {
      msg: "hello",
      banner: [],
    };
  },
  methods: {
    demo() {},
  },
  //生命周期函数  和data 同级
  //1.创建之前
  beforeCreate() {
    console.group("beforeCreate--创建之前-获取不到data-methods");
    console.log('this',this)
    console.log("el-dom", this.$el);
    console.log("data", this.$data);
    console.log("msg", this.msg);
  },
  //2. 创建之后
  /*created() {
    console.group("created--创建之后-首次获取data-methods");
    console.log('this',this)
    console.log("el-dom", this.$el);
    console.log("data", this.$data);
    console.log("msg", this.msg);
    //最早：网络请求 --- juquery
​
  },*/
  //3. beforeMount
 /* beforeMount() {
    console.group("beforeMount--挂载之前---获取不到dom元素");
    console.log("el-dom", this.$el);
    console.log("data", this.$data);
    console.log("msg", this.msg);
    console.log("dom", document.getElementById("main"));
  },*/
  //4.mounted
 /* mounted() {
    console.group("mounted--挂载之后---获取dom元素");
    console.log("el-dom", this.$el);
    console.log("data", this.$data);
    console.log("msg", this.msg);
    console.log("dom", document.getElementById("main"));
  },*/
  //5. beforeUpdate
 /* beforeUpdate() {
    // debugger;
    console.group("beforeUpdate--更新之前---视图不更新");
    console.log("data", this.$data);
    console.log("msg", this.msg);
    // debugger;
  },*/
  //6.updated
 /* updated() {
    console.group("updated--更新之后---视图更新完毕");
    console.log("data", this.$data);
    console.log("msg", this.msg);
  },*/
  //7. beforeDestory 销毁之前  什么都可以用
  /*beforeDestroy() {
    console.group("beforeDestory 销毁之前  什么都可以用");
    console.log("data", this.$data);
​
    console.log("msg", this.msg);
  },*/
  //8.destoryed
 /* destroyed() {
    console.group("destoryed 销毁之后  什么都可以用--数据初始化-清空计时器");
    console.log("data", this.$data);
    console.log("msg", this.msg);
  },*/
​
​
}
</script>
​
<style scoped>
​
</style>

    路由

    Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

    • 嵌套的路由/视图表
    • 模块化的、基于组件的路由配置
    • 路由参数、查询、通配符
    • 基于 Vue.js 过渡系统的视图过渡效果
    • 细粒度的导航控制
    • 带有自动激活的 CSS class 的链接
    • HTML5 历史模式或 hash 模式，在 IE9 中自动降级
    • 自定义的滚动条行为

    1. 介绍vue组件中实现页面的跳转 配置路由--通过路由实现页面的跳转的

    2. 安装路由

      1. 安装命令:npm install vue-router -S

      2. 引入路由插件-main.jsimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)

      3. 定义 (路由) 组件 import Home from './Home.vue'import About from './About.vue'

      4. 定义路由 -- 页面走向const routes = [

        { 
    path: '/', //path：地址栏的路径  /+字母
    component: Home  //跳转这个路径显示的组件：页面
},
{ path: '/news', component: News },

        ]访问首页：http://localhost:8080/#/ --> Home访问新闻：http://localhost:8080/#/news --> News

      5. 创建router实例const router = new VueRouter({

        routes:routes

        })

      6. 挂载路径new Vue({

        router:router,

        })

      7. 显示路由出口

      8. 路由导航首页首页新闻属性： to='/+路径' 路径-路由里面配置的path路径 exact 精准匹配

    1. 安装路由 vue-cli

      1. 安装项目的时候选择 router
      2. vue create vue-router

    动态路由匹配

    1. 介绍路由传递参数 如何给路由传递参数 如何接受参数

    2. 语法：const router = new VueRouter({

       routes: [
     // 动态路径参数 以冒号开头
     { path: '/user/:id', component: User }
 ]

      })

    3. 获取动态路由传递的参数

      1. this.$route.xxx

    4. $route

      1. fullPath 路由路径的全地址
      2. matched 数组格式 包含当前的路由路径 以及 父组件路由路径
      3. name 路由名称
      4. params {} 路由动态参数 定义路由：/user/:uname params={uname:xx}
      5. path 路由路径走向
      6. query 地址栏参数 xx?aa=123

    嵌套路由

    1. 介绍路由的嵌套 当前的路由下面包含一级或者多级路由导航

    2. 写法：const router = new VueRouter({

      routes: [ 
    {
        path:'/zhinan',
        component:Zhinan,
        children:[//二级路由
            {
                path:'anzhuang',//访问地址： /zhinan/anzhuang  -- 推荐写法
                component:,
                children:[//三级路由

                ]
            },
            {
                path:'/base',//访问地址： /base
                component:,
            }
        ]   
    }
]

      })

    编程式的导航

    1. 介绍除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现 说明：跳转路由的两种方式

      1. 标签跳转路由

      2. 编程式-js跳转路由

        1. router.push()

        2. router.replace()

        3. router.go(n)

          1. 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)

          2. 在浏览器记录中前进一步，等同于 history.forward()router.go(1)

            后退一步记录，等同于 history.back() router.go(-1)

            前进 3 步记录 router.go(3)

    2. 访问注意：在 Vue 实例内部，你可以通过 访问路由实例。因此你可以调用​router.push

    命名路由

    1. 介绍通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候

    2. 功能

      1. 跳转路由 - 编程式跳转this.$router.push({ name: 'User', params: { uname: 123,id:xx } })
      2. router-link 的 to 属性传一个对象User

    重定向和别名

    1. 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /bconst router = new VueRouter({

      routes: [
    { path: '/a', redirect: '/b' }
]

      })

    2. 别名

      1. 含义：小名 其他名称 都是一个人

      2. 语法：const router = new VueRouter({

         routes: [
     { path: '/a', component: A, alias: '/b' }
 ]

        })

    第一步：安装路由：

    npm i vue-router@3.x --S  

    第二步 创建路由目录：

    在src目录下创建一个目录为：router 同时在router 目录中创建index.js文件。

    同时在src目录下创建pages 目录存放页面。

    index.js

    /(1)先导入Vue
import Vue from 'vue'
import VueRouter from "vue-router"
//（2）加载到Vue对象中
Vue.use(VueRouter)
​
import Home from "@/pages/Home";
​
​
//(3)配置路由走向
const  routers = [
    {
        path:'/',
        component:Home
    },
    {
        path:'/new',
        component: () => import( '../pages/New.vue')
    }
]
​
//(4)挂载路由
​
const router = new VueRouter({
    routers
})
//（5）导出路由
export default router

    main.js

    //(6)导出路由
import router from "@/router/index";
​
 new Vue({
  render: h => h(App),
  //(7)挂载路由到Vue中
  router
}).$mount('#app')

    App.vue

    <router-link to="/">首页</router-link>|
​
 <router-link to="/new">新闻</router-link>
​
<router-view></router-view>

    子路由 配置写到children下面。

    如下：

    children: [{
​
}}

    案例一：（认识路由：）(课上操作新建项目)

    ​

    element UI讲解

    element UI 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

    安装：

    npm i element-ui -S

    需要在main.js中引入element-ui

    有两种引入方式：

    一全局引入

    import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

    二按需加载：

    Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

    全局配置的时候里面可以配置样式的大小如下：

    Vue.use(Element, { size: 'small', zIndex: 3000 });

    Element也是24 分栏布局。

    下面是常用的布局。

    开发当中只需要将它的UI组件引入到项目当中就可以了。

    ​

avatar
文章
阅读
粉丝