Vue总结

Vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

简单来说就是: 渐进式的前端UI框架，虚拟DOM，专注于数据处理。

模板语法

• 插值: {{message}}
• v-bind:id=“id”, 简写为 :id=“id” 绑定属性
• v-on:click=“clickMe”, 简写为 @click=“clickMe” 绑定事件
• methods方法属性 watch侦听属性 computed计算属性 data数据源 el挂载地 created初始时做的事情

以上具体用法请看vue官网

使用node.js和npm webpack vue-cli脚手架工具搭建vue项目

• 下载node.js

安装 通过node -v 测试 通过npm -v测试包资源管理器

• 安装 install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v 进行测试 //安装镜像会更快

• 安装 webpack

全局安装 npm install -g webpack

• 安装 vue-cli

npm install -g @vue/cli
测试 vue -version

• 使用vue-cli脚手架工具来搭建一个vue项目

vue init webpack 项目名

vue组件

组件注册

• 全局注册

在所有组件，包括子组件都可以使用，这样会造成，webpack会很大

Vue.component('my-component-name', { /* ... */ })

• 局部注册

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
然后在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Prop：给子组件传值

命名：定义属性时采用驼峰命名法，比如 postTitle, 给组件传值的时候使用烤肉串命名法post-title

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
给属性指定数据类型：
props: {
	title: String,
	likes: Number,
	isPublished: Boolean,
	commentIds: Array,
	author: Object
}

自定义事件

用于子组件向父组件派发一个事件，事件中可以传递参数
This.$emit(‘事件名称’，参数列表);

父组件监听事件
<组件标签 v-on:my-event='要执行的事件'>//my-event和this.$emit的事件名相同

插槽

通过属性prop一般是传递数据给子组件，查找一般用于让用户传递一些html内容，插槽相当于咱们之前画的后台布局中的iframe.

<slot></slot>

• 具名插槽

//子组件是
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>

//父组件是

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

</div>

v-slot: 缩写是 #

全局引入样式表

1. 在index.html中引入样式或者全局的js
2. 在入口文件 main.js 中通过 import直接导入

Vue路由

什么是路由

路由分为前台路由和后台路由，针对前后端分离的项目。
后台路由：controller : springMVC自动注册控制器user/index user/add role/index
前端路由：根据地址栏的变化，动态加载对应的组件，渲染到页面中，vue中的路由 vue-router

Vue中的路由 vue-router

Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

vue-router

Vue中的路由 vue-router

Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。