VUE简述
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
安装
1. 直接从https://vuejs.org/js/vue.min.js下载vue.min.js并用<script>标签引入。
2. 联网使用CDN,如<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
https://cdn.staticfile.org/vue/2.2.2/vue.min.js国内
https://unpkg.com/vue/dist/vue.js
https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
3. NPM方法
$ npm install -g vue --registry=https://registry.npm.taobao.org
# 全局安装 vue-cli
$ cnpm install --global vue-cli // 或
$npm install -g vue-cli --registry=https://registry.npm.taobao.org
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project #配置,默认回车即可
依赖包都安装在node_modules中,编译出的可执行文件位于node_modules/.bin目录下。
目录结构
目录/文件 |
说明 |
build |
项目构建(webpack)相关代码 |
config |
配置目录,包括端口号等。我们初学可以使用默认的。 |
node_modules |
npm 加载的项目依赖模块,编译出的可执行文件位于.bin目录下。 |
src |
这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
|
static |
静态资源目录,如图片、字体等。 |
test |
初始测试目录,可删除 |
.xxxx文件 |
这些是一些配置文件,包括语法配置,git配置等。 |
index.html |
首页入口文件,你可以添加一些 meta 信息或统计代码啥的。 |
package.json |
项目配置文件。 |
README.md |
项目的说明文档,markdown 格式 |
组件
组件可以扩展HTML元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
注册一个全局组件语法格式如下:
Vue.component(tagName, options)
tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:
<tagName></tagName>
prop是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop"。
<div id="app-7"> <ol> <!-- 现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量,即其内容可以是动态的。 我们也需要为每个组件提供一个“key”,稍后再 作详细解释。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" ></todo-item> </ol> </div> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) <script> // 定义名为 todo-item 的新组件 Vue.component('todo-item', { props: ['todo'], template: '<li>{{todo.text}}</li>' }) new Vue({ el: "#app5", data: { groceryList:[ {id: 0, text: "orange"}, {id: 1, text: "apple"}, {id: 2, text: "banana"} ] } }) </script>
路由
Vue.js路由允许通过不同的URL访问不同的内容。通过vue.js可以实现多视图的单页web应用。
Vue.js 路由需要载入vue-router 库,中文文档地址:vue-router文档。
https://unpkg.com/vue-router/dist/vue-router.js cnpm install vue-router
<router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容。 to 属性为目标地址, 即要显示的内容。<router-link> 默认会被渲染成一个 `<a>`。
<div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> // 0. 如果使用模块化机制编程,导入 Vue 和 VueRouter,要调用 Vue.use(VueRouter) // 1. 定义(路由)组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器, // 或者,只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例,然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写)相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 现在,应用已经启动了!
<router-link>相关属性
to:表示目标路由的链接。当被点击后,内部会立刻把to值传到router.push(),这个值可以是一个字符串或描述目标位置的对象。
replace:调用router.replace()而不是router.push(),导航后不会留下history记录。
append:设置append属性后,则在当前(相对)路径前添加其路径。
tag:把<router-link>渲染成某种标签,例如<li>。
active-class:设置链接激活时使用的CSS类名。
exact-Active-class:配置当链接被精准匹配的时候应该激活的class。
event:声明可以用来触发导航的事件,可以是一直字符串或一个包含字符串的数组。
Webpack
参考:webpack中文文档https://www.webpackjs.com/concepts/
Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时,它会递归构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。
Webpack默认配置文件名为webpack.config.js,从webpack v4.0.0开始,可以不用引入一个配置文件。然而,webpack仍然是高度可配置的。四个核心概念:入口entry,出口output,loader,插件plugins。
entry
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。每个依赖项随即被处理,最后输出称之为bundles的文件中。可以在webpack配置中配置entry属性,来指定一个入口起点(或多个入口起点),默认值为./src。
module.exports = { entry: './path/to/my/entry/file.js' };
output
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。
const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js' }};
loader
Loader让webpack能够去处理那些非JavaScript文件(webpack自身只理解JavaScript)。Loader可以将所有类型的文件转换为webpack能够处理的有效模块,然后就可以利用webpack打包能力,对它们进行处理。本质上,webpack loader将所有类型的文件,转换为应用程序的依赖图(和最终的bundle)可以直接应用的模块。
在更高层面,在webpack的配置中loader有两个目标:
test属性,用于标识出应该被对应的loader进行转换的某个或某些文件。
use属性,标识进行转换时,应该使用哪个loader。
const path = require('path'); const config = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }}; module.exports = config;
以上配置中,对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:test 和 use。
插件
Loader被用于转换某些类型的模块,而插件可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。
想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建它的一个实例。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 const webpack = require('webpack'); // 用于访问内置插件 const config = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config;
模式
通过选择 development 或 production 之中的一个,来设置 mode 参数,可以启用相应模式下的 webpack 内置的优化。
module.exports = { mode: 'production' };
Webpack-dev-server
Webpack-dev-server启动一个使用express的Http服务器,作用为伺服(或监控)资源文件。这个HTTP服务器和client使用websocket通讯协议,原始文件作出改动后,webpack-dev-server会实时地编译,但是最后编译的文件并没有输出到目标文件(默认bundle.js),而是都保存在内存中。
--content-base用于指定伺服的directory。可通过在webpack.config.js中执行publicPATH指定base路径。
--quiet 控制台中不输出打包的信息
--compress 开启gzip压缩
--progress 显示打包的进度
应用
网页应用
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script> </body> </html>
网页显示:Hello Vue.js!
Vscode配置.vscode/launch.json:
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}", "file": "index.html" } ] }
参考: