共计 19263 个字符，预计需要花费 49 分钟才能阅读完成。

    
    





    {{message}}

    
        鼠标悬停几秒钟查看此处动态绑定的提示信息！

    
A
    
B
    
C
    
D

    

        {{item.message}}--{{index}}
    

    Click Me

    输入的文本 : {{message}}
    

    性别 :
     男
     女
    

        选中了 : {{xingbie}}
    
    

    下拉框:
    
        -- 请选择 --
        A
        B
        C
    
     value : {{xialakuang}}

{
  "name": "博客园",
  "url": "https://www.cnblogs.com/",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://bilibili.com"
    },
    {
      "name": "博客园",
      "url": "https://www.cnblogs.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

    
    
    
    



    
{{info.name}}
    
{{info.address.street}}
    {{info.name}}链接

    
currentTime1:{{currentTime1()}}
    
currentTime2:{{currentTime2}}

• Study Java

‘
});

第二步：我们需要让待办事项的标题和值实现动态绑定，怎么做呢？我们可以留出一个插槽！

1、将上面的代码留出一个插槽，即 slot

 Vue.component('todo',{template:'

                      
                      

                          
                      
                  
'
    });

2、定义一个名为 todo-title 的待办标题组件和 todo-items 的待办内容组件

Vue.component('todo-title',{props:['title'],
        template:'
{{title}}
'
    });
   
// 这里的 index，就是数组的下标，使用 for 循环遍历的时候，可以循环出来！Vue.component("todo-items",{props:["item","index"],
    template:"
{{index+1}},{{item}}
"
});

3、slot 通过 name 和组件绑定

 Vue.component('todo',{template:'

                
                

                    
                
            
'
    });

4、实例化 Vue 并初始化数据

 var vm = new Vue({
        el:"#vue",
        data:{todoItems:['test1','test2','test3']
        }
    });

5、将数据通过插槽插入预留出来的位置

完整代码

注意：v-for=”item in todoItems” :item，“:”后不能有空格，否则页面无内容控制台也不会报错。并且方法需要使用 methods 而不是 method。

7、自定义事件内容分发

通过上诉代码我们可以发现一个问题，如果删除操作要在组件中完成，那么组件如何删除 Vue 实例中的数据？

删除按钮是在组件中的，点击删除按钮删除对应的数据。

阅读 Vue 教程可知，此时就涉及到参数传递与事件分发了，Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题；组件中使用 this.$emit(‘自定义事件名’，参数)，而在视图层通过自定义事件绑定 Vue 中的删除操作的方法

步骤：

• 在 Vue 实例中定义一个删除操作的方法 removeItems()

methods: {removeItems: function (index) {this.todoItems.splice(index,1);
	}
}

说明: splice(index,n) 方法是删除 index 下标开始的 n 个元素

• 在视图层中自定义事件并绑定 Vue 实例中的方法

自定义事件为 remove，通过 v -on 绑定 removeItems 方法

• 在相应的组件中绑定自定义事件

Vue.component("todo-items",{props:["item","index"],
    template:"
{{item}}---{{index}}删除
",
    methods: {remove: function (index) {this.$emit('remove',index);
        }
    }
});

完整代码如下

逻辑理解

8、Vue 入门小结

核心：数据驱动，组件化

优点：借鉴了 AngularJS 的模块化开发和 React 的虚拟 Dom，虚拟 Dom 就是把 Demo 操作放到内存中执行；

常用的属性：

• v-if
• v-else-if
• v-else
• v-for
• v-on 绑定事件，简写 @
• v-model 数据双向绑定
• v-bind 给组件绑定参数，简写：

组件化：

• 组合组件 slot 插槽
• 组件内部绑定事件需要使用到 this.$emit(“事件名”, 参数);
• 计算属性的特色，缓存计算数据

遵循 SoC 关注度分离原则，Vue 是纯粹的视图框架，并不包含，比如 Ajax 之类的通信功能，为了解决通信问题，我们需要使用 Axios 框架做异步通信；

