VUE 学习笔记

VUE CLI 脚手架

优点：

脚手架是通过webpack搭建的开发环境

使用ES6语法

打包和压缩JS为一个文件

项目文件在环境中编译，而不是浏览器

实现页面自动刷新

环境要求：

nodejs ≥ 6.9

npm ≥ 3.10

安装

$ npm install -g vue-cli

$ vue --version

使用

$ vue init <template-name> <project-name>

比如，

$ vue init webpack my-project

$ cd my-project

$ npm install

$ npm run dev

执行流程

index.html --> main.js --> App.vue

精简App.vue文件

// 1、模板：html结构 template子元素有且只能有一个
<template>
  <div id="app">
    <h1>{{ title }}</h1>
  </div>
</template>

// 2、行为：处理逻辑
<script>
export default {
  name: ‘App‘,
  data() {
    return {
      title: ‘Hello VUE!‘
    }
  }
}
</script>

// 3、样式：解决
<style>
?
</style>

组件的注册

全局

// 在 main.js 中全局注册组件
import Users from ‘./components/Users‘
Vue.component(‘users‘, Users);

局部

<script>
// 局部注册组件
import Users from ‘./components/Users‘
?
export default {
  name: ‘App‘,
  data() {
    return {
      title: ‘Hello VUE!‘
    }
  },
  components: {
    "users": Users
  }
}
</script>

组件CSS作用域

<!-- Add "scoped" attribute to limit CSS to this component only -->

如果在 <sytle> 中不加 scoped 则后面的属性覆盖前面的，否则每个组件各自用各自的样式。

<style scoped>
...
</style>

Vue 属性传值Props

父传子

<!-- 给子组件传值 -->
<users v-bind:users="users"></users>
?
export default {
  name: "App",
  data() {
    return {
      title: "Hello VUE!",
      users: [
        { name: "Henry", position: "WEB", show: true },
        { name: "Bucky", position: "PHP", show: false },
        { name: "Emily", position: "C", show: true },
        { name: "Tom", position: "JAVA", show: true },
        { name: "Jerry", position: "Python", show: true },
        { name: "Tim", position: "Go", show: false },
        { name: "Bob", position: "C#", show: true }
      ]
    }
  }
};
?

export default {
  name: "Users",
  // 获取父组件的传递的值
  // props: ["users"],
  // 官方推荐的标准写法  
  props: {
    users: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
?
    };
  }
};

传值和传引用

传值：string、number、boolean

引用（会改变相关数据）：array、object

事件传值

子传父

<template>
  <div class="header">
    <h1>{{ title }}</h1>
    <p @click="changeTitle">{{ app_title }}</p>
  </div>
</template>
?
 methods: {
    changeTitle: function() {
      this.$emit("titleChanged", "子传父");
    }
  }

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

生命周期

生命周期钩子的函数：

beforeCreate: 组件实例化之前；可做加载动画

created: 组件创建、属性绑定、DOM为生成；可做数据请求，付给属性，结束加载动画

beforeMount: 组件挂在之前，页面仍未显示，虚拟DOM已配置；

mounted: 组件挂在之后，页面已显示；

beforeUpdate: 组件更新之前，页面仍未更新，虚拟DOM已配置；

updated: 组件更新之后，显示新的页面；

beforeDestory: 组件销毁之前；

destoryed: 组件销毁之后；

路由和Http

路由：

安装：$ npm install vue-router --save-dev

main.js中

import VueRouter from ‘vue-router‘
?
Vue.use(VueRouter)
?
// 配置路由
?
const router = new VueRouter({
    routes: [
     {path:‘/‘, component: Home},
     {path:‘/hello‘, component: HelloWorld},
     {path: ‘*‘, redirect: ‘/‘ } // miss路由
   ],
   // 去除url地址中的 #
   mode: "history"
});
?
new Vue({
?
  router,
?
  el: ‘#app‘,
?
  components: { App },
?
  template: ‘<App/>‘
?
})
?

App组件中

// 在APP组件中
<router-view></router-view>

