vue

第一部分：了解什么是Vuejs及入门

官⽹网：https://cn.vuejs.org/
入门：https://cn.vuejs.org/v2/guide/
快速入门
idea创建一个项目

npm init -y

npm install vue --save-dev

在新文件夹下见一个页面

    
    




    
{{name}}风采

mvvm
v + m + vm 视图和数据完全分离

插值表达式

 
{{male==1?"男":"⼥女女"}}
 

vue生命周期

`

生命周期

{{message}}

`

第二部分：掌握和学习Vuejs的内置指令（重点)

v-on
在事件处理理程序中调***⽤用 event.preventDefault() 或 event.stopPropagation() 是⾮非常常⻅见 的需求。尽管我们可以在⽅方法中轻松实现这点，但更更好的⽅方式是：⽅方法只有纯粹的数据逻辑，⽽而不不是去处理理 DOM 事件细节。
为了了解决这个问题，Vue.js 为 v-on 提供了了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示 的。
.stop ：阻⽌止事件冒泡
.prevent ：阻⽌止默认事件发⽣生
.capture ：使⽤用事件捕获模式
.self ：只有元素⾃自身触发事件才执⾏行行。（冒泡或捕获的都不不执⾏行行）
.once ：只执⾏行行⼀次

第三部分：掌握和学习Vuejs组件定义和事件定义

注册组件就是利用Vue.component()方法

直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。还可以在某个Vue实例中注册只有自己能使用的组件。

var app = new Vue({
    el: '#app',
    data: {
    },
    components: {
      'my-component': {
        template: `
这是一个局部的自定义组件，只能在当前Vue实例中使用
`,
      }
    }
  })

路由

    
    






    
    

        首页
        学员
        老师
    

    
    

数据交互

    
    




    
    
名称 : {{info.name}}
    
地址 : {{info.address.country}}-{{info.address.street}}
    
URL : {{info.url}}

第四部分：Vuejs脚手架

类似springboot
环境安装

# 第一次安装可能会有些慢！
npm install vue-cli -g  

# 检测我们安装的vue的应用
vue list

第一个 Vue-Cli 前端程序

1、新建一个文件夹 vue-cli

2、创建一个基于webpack模板的 vue 应用程序

vue init webpack myvue

3、完善依赖，运行程序，我们下载的所有前端工程一般都没有依赖！

cd myvue  # 进入目录

npm install  # 安装所有依赖

npm run dev # 启动项目

4、访问测试！

目录分析

• build 和 config ： webpack 配置文件，项目配置文件
• node_modules，这个一般在开源项目中都不存在，我们拿到项目的第一步就是 安装所有依赖 （npm install）
• src 项目的源码目录！ （Vue项目 和 js 代码）
• static 静态资源文件！
• .babelrc Babel配置文件 （ES6语法转换为 ES5语法！）
• .editorconfig 编辑器配置
• .gitignore git文件忽略配置
• .postcssrc.js css 相关的配置文件，就是导入了css的插件
• index.html 首页，所有的页面都是通过这里跳转的，实际开发是不使用这个文件的！
• package.json 项目的配置文件（名称、版本、描述、作者、依赖、启动脚本 …）

src 目标

src 就是我们编写前端项目的源目录，所有的代码都会写到这里面

main.js ，项目的主入口，所有的程序都是有一个主入口的！

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

// es6语法，导入组件和依赖！
import Vue from 'vue'    // vue 依赖
import App from './App'  // 导入组件

Vue.config.productionTip = false  // 关闭浏览器控制台关于环境的提示！

/* eslint-disable no-new */
// vue的核心对象
new Vue({
  el: '#app',  // 节点
  components: { App },  // 组件
  template: ''  // 模板
})

App.vue

标准的路由
1、在项目中安装 vue-router

npm install vue-router  --save dev

2、 就可以在模板化工程中使用它， Vue.user()

// 导入我们的路由组件
import VueRouter from 'vue-router'
// 显示的调用Vue路由
Vue.use(VueRouter);

3.测试
1、清空项目的多余内容！

2、定义我们自己的组件！

404组件配置

路由配置

// 关于404，路由会优先匹配精准的，然后匹配通用！
{
    path: '*',
    component: NotFound
}

路由模式

hash ： 路径会带 # 号

history： 不带 # 号，也就是我们常常看见的网页路由！

export default new VueRouter({
  mode: 'history', // 配置路由模式！
  // 就是我们上周讲的
  routes: []
}