Vue基础-03

<!– /TOC –>

Vue组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

Vue组件的创建

vue.extend结合vue.component创建

Vue基础-03

vue.component创建

Vue基础-03

template方式创建

Vue基础-03

组件中的指令以及事件绑定

Vue基础-03

父子组件创建

Vue基础-03

父子组件通信

父组件传值给子组件(props)

Vue基础-03
Vue基础-03

子组件传值给父组件($emit)

Vue基础-03
Vue基础-03

利用component组件和is属性实现动态组件

Vue基础-03
Vue基础-03

vue-router(路由)

vue-router文档

在一个系统中会由很多页面组成,在Vue开发中这些页面通常使用的是Vue中的组件来实现的,那么当在一个页面要跳转到另外一个页面的时候是通过改变url路径来实现的,那么这个时候Vue需要知道当前url对应的是哪个组件页面,这个控制着就是vue-router接下来,学习vue-router的相关写法,注意的是:vue-router 在vue2.0版本中做了很大的改动,所以要注意Vue的版本来选择预期对应的vue-router版本我们主讲vue-router2的使用

vue-router入门

Vue基础-03
Vue基础-03

vur-router传参

Vue基础-03
Vue基础-03

vue-router嵌套

Vue基础-03
Vue基础-03

webpack

什么是webpack

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler),分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

Vue基础-03

为什么需要webpack

现在的前端,越来越复杂,特别是SPA(single page web application)流行之后,一个应用程序往往会依赖很多其他的模块,或者编译scss、less、stylus等,如果仅仅是靠人来管理是不可能的,这个时候我们必须依赖于webpack来解决。

现在最流行的三个SPA的框架,都于webpack紧密相连。

  • React.js + webpack
  • Vue.js + webpack
  • Angular.js + webpack

学习webpack有4个重点内容:

  • 入口(entry)
  • 输出(output)
  • 加载器(loader)
  • 插件(plugins)

webpack安装

npm install webpack@3.11.0 -g

建议大家这样操作(随时切换镜像源):

  1. npm install nrm -g
  2. nrm ls
  3. nrm use taobao

使用webpack

01-webpack-cli

使用命令:webpack 输入文件路径 打包后文件路径将一个文件打包成另外一个文件

02-webpack-config

  1. 配置webpack.config.js
  var path = require('path')

 module.exports = {
   // 入口文件配置
   entry: "./src/app.js",

   // 出口文件配置项
   output: {
     // 输出的路径,通常到绝对路径
     path: path.join(__dirname, 'dist'),
     // 输出文件名字
     filename: "bundle.js"
  }
}
  1. 运行webpack

03-webpack-dev-server

  var path = require('path')

 module.exports = {
   // 入口文件配置
   entry: "./src/app.js",

   // 输出配置
   output: {
     // 输出的路径
     path: path.join(__dirname, 'dist'),
     // 静态资源在服务器上运行时的访问路径,可以直接http://localhost:8080/dist/bundle.js访问到服务器中的bundl.js文件
     publicPath: '/dist',
     // 输出文件名字
     filename: "bundle.js"
  }
}
  1. 安装:npm install webpack-dev-server -g
  2. 使用:webpack-dev-server --inline

04-webpack-css

05-webpack-less&webpack-sass

  1. 安装npm install less less-loader --save-dev
  2. 安装npm install sass-loader node-sass --save-dev
  3. 使用npm run dev

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏支持