跳转

<a href="/">Home</a>
<router-link to="/">Home</router-link>

// router-link 默认是 a 标签，可使用 tag 属性来改变，如 tag=“div”
// v-bind:to 动态绑定值
<router-link v-bind:to="homeLink" tag="div">主页</router-link>
<script>
export default {
  data (){
    return {
        homeLink: ‘/‘
    }
  }
}
</script>
// 或者如有注册时，name属性绑定
const routes = [
  { path: ‘/‘, name:‘homeLink‘, component: Home },
]
<router-link v-bind:to="{name:‘homeLink‘}">主页</router-link>

Http:

安装： $ npm install vue-resource --save-dev

import VueSource from ‘vue-resource‘
Vue.use(VueSource)

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

搭建脚手架

$ vue init webpack-simple xxx

路由跳转

<script>
export default {
  methods: {
    goToMenu: function() {
      // 跳转到上一个页面
      this.$router.go(-1);
      // 指定跳转的地址
      this.$router.replace(‘/menu‘);
      // 指定跳转路由的名字下
      this.$router.replace({name:‘menuLink‘});
      // 通过push跳转
      this.$router.push(‘/menu‘);
      this.$router.push({name:‘menuLink‘});
    }
  }
};
</script>

二级路由和三级路由

// children属性定义 三级路由雷同
const routes = [
  {
    path: ‘/about‘, name: ‘aboutLink‘, component: About, children: [
      { path: ‘history‘,name:‘historyLink‘, component: History }, // /about/history
      { path: ‘/delivery‘,name:‘deliveryLink‘, component: Delivery },// /delivery
    ]
  }
]

导航守卫

全局守卫

// 全局守卫
router.beforeEach((to, from, next) => {
  if (to.path == ‘/login‘ || to.path == ‘/register‘) {
    // 正常展示
    next();
  } else {
    alert(‘请先登录!‘);
    next(‘/login‘);
  }
?
})

路由独享

const routes = [
  {
    path: ‘/admin‘, name: ‘adminLink‘, component: Admin, beforeEnter: (to, from, next) => {
      // 路由独享守卫
      alert(‘请先登录‘);
      next(‘/login‘);
      // next(false);
    }
  },
]

组件内守卫

<script>
export default {
  data() {
    return {
      name: "Herry"
    };
  },
  beforeRouteEnter: (to, from, next) => {
    // 此时还获取不到data
    alert("Hello " + this.name);
    // 回调
    next(vm => {
      alert("Hello " + vm.name);
    });
  },
  beforeRouteLeave: (to, from, next) => {
    // 离开
    if (confirm("确定离开吗")) {
      next();
    } else {
      next(false);
    }
  }
};
</script>

复用router-view

// App.vue中复用orderingGuide、deliver、history组件
<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-4">
            <router-view name="orderingGuide"></router-view>
        </div>
        <div class="col-sm-12 col-md-4">
            <router-view name="deliver"></router-view>
        </div>
        <div class="col-sm-12 col-md-4">
            <router-view name="history"></router-view>
        </div>
    </div>
</div>

// 路由组测分离到单独文件 routes.js
// 复用其他路由组件 把 components 属性值改为对象形式并把组件组测进来
// 此时 Home组件就可以复用 router-view 了
export const routes = [
  {
    path: ‘/‘, name: ‘homeLink‘, components: {
      default: Home,
      ‘orderingGuide‘: OrderingGuide,
      ‘deliver‘: Delivery,
      ‘history‘: History
    }
  },
]
// 并在main.js中引入
import {routes} from ‘./routes‘

控制滚动行为

// main.js
const router = new VueRouter({
  routes,
  mode: ‘history‘,  
  // 只在支持 history.pushState 的浏览器中
  scrollBehavior(to, from, savedPosition) {
    return { x: 0, y: 100 };
    return { selector: ‘.btn‘ }; // 跳转到 .btn 样式位置
  }
})

VUE 学习笔记

原文：https://www.cnblogs.com/cshaptx4869/p/11185767.html