Since the company has recently continued to carry out learning sessions, so that developers can learn more knowledge and skills, so I wrote a tutorial on vue.js, although there are many online tutorials, but this tutorial is my personal study and The summary of experience is only for those who are learning. The main reason is that interviews are often asked, as well as some sorting of common knowledge points and skills in development. I hope that those who are in the learning stage can avoid detours and be more clear Learn useful knowledge and skills:
This tutorial is mainly divided into three stages: introductory chapter, advanced chapter and advanced chapter. Every content will be released from time to time. Of course, some other learning knowledge will be continuously updated in the later period. , Any questions and areas that need to be expanded are welcome.
1.
Introduction to
vue.js 1.1 Introduction to vue.js 1.2 Environment installation of
vue.js 1.3 Directory structure of
vue.js 1.4 Template syntax and instructions of
vue.js 1.5 Life cycle of
vue.js 1.6 Routing of vue.js
2 , Vue.js advanced chapter
2.1 vue.js custom instructions and filters
2.2 vue.js calculation properties, listeners and mixins mixed into
2.3 vue.js transition animation
2.4 vue.js props and parent-child components Communication
2.5 vue.js asynchronous update strategy and the purpose and principle of
nextTick 2.6 the use of axios in vue.js
Three, vue.js advanced chapter
3.1 vue.js component and slot
3.2 vuex state management mode
3.3 routing guard
3.4 internationalization
3.5 Expansion
Next, we will enter the learning of vue.js introductory chapter:
1.1 Introduction to vue.js
Vue (pronounced/vjuː/, similar to view) is a set of progressive javascript frameworks for building user interfaces; vue framework is an MVVM framework, that is, two-way binding of data sources and controls. In actual projects, DOM nodes are frequently operated, but only You only need to control the data source data, regardless of page rendering.
vue.js是尤雨溪在2014年2月开始发布。
为什么要使用vue.js？有什么优点或者缺点？
vue.js是目前市场上最主流的前端框架之一，他与angular和react相比开发成本更低，开发体验更好。
vue.js的优点：简洁，数据驱动，组件化，轻量，有大量已成熟的插件和依赖，能够高效便捷的进行开发。
缺点：不适于seo优化，项目报错不明显，只适用于中小型项目，不太适用于大型项目。
1.2 Environment installation of vue.js
1.安装环境：
安装node.js 在node.js官网（http://nodejs.cn）下载，npm作为node.js的模块管理并不稳定，此时我们推荐安装淘宝镜像cnpm（npm config set registry https://registry.npm.taobao.org）
安装全局脚手架 npm install --global vue-cli
2.vue.js的安装
独立版本：直接在vue.js的官网下载vue.min.js并用<script>标签引入
使用cdn方法：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
使用命令安装：npm install vue
3.创建项目：vue init webpack 项目名称，然后 cd 项目名称 npm start或npm run dev
1.3 Introduction to the directory structure of vue.js
- The build webpack project builds
2.config configuration directory, including port numbers, etc.
3.node_modules installation package directory
4.src development directory, basically everything you need to do is in this project
-----assets place pictures, icons, fonts, etc. Static resource file
-----components component file
-----app.vue project entry file
-----main.js project core file
5.static static resource directory
6. Syntax configuration, got configuration and other files
7. index.htmlHome page entry file
8.package.json Project configuration file
9.README.md project description file
1.4 template syntax and instructions of vue.js
1. Template syntax:
Vue.js uses HTML-based template syntax, allowing developers to declaratively bind the DOM to the number of the underlying Vue instance
① Interpolation expression:
{ { message }}
②v-html is used to output html
③v-bind
④vue.js supports the use of js expressions, for example:
{ { ok ? “YES” : “NO” }}
2. Instructions:
①v-if conditional rendering instruction
②v-show v-show和v-if区别。v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染
③v-else指令 v-else指令与v-if同时使用但不可以与v-show一起使用，v-if条件不成立则会显示v-else内容
④v-for指令 v-for指令基于一个数组渲染一个列表
⑤v-bind指令 v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，
这个参数通常是HTML元素的特性，v-bind可简写为“:”
例如：<p :class=”isLogo?'':'product'”></p> <p :style="{'border':hasBorder?'2px solid red':''}"></p>;
⑥v-on指令 v-on用于监听DOM事件,用法和v-bind类似，例如给button添加点击事件,v-on可简写为:“@”
例如：<button @click="show">
1.5 life cycle of vue
①BeforeCreate: After the instance is initialized, it is called before the Data Observer and event/watcher event configuration
②created:在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)、属性和方法的运算，watch/event 事件回调；然而，挂载阶段还没开始，$el 属性目前不可见
③beforeMount:在挂载开始之前被调用，相关的 render 函数首次被调用
④mounted:页面渲染完成
⑤beforeUpdate:渲染watcher依赖的变量发生变化，准备更新视图
⑥updated:视图和数据全部更新完毕
⑦beforeDestroy:注销watcher，删除DOM节点
⑧destroyed: log off all monitoring events
1.6 routing of vue.js
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用。
Vue.js + vue-router 可以很简单的实现单页应用。
<router-link> 该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。
例：<router-link to="/foo">跳转</router-link>
<router-link :to="{ path: ‘test’, query: { id: 1 }}">带参数跳转</router-link>
<router-link :to="{ path: ‘/test’}" replace></router-link>设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录
<router-link :to="{ path: /test}" append></router-link>设置 append 属性后，则在当前 (相对) 路径前添加 其路径
<router-link to="/foo" tag="li">foo</router-link>将<router-link>设置成某种标签
<router-view></router-view>路由出口，路由匹配到的组件将渲染到这里。
使用模块化机制编程，导入 Vue 和 VueRouter，需要在main.js中导入，并创建和挂载，要通过 router 配置 参数注入路由，从而让整个应用都有路由功能：
import router from './router'
const app = new Vue({
router
}).$mount('#app')