说明：Vue 的开发都是要基于 NodeJS, 实际开发采用 vue-cli 脚手架开发，vue-router 路由，vuex 做状态管理；Vue UI，界面我们一般使用 ElementUI（饿了么出品），或者 ICE（阿里巴巴出品）来快速搭建前端项目。

官网：

• https://element.eleme.cn/#/zh-CN
• https://ice.work/

9、Vue：第一个 vue-cli 项目

什么是 vue-cli

vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板：

预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速：

主要的功能

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

需要的环境

• Node.js : http://nodejs.cn/download/

安装的时候一直下一步直到结束，安装在自己的环境目录下。

• Git：https://git-scm.com/downloads

镜像：https://npm.taobao.org/mirrors/git-for-windows/

确认 node.js 是否安装成功：

• 在 cmd 中运行 node - v 命令，查看是否能够输出版本号
• 在 cmd 中运行 npm - v 命令，查看是否能够输出版本号

这个 npm，就是一个软件包管理工具，就和 linux 下的 apt 软件安装差不多！

安装 Node.js 淘宝镜像加速器（cnpm）

这样子的话，下载会快很多~

# 安装 node.js 淘宝镜像加速器（cnpm）# -g 就是全局安装
npm install cnpm -g
# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 安装 vue-cli
cnpm install vue-cli-g
#测试是否安装成功 #查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
vue list

安装过程可能有点慢，耐心等待。虽然安装了 cnpm，但是尽量少用！

安装的位置（隐藏目录打开）：C:UsersAdministratorAppDataRoamingnpm

9.1、本机安装 vue-cli 步骤

通过 Node 下载安装

npm get registry 展示默认的源

更改镜像为国内镜像 npm config set registry http://registry.npm.taobao.org/

安装 cnpm: npm install cnpm -g

安装 vue : cnpm install vue

安装 vue-cli : cnpm install –global vue-cli

测试是否安装成功 #查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack

vue list

9.2、第一个 vue-cli 程序

创建一个项目（在项目目录下进入 cmd 模式）

vue init webpack myvue

进入对应项目目录下 输入命令 npm install 安装依赖包

运行项目 npm run dev

Npm run build 打包压缩，会用到的命令

Project name：项目名称，默认回车即可

Project description：项目描述，默认回车即可

Author：项目作者，默认回车即可

Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）

Use ESLint to lint your code: 是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添加)

Set up unit tests: 单元测试相关，选择 n 不安装（后期需要再手动添加）

Setupe2etests with Nightwatch：单元测试相关，选择 n 不安装（后期需要再手动添加）

Should we run npm install for you after the,project has been created: 创建完成后直接初始化，选择 n，我们手动执行；运行结果

初始化并运行

cd myvue
npm install
npm run dev

停止使用 Ctrl+C，点击 y 确定

将 IDEA 设置为管理员身份运行即可在 IDEA 的终端（Terminal）运行命令。（需要重启 IDEA）

10、webpack 使用

10.1、安装配置 webpack

安装

# 安装
npm install webpack -g
npm install webpack-cli -g

# 测试是否安装成功
webpack -v
webpack-cli -v

配置

创建 webpack.config.js 配置文件

• entry：入口文件，指定 Web Pack 用哪个文件作为项目的入口
• output：输出，指定 WebPack 把处理完成的文件放置到指定路径
• module：模块，用于处理各种类型的文件
• plugins：插件，如：热更新、代码重用等
• resolve：设置路径指向
• watch：监听，用于设置文件改动后直接打包

module.exports = {
	entry:"",
	output:{
		path:"",
		filename:""
	},
	module:{
		loaders:[{test:/.js$/,;loade:""}
		]
	},
	plugins:{},
	resolve:{},
	watch:true
}

直接运行 webpack 命令打包

10.2、使用 webpack

在 workspace 中创建文件夹 webpack-study，然后用 IDEA 打开

• 创建一个名为 modules 的目录，用于放置 JS 模块等资源文件
• 在 modules 下创建模块文件 hello.js

