vue.js

最新推荐文章于 2024-04-30 08:37:00 发布

MU_kaka

最新推荐文章于 2024-04-30 08:37:00 发布

阅读量208

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34645958/article/details/80968690

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.vue搭建脚手架CLI

1.全局安装cli： npm install --global vue-cli （vue --version 检查安装成功）

2.创建一个基于webpack模板的新项目：vue init webpack vue-demo

3.安装依赖，运行

cd vue-demo

npm install

npm run dev

4.安装路由功能：npm install vue-router --save-dev

二.Vue组件嵌套

1.注册全局组件

main.js

import Users from './components/Users'
Vue.component("users",Users);

2.局部组件(一般使用局部组件)

Vue.js中

import Users from './components/Users'
...  
components:{
    "users":Users
  }

三.vue传值/引用

1.父组件向子组件传值（属性传值——通过Props数组）

父组件定义值，将值绑定到子组件标签，子组件通过props获取值

<users v-bind:users="users"></users>

<script>
    export default {
      name: "Users",
      //props:["users"]  
      props:{
        users:{
          type:Array,
          required:true
        }
      }
    }
</script>

2.子组件向父组件传值（事件传值）

子组件使用$emit触发，父组件在实例中v-on自定义事件监听。

<header v-on:click="changeTitle">
...
 methods:{
        changeTitle:function () {
          
          this.$emit("titleChange","子向父组件传值")
        }
      }

<app-header v-on:titleChange="updateTitle($event)" v-bind:title="title"></app-header>
,methods:{
    updateTitle(title) {
      this.title = title;
    }

四.生命周期钩子函数

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

        beforecreated：el 和 data 并未初始化
        created:完成了 data 数据的初始化，el没有
        beforeMount：完成了 el 和 data 初始化

mounted ：完成挂载（挂载就是把data渲染进element——应用了虚拟dom技术）

beforeupdate，update，beforedestory，destory

五.Vue-router

1.基本概念

vue-router是vue.js官方的路由插件，实现路径和组件之间的切换（不刷新页面），而不是传统的通过超链接切换页面（刷新页面）

2.缺省路由

const routes = [
  
  {path:'*',redirect:'/'}


]

3.使用方法进行路由跳转

4.Vue-router实现

（1）安装路由：npm install vue-router --save-dev

（2）main.js

//引入路由模块
import VueRouter from 'vue-router'
//使用路由
Vue.use(VueRouter)
//配置路由
const router = new VueRouter({
  routes:[
    {path:"/",component:Home},
    {path:"/helloworld",component:HelloWorld}
  ],
  //不让路径中出现 #
  mode:'history'
})
new Vue({
  router,
  el: '#app',
  components: { App },
  template: '<App/>'
})

(3)app.vue

<template>
  <div id="app">
    <ul>
      //router-link  to  实现路由跳转
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/helloworld">HelloWorld</router-link> </li>
    </ul>
    //展示路由组件
    <router-view></router-view>
  </div>
</template>

六.Vue-resource

1.Vue-resource实现

（1）安装Vue-resource

npm install vue-resource --save-dev

重启 npm run dev

（2）main.js

//引入Vue-resource
import VueResource from 'vue-resource'
//使用vue-resource
Vue.use(VueResource)

(3)Home.vue

created(){
      this.$http.get("http://jsonplaceholder.typicode.com/users")
        .then((data)=>{
          this.users = data.body;
        })
    }

MU_kaka

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
vue.js

一.vue搭建脚手架CLI 1.全局安装cli： npm install --global vue-cli （vue --version 检查安装成功） 2.创建一个基于webpack模板的新项目：vue init webpack vue-demo 3.安装依赖，运行 cd vue-demo npm install npm run d...
复制链接

扫一扫

专栏目录