vuejs入门教程
最后更新于：2022-04-02 05:34:27
## 前言
vuejs作为单页应用的必备技术之一，对于解决大部分的单页简单应用，是比较实用而且轻量级的。那么对于vuejs的一些基础知识以及实用技巧，本篇进行了总结。
备注：vue不支持ie8等低版本浏览器。
## 目录结构
| 目录/文件| 说明 |
| --- | --- |
| build | 最终发布的代码存放位置 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等；components: 目录里面放了一个组件文件，可以不用；App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录； main.js: 项目的核心文件 |
| static | 静态资源目录，如图片、字体等 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或同统计代码啥的 |
| package.json | 项目配置文件。 |
| README.md| 项目的说明文档，markdown 格式 |
## 基本的标签语法
### 页面组成
* 页面由html,css,js三部分组成
~~~
{{book.id}}{{book.pubdate}}
~~~
### 表单控制器
* 表单数据绑定 v-model
~~~
//文本框绑定
Checked names: {{ checkedNames }} ~~~ * 修饰符，可以对得到的数据进行控制，是否同步改变；是否转换为数字；是否去除前后空格等 ~~~ ~~~ ### 事件 * @click点击事件，支持常见的所有web事件类型，参考[mdn:web事件类型](https://developer.mozilla.org/zh-CN/docs/Web/Events) 这里面有常见的click,focus,blur,mouseenter,mouseover等鼠标事件，也有键盘事件等。 * 支持基本的js语句以及方法，方法带参数等 ~~~ //js语句 @click="counter++" //js method @click="greet" //js method with arguments @click="say('hello')" ~~~ * 事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。（需要注意的是同一个事件类型才会出现冒泡） * .stop 组织事件向上冒泡，默认事件是从下到上的 * .prevent 阻止默认事件 * .capture 事件从父到子 * .self 只有元素自己触发 * .once 只触发一次 * .native 对于组件中的事件如果子组件没有定义对应的事件，但是父组件想触发原生的事件，那么加native就可以实现触发原生事件，不用通过事件的两层传递。 ~~~
';
Message is: {{ message }}
~~~ ~~~ //多个复选框用同一个名字,Checked names: {{ checkedNames }} ~~~ * 修饰符，可以对得到的数据进行控制，是否同步改变；是否转换为数字；是否去除前后空格等 ~~~ ~~~ ### 事件 * @click点击事件，支持常见的所有web事件类型，参考[mdn:web事件类型](https://developer.mozilla.org/zh-CN/docs/Web/Events) 这里面有常见的click,focus,blur,mouseenter,mouseover等鼠标事件，也有键盘事件等。 * 支持基本的js语句以及方法，方法带参数等 ~~~ //js语句 @click="counter++" //js method @click="greet" //js method with arguments @click="say('hello')" ~~~ * 事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。（需要注意的是同一个事件类型才会出现冒泡） * .stop 组织事件向上冒泡，默认事件是从下到上的 * .prevent 阻止默认事件 * .capture 事件从父到子 * .self 只有元素自己触发 * .once 只触发一次 * .native 对于组件中的事件如果子组件没有定义对应的事件，但是父组件想触发原生的事件，那么加native就可以实现触发原生事件，不用通过事件的两层传递。 ~~~
...
...
~~~
* [官网事件修饰符说明](https://cn.vuejs.org/v2/guide/events.html#事件修饰符)
* 键盘修饰符，其中回车键是最常用的
* .enter
* .tab
* .delete (捕获 “删除” 和 “退格” 键)
* .esc
* .space
* .up
* .down
* .left
* .right
* 鼠标修饰符
* .left
* .right
* .middle
### vue实例方法
### 表单校验
### 服务端通讯
## 定义自己的插件
一般情况我们都是require得到需要的文件然后直接使用，但是使用element-ui的时候我们发现除了require之外，还需要vue.use(element-ui),这个就是因为element-ui定义了自己的插件。
如果想定义自己的插件，基本步骤如下：
1. 编写自己的组件 loading.vue
~~~
loading...
~~~
2. 在index.js文件中生命install方法，执行注册组件
~~~
import MyLoading from './loading.vue'
// 这里是重点
const Loading = {
install: function(Vue){
Vue.component('loading',MyLoading)
} }
// 导出组件
export default Loading
~~~
3. main.js中配置使用loading
~~~
import Loading from '../components/loading'
Vue.use(Loading);
~~~
4. 页面中直接使用
`