// 暴露一个方法
exports.sayHi = function () {document.write("
狂神说 ES6
");
};

• 在 modules 下创建一个名为 main.js 的入口文件 main.js，用于打包时设置 entry 属性

//require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();

• 在项目目录下创建 webpack.config.js 配置文件，使用 webpack 命令打包

module.exports = {
   entry:"./modules/main.js",
    output:{filename:"./js/bundle.js"}
};

说明：打包如果失败，就需要使用管理员权限运行 webpack

• 在项目目录下创建 HTML 页面，如 index.html，导入 webpack 打包后的 JS 文件

注：

# 参数 --watch 用于监听变化, 如果要打包的东西有变化，就重新打包
webpack --watch

11、Vue：vue-router 路由

说明：学习的时候，尽量打开官方的文档

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

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

安装

基于第一个 vue-cli 进行测试学习；先查看 node_modules 中是否存在 vue-router

vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。代开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

测试路由

• 删除第一个 vue-cli 项目中的没用的东西
• components 目录下存放我们自己编写的组件
• 定义几个自己的组件 Content.vue、Main.vue

Content.vue

Main.vue

• 安装路由，在 src 目录下，新建一个文件夹：router，专门存放路由，配置路由 index.js

import Vue from 'vue'
import Router from 'vue-router'
import Content from '../components/Content'
import Main from '../components/Main'
// 安装路由
Vue.use(Router);

// 配置导出路由
export default new Router({
  routes:[
    {
      // 路由路径 @RequestMapping
      path:'/content',
      // 路由名称
      name:'content',
      // 跳转的组件
      component:Content
    },
    {
      // 路由路径
      path:'/main',
      name:'main',
      // 跳转的组件
      component:Main
    }
  ]
});

• 在 main.js 中配置路由

import Vue from 'vue'
import App from './App'
import router from './router'// 自动扫描里面的路由配置
Vue.config.productionTip = false

new Vue({
  el: '#app',
  // 配置路由
  router,
  components: {App},
  template: ''
})

• 在 App.vue 中使用路由

• 运行 npm run dev, 然后浏览器访问 localhost:8080
• 运行错误分析

问题所在和解决

vue-router 版本太高和 vue2 起冲突了, 虽然 router4.X 的大部分的 Vue Router API 都没有变化, 但 vue-router 3.x 只能结合 vue2 进行使用~(网上查的说法, 我翻了下 router 官方文档没找到这样的

解决也很简单：** 卸载 4 版本的 router,@指定版本装 3.x 的 vue-router 即可，我按自己的习惯安装 3.5.2 的 vue-router 亲测可用~** 命令如下

npm uninstall vue-router
npm i vue-router@3.5.2

12、Vue + ElementUI

Element-UI 网址：Element – The world’s most popular Vue UI framework

12.1、创建工程

注意：命令行都要使用管理员模式运行

1、创建一个名为 hello-vue 的工程 vue init webpack hello-vue

2、安装依赖，我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件

# 进入工程目录
cd hello-vue
#安装 vue-routern 
npm install vue-router --save-dev
#安装 element-ui
npm i element-ui -S
#安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
#启功测试
npm run dev

12.2、创建登录页面

• 先把删除没用的文件
• 项目结构如下

说明：

• assets：用于存放资源文件
• components：用于存放 Vue 功能组件
• views：用于存放 Vue 视图组件
• router：用于存放 vue-router 配置

• 在 views 目录下创建首页视图 Main.vue 组件

• 在 views 目录下创建登录页面视图 Login.vue 组件

• 在 router 目录下创建一个名为 index.js 的 vue-router 路由配置文件

// 导入 vue
import Vue from 'vue';
import VueRouter from 'vue-router';
// 导入组件
import Main from "../views/Main";
import Login from "../views/Login";
// 使用
Vue.use(VueRouter);
// 导出
export default new VueRouter({
  routes: [
    {
      // 登录页
      path: '/main',
      component: Main
    },
    // 首页
    {
      path: '/login',
      component: Login
    },
  ]

})

• 在 main.js 中配置路由

import Vue from 'vue'
import App from './App'
import router from "./router"

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

Vue.config.productionTip = false

Vue.use(router)
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render:h=>h(App)
})

版本太高导致出错

调整之后，运行 npm install 重新导入，如果还不行 cnpm install 一下

本次运行错误

1、首先在 IDE 中找的 package.json 文件：

