vuejs入门教程 · 前端工程化指南

## 前言 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三部分组成 ~~~  <template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> </div> </template> <script> // 导入组件，注意 data必须为return返回数据；组件中导入的组件通过components导入； import Hello from './components/Hello' export default { name: 'app', components: { Hello }， data () { return { msg: '欢迎来到菜鸟教程！' } } } </script>  <style lang='less'　scope> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> ~~~ ### 模板语法 * 文本基本使用{{ msg }} * html:v-html="rawHtml" * 绑定属性 :disabled="isButtonDisabled" * 支持js表达式 ~~~ {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div> ~~~ * 指令 v-if,v-else,v-show等可以用，注意：`v-bind缩写为：，v-on缩写为@`；新增了`v-else-if`用法，支持多条件判断。 ~~~ <li v-for="book in booklist" :key="book.id"> <router-link :to="'/bookDetail/' +book.id" > {{book.id}}{{book.pubdate}}</router-link> </li> ~~~ ### 表单控制器 * 表单数据绑定 v-model ~~~ //文本框绑定 <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> ~~~ ~~~ //多个复选框用同一个名字, <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> ~~~ * 修饰符，可以对得到的数据进行控制，是否同步改变；是否转换为数字；是否去除前后空格等 ~~~  <input v-model.lazy="msg" >  <input v-model.number="age" type="number">  <input v-model.trim="msg" type="text"> ~~~ ### 事件 * @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就可以实现触发原生事件，不用通过事件的两层传递。 ~~~  <a v-on:click.stop="doThis"></a>  <form v-on:submit.prevent="onSubmit"></form>  <a v-on:click.stop.prevent="doThat"></a>  <form v-on:submit.prevent></form>  <div v-on:click.capture="doThis">...</div>  <div v-on:click.self="doThat">...</div> ~~~ * [官网事件修饰符说明](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 ~~~  <template> <div class="loading"> loading... </div> </template> ~~~ 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. 页面中直接使用 `<loading></loading>` ## 参考文档 * [vuejs菜鸟教程](http://www.runoob.com/vue2/vue-tutorial.html) * [vuejs2官网文档](https://cn.vuejs.org/v2/guide/) * [极客学院-vue教程](http://wiki.jikexueyuan.com/project/vue-js/start.html)