文章目录
VUE — 开发笔记
vue_5">一、vue简介
- vue 特点
- 渐进式
- 响应式
vue_13">二、vue调试工具
-
vue-devtools
vue-devtools: 是一款基于chrome的 vue 开发工具，可以查看VUE项目的原始代码（vue标签），而不是编辑后的html标签。
参考资料：https://www.cnblogs.com/chenhuichao/p/11039427.html
vue__23">三、vue 项目搭建
vuejs_25">3.1 方式一：通过 script 引入vue.js
CDN 加载 vue.js
-
对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>请确认了解不同构建版本并在你发布的站点中使用生产环境版本，把 vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。
（开发版本包含完整的警告和调试信息；生产版本经过压缩，删除了警告信息，更小）
3.2 方式二：npm 安装
在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
vuecli__vue_57">3.3 方式三：vue-cli 创建 vue脚手架项目
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。
-
创建一个基于 webpack 模板的新项目
# 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置，默认回车即可 This will install Vue 2.x version of the template. For Vue 1.x use: vue init webpack#1.0 my-project ? Project name my-project ? Project description A Vue.js project ? Author runoob <test@runoob.com> ? Vue build standalone ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "my-project". To get started: cd my-project npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack -
安装并运行
$ cd my-project $ cnpm install $ cnpm run dev DONE Compiled successfully in 4388ms > Listening at http://localhost:8080
vue__106">3.3.1 vue 脚手架项目目录结构
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。 |
| node_modules | 存放npm install命令下载的开发环境和生产环境的各种依赖 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。 |
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。包含依赖包等信息 |
| README.md | 项目的说明文档，markdown 格式 |
vue_123">3.3.2 vue脚手架项目分析
-
main.js：
-
main.js 程序入口文件，引入App.vue文件，渲染到index.html中。初始化vue实例并使用需要的插件，加载各种公共组件
-
import from是ES6语法里面的，其实最完整的写法是：import Vue from “…/node_modules/vue/dist/vue.js”;意思是：因为main.js是在src文件中，所以…/向前一级相对目录查找node_modules，再依次寻找后面的文件。import App from ‘./App.vue’：意思其实就是引入我们写好的.vue文件。
import…from…的from命令后面可以跟很多路径格式，若只给出vue，axios这样的包名，则会自动到node_modules中加载；若给出相对路径及文件前缀，则到指定位置寻找。可以加载各种各样的文件：.js、.vue、.less等等；可以省略掉from直接引入。
-
-
App.vue：
vue__151">四、vue 基础语法
vue__153">1. vue 实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的， 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
var vm = new Vue({
// 选项
})
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>
{{a}}
</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {a: 'HelloWorld'},
methods: {},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
this.a = 'test'
}
})
</script>
</html>
vue__200">2. vue 生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
-
生命周期钩子函数：
生命周期钩子函数 解释 beforeCreate create beforeMount mounted beforeUpdate updated beforedestory destoryed
vue__224">3. vue 模板语法
3.1 插值
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。（所以vue的运行速度会更快）
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。
- 数据绑定
数据绑定最常见的形式就是使用Mustache语法 (双大括号) 的文本插值：<span>Message: {{ msg }}</span>
3.2 指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
例子：
<p v-if="seen">现在你看到我了</p>
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除
元素。
3.3 样式绑定
v-bind用于绑定数据和元素属性，
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
3.4 事件绑定
v-on用于绑定事件的
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
-
参考资料
https://www.cnblogs.com/yanghuiting/p/11348633.html
https://segmentfault.com/a/1190000004012600
vue__296">五、vue 组件
-
概念
组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用。
以不同的组件，来划分不同的功能模块，将来我们需要什么功能，就可以去调用对应的组件即可 -
单文件组件模板
<template> </template> <script> export default { name: "test" } </script> <style scoped> </style> -
使用
组件使用分为两步，第一步注册组件，第二步使用组件。-
注册： 分为注册全局组件和局部组件
-
全局组件注册：
所有实例都能用全局组件。注册一个全局组件语法格式如下：
Vue.component(tagName, options) tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件： <tagName></tagName> 例子： // Component 组件的创建 // extend是注册组件函数，他返回一个对象 var comobj = Vue.extend({ template: "<h1>我是全局组件</h1>" }) // component函数提交组件，第一个参数为组件的名称，第二个参数是一个注册组件的对象 Vue.component("login", comobj) -
局部组件注册：
我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
<script> var Child = { template: '<h1>自定义组件!</h1>' } // 创建根实例 new Vue({ el: '#app', components: { // <runoob> 将只在父模板可用 'runoob': Child } }) </script>
-
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。 <my-component-name> 和 <MyComponentName> 都是可接受的。 注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。-
使用：
-
组件的引用可以使用组件的名字直接引用 也可以使用Vue给我们提供的的元素，
如：<login></login> -
Vue 提供了component，来展示对应名称的组件
component是一个占位符，:is属性可以用来指定要展示的组件名称。
<compnent :is="login" ></component>
-
-
-
完整demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div class="app">
<!-- 引用组件的名称 -->
<login></login>
<login2></login2>
<login3></login3>
<hr>
<login6></login6>
</div>
<!-- 注意 这里的id是必须的，不要在实例控制中的divcalss app 中去写template -->
<template id="login3">
<div>
<h2>我是第三种方式创建出来的</h2>
</div>
</template>
<!-- Vue实例 -->
<script>
// Component 组件的创建
// 注意 template 中的容器 只能有一个父元素，不能包含两个 你可以用一个div包裹
// 第一种创建全局组件
// extend是注册组件函数，他返回一个对象
var comobj = Vue.extend({
template: "<h1>我是全局组件</h1>"
})
// component函数提交组件，第一个参数为组件的名称，第二个参数是一个注册组件的对象
Vue.component("login", comobj)
// 第二种创建方式
// component 中直接写上一个模板对象
Vue.component('login2', {template: '<h1>我是第二种v创建出来的组件</h1>'});
// 第三种创建的方式 首先在元素中创建一个template模板
Vue.component('login3', {template: '#login3'})
var vm = new Vue({
el: '.app',
data: {},
// 定义局部组件 和全局差不多 组件名称和对象，也可以使用template模板来创建
components: {
login6: {template: '#login3'}
}
})
</script>
</body>
</html>
vue_458">六、vue路由
vue_460">6.1 vue界面跳转
-
路由配置：
/* router.js 文件*/ import Vue from "vue"; import Router from "vue-router"; import MediaSecond from "@/views/EnterprisePage/MediaMatrix/second"; //资讯列表 Vue.use(Router); export default new Router({ routes: [ /* 进行路由配置 */ { name: "MediaSecond", path: "/MediaSecond", component: MediaSecond }, ]vue路由配置，本质上其实是在组件上加了name和path属性，通过name和path来进行组件切换，即达到路由的切换。
不管是使用name还是path，最后都是对 component 组件进行操作，明白这一点，vue组件便很容易理解了。
下面是几种路由切换的方式。 -
方式：
-
router-link：
<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。`<router-link :to="{name:'test'}"><h2>Ecosystem</h2></router-link>` -
this.$router.push() , push中可以是对象，也可以是字符串：
this.$router.push('/home') this.$router.push({name:'home'}) this.$router.push({path:'/home'}) -
this.$router.replace() (用法同push)
-
this.$router.go(n)
参考资料：https://www.cnblogs.com/miluluyo/p/11190648.html
6.2 路由嵌套
路由嵌套了，也可以说是子路由的使用
-
Vue.js + vue-router 可以很简单的实现单页应用
<router-link>是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。to 属性为目标地址， 即要显示的内容。
以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <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> -
完整demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> </head> <body> <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> <script> // 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') // 现在，应用已经启动了！ </script> </body> </html>
6.2 权限路由
可暂不用学习
-
参考资料
https://segmentfault.com/a/1190000015451081
vue_623">七、vue网络请求
-
axios
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
-
GET请求
new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('https://www.runoob.com/try/ajax/json_demo.json') .then(response => (this.info = response)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }) -
传参说明
以GET请求为例：
// 直接在 URL 上添加参数 ID=12345 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 设置参数： axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); -
完整demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> </head> <body> <div id="app"> <h1>网站列表</h1> <div v-for="site in info" > {{ site.name }} </div> </div> <script type = "text/javascript"> new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('https://www.runoob.com/try/ajax/json_demo.json') .then(response => (this.info = response.data.sites)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }) </script> </body> </html>
八、零碎知识点
-
vue路径写法：./和@/ 的区别
@指代的路径：
module.exports = { context: path.resolve(__dirname, './'), resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'config': resolve('config'), '@': resolve('src'), '@views': resolve('src/views'), '@comp': resolve('src/components'), '@core': resolve('src/core'), '@utils': resolve('src/utils'), '@entry': resolve('src/entry'), '@router': resolve('src/router'), '@store': resolve('src/store') } }, }https://blog.csdn.net/return_js/article/details/95217304
-
export：
-
export与export default均可用于导出常量、函数、文件、模块等
-
你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
-
在一个文件或模块中，export、import可以有多个，export default仅有一个
-
通过export方式导出，在导入时要加{ }，export default则不需要
var name="李四"; export { name } //import { name } from "/.a.js" 可以写成： var name="李四"; export default name //import name from "/.a.js" 这里name不需要大括号参考资料：
https://blog.csdn.net/harry5508/article/details/84025146
-
-
pacakge.json，package-lock.json文件
1. 文件作用区别：- package.json：主要用来定义项目中需要依赖的包
- package-lock.json：是在
npm install时候生成一份文件，用来记录当前状态下实际安装的各个npm package的具体来源和版本号。
2. 文件使用：
- package.json：例如：
这里面的 向上标号^是定义了向后（新）兼容依赖，指如果 types/node的版本是超过8.0.33，并在大版本号（8）上相同，就允许下载最新版本的 types/node库包，例如实际上可能运行npm install时候下载的具体版本是8.0.35。"dependencies": { "@types/node": "^8.0.33", },
缺点： package.json下到的各依赖库包版本可能有所不同，其依赖库包行为特征也不同有时候甚至完全不兼容。
因此npm最新的版本就开始提供自动生成package-lock.json功能，为的是让开发者知道只要你保存了源文件，到一个新的机器上、或者新的下载源，只要按照这个package-lock.json所标示的具体版本下载依赖库包，就能确保所有库包与你上次安装的完全一样。
3. 总结：
- package.json文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，你每次npm install都是拉取的该大版本下的最新的版本，为了稳定性考虑我们几乎是不敢随意升级依赖包的，这将导致多出来很多工作量，测试/适配等，所以package-lock.json文件出来了，当你每次安装一个依赖的时候就锁定在你安装的这个版本。
- 那如果我们安装时的包有bug，后面需要更新怎么办？
以前：在以前可能就是直接改package.json里面的版本，然后再npm install了。
现在：但是5版本后就不支持这样做了，因为版本已经锁定在package-lock.json里了，所以我们只能npm install xxx@x.x.x 这样去更新我们的依赖，然后package-lock.json也能随之更新。
所以在协作开发时，这两个文件如果有更新，你的开发环境应该npm install一下才对。
参考资料：[https://www.cnblogs.com/wangweizhang/p/10530294.html](https://www.cnblogs.com/wangweizhang/p/10530294.html)
-
yarn.locak文件：
1. Yarn 是一个快速可靠安全的依赖管理工具：
主要的三个特点：- 极其快速，Yarn会缓存它下载的每个包，所以无需重复下载。它还能并行化操作以最大化资源利用率。
- 特别安全，Yarn会在每个安装包被执行前校验其完整性
- 超级可靠， Yarn使用格式详尽而又简洁的lockfile文件和确定性算法来安装依赖，能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上。
2. yarn.lock文件：
官网翻译如下：- 由Yarn管理
您的yarn.lock文件是自动生成的，也完全Yarn来处理。当你使用Yarn CLI添加/升级/删除 依赖项的时，它将自动更新到您的yarn.lock文件。不要直接编辑这个文件，因为很容易破坏某些东西。 - 仅限当前包
在安装期间，Yarn将仅使用顶级yarn.lock文件，并将忽略依赖项中存在的任何yarn.lock文件。顶级yarn.lock文件包含Yarn需要锁定整个依赖关系树中所有包的版本的所有内容。
-
vue - $：
除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === document.getElementById('example') // => true // $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 })
-
vm.$refs：
例子：<div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div> <script> new Vue({ el: "#app", methods:{ add:function(){ this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗 } } }) </script>通俗理解：
用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后 r e f s 里 面 调 用 就 行 。 然 后 在 j a v a s c r i p t 里 面 这 样 调 用 ： t h i s . refs里面调用就行。 然后在javascript里面这样调用：this. refs里面调用就行。然后在javascript里面这样调用：this.refs.input1 这样就可以减少获取dom节点的消耗了
-
import from：
import from是ES6语法里面的，其实最完整的写法是：
import Vue from "../node_modules/vue/dist/vue.js";import App from './App.vue'：意思其实就是引入我们写好的.vue文件。import…from…的from命令后面可以跟很多路径格式：