2.、然后打开该文件找到“sass-loader”，修改版本即可，这里修改成 4.0.0：

3、在（终端）中先输入：ctrl+ c 在点 yes 终止运行

4、在（终端）中先输入：npm install 如果未成功在输入 cnpm install

5、仍然出错

问题所在和解决

:vue-router 版本太高和 vue2 起冲突了, 虽然 router4.X 的大部分的 Vue Router API 都没有变化, 但 vue-router 3.x 只能结合 vue2 进行使用~(网上查的说法, 我翻了下 router 官方文档没找到这样的

解决也很简单：** 卸载 4 版本的 router,@指定版本装 3.x 的 vue-router 即可，我按自己的习惯安装 3.5.2 的 vue-router 亲测可用~** 命令如下

npm uninstall vue-router
npm i vue-router@3.5.2

运行成功

13、路由嵌套

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成

• 创建用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件

• 在用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件

• 修改首页视图，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件

• 添加了组件，去 router 修改配置文件

// 导入 vue
import Vue from 'vue';
import VueRouter from 'vue-router';
// 导入组件
import Main from "../views/Main";
import Login from "../views/Login";
// 导入子模块
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

// 使用
Vue.use(VueRouter);
// 导出
export default new VueRouter({
  routes: [
    {
      // 登录页
      path: '/main',
      component: Main,
      //  写入子模块
      children: [
        {
          path: '/user/profile',
          component: UserProfile,
        }, {
          path: '/user/list',
          component: UserList,
        },
      ]
    },
    // 首页
    {
      path: '/login',
      component: Login

    },
  ]
})

14、参数传递和重定向

14.1、参数传递

方法一

• 修改路由配置, 主要是 router 下的 index.js 中的 path 属性中增加了 :id 这样的占位符

{
	path: '/user/profile/:id', 
	name:'UserProfile', 
	component: UserProfile
}

个人信息

说明：此时我们在 Main.vue 中的 route-link 位置处 to 改为了 :to，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径

说明：所有的元素必须在根节点下面，否则会报错

方法二 : 使用 props 减少耦合

• 修改路由配置 , 主要在 router 下的 index.js 中的路由属性中增加了 props: true 属性

{
	path: '/user/profile/:id', 
	name:'UserProfile', 
	component: UserProfile, 
	props: true
}

• 传递参数和之前一样
• 在 Profile.vue 接收参数为目标组件增加 props 属性

14.2、重定向

Vue 中的重定向是作用在路径不同但组件相同的情况

• 在 router/index.js 配置重定向路径

{
  path: '/main',
  name: 'Main',
  component: Main
},
{
  path: '/goHome',
  redirect: '/main'
}

    
    返回首页

15、路由模式、404 和路由钩子

15.1、路由模式

路由模式有两种

• hash：路径带 # 符号，如 http://localhost/#/login
• history：路径不带 # 符号，如 http://localhost/login

修改路由配置

export default new Router({
  mode:'history',
  routes:[])}

在路由的配置中修改

15.2、404 页面

• 在 views 目录下创建一个 NotFound.vue 视图

• 修改路由配置 index.js

import NotFound from '../views/NotFound'
{
   path: '*',
   component: NotFound
}

15.3、路由钩子

除了之前的钩子函数还存在两个钩子函数

beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行

参数说明：

to：路由将要跳转的路径信息

from：路径跳转前的路径信息

next：路由的控制参数

next() 跳入下一个页面

next(‘/path’) 改变路由的跳转方向，使其跳到另一个路由

next(false) 返回原来的页面

next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

• 在钩子函数中进行异步请求

cnpm install --save vue-axios

注意：如果 cnpm 失败，就使用 npm 再试一次。

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

{
  "name": "cv 战士",
  "url": "https://blog.csdn.net/qq_45408390?spm=1001.2101.3001.5343",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://bilibili.com"
    },
    {
      "name": "cv 战士",
      "url": "https://blog.csdn.net/qq_45408390?spm=1001.2101.3001.5343"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

说明：只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下

• 在 beforeRouteEnter 中进行异步请求

原文地址: 一文速通 Vue 基础