/vue-learning

Vue学习笔记

MIT LicenseMIT

Vue-learning

Vue学习笔记和代码记录

安装

  • 直接引入链接：建议初学者使用；
  • 通过node.js的NPM安装Vue；
  • 通过node.js的NPM安装Vue-cli脚手架（推荐安装方式）；

基础

数据类型

  • 字符串：title: 'hello world'；
  • 数字：num:123；
  • 数组：arrow: ['apple', 'banana','orange']；
  • 对象：name: {firstName:'ming',lastName:'Li'}；
  • 布尔值：true/false；

模版数据绑定

  • {{ xxx }}：模版解析；
  • v-text：文本绑定；
  • v-model：数据双向绑定；v-model.lazy：延迟对数据进行更新；
    • v-model.number：对输入的数据字符串转为数字；
    • v-model.trim：对数据进行裁剪，去除空格等

表单数据绑定

  • checkbox：储存的数据类型是数组；
  • radio：储存的数据类型是字符串；
  • select：存储的数据类型是字符串；

标签属性

  • v-bind：标签属性绑定，属于动态绑定，可以简写为：。绑定后的属性为变量，可以是字符串，数组或者是对象；
  • v-if/v-if-else-if/v-else：条件渲染，如果成立则执行，不成立则注销；
  • v-show：同样是条件渲染，不同的是不成立是隐藏而不是注销；

事件绑定

  • 通过v-on:event="eventName"进行绑定，可简写为@:event="eventName";方法通过在methods里进行方法定义；
  • 在v-on:event.midiflyer添加修改器；
  • 自定义事件：v-on:diyEvent="eventName"，通过$emit来触发自定义事件。methods: {my-function () {this.$emit('diyEvent'), 参数}}；

计算属性和数据监听

  • 传值属性：props: ['xx','xx']。父子组件如果需要传值，必须要在props里进行定义；
  • 事件属性：methods: {}。所有事件都在这里进行定义；很多情况下在执行事件时需要取消默认事件。function(e){e.preventDefault();}；
  • 计算属性：computed: {方法 () { return 方法 }}；计算属性的优点：可以直接根据data的属性动态的更改（data中myValue的值变化会同步反映到计算属性里）（计算属性会缓存所依赖的那个值，直到那个值发生变化，否则不会重新取值）与方法调用的缺点：调用方法的时候才会更新，即使data中myValue的值没有变化，调用时依然会去重新取值。使用场景：在耗时、大量搜索的情况下使用，减少dom重复渲染的性能支出。
  • 创建属性：created:function(){}。方法不需要手动调用，直接执行。
  • 数据监听：watch: { 方法 () {}}；

应用

动态绑定class

  • v-bind:class="{red:true}"；
  • v-bind:class={changeClass:changeClass}；
  • v-bind:class={active ? true : false}

组件

命名

  • 不强制要求按照W3C规则进行命名，但最好遵循。例如：my-template;
  • 不管组件是大驼峰还是小驼峰，在模版引用的时候一律要转为中横线的命名方式。例如：组件为comName，引用时为：<com-name></com-name>；在传递属性时名称也同样。

注册

  • 全局注册：Vue.component('my-template', {template: '...'}); html：<my-template></my-template>
  • 局部注册：只在使用的场景进行注册。var myTemplate = {template: '...'}; new Vue({..., components: {'my-template: myTemplate'}})

模版解析

  • 特殊标签下的模版需要注意，比如table、ol、ul、select等标签，使用is进行挂载。例如:<table><tr is="my-tr"></tr></table>;
  • 推荐使用字符串模版：
  • <script type="text/x-template">；
  • javascript内联模版字符串；
  • vue组件；
  • 组件中的data必须是函数。

组件组合

  • 父组件通过prop进行向下传递；
  • 子组件通过事件进行发送信息，子组件触发事件，父组件进行监听；
  • 传值时要主要命名的选择和使用，使用props使用的驼峰式明显需要转变为对应的中横线式。Vue.component('my-template', {props: ['myMessage'],template: '...'}); <my-template my-message="hello"></my-template>
  • 字面量语法和动态语法；
  • slot插槽：父组件向子组件插入template模板，父子之间通过slot属性和name属性进行对应<p slot="header">我是header</p><span slot="footer">我是footer</span>；
  • 动态组件：利用 :is = "" 进行组件的动态绑定，外层可以用内置组件keep-alive 来进行缓存；

总结

  • 使用组件树设计项目，配置文件链接各个组件-命名转换，动态组件；
  • 父组件向内传递属性-动态属性；
  • 子组件向外发布事件；
  • slot插槽传递模版 - 具名slot；

高级用法

动画：使用transition 内置组件，有css过渡和js过渡两种方式。

css过渡实现原理：给动画的不同阶段加上不同的class名称。

  • 四个阶段：v-enter/v-enter-active/v-leave/v-leave-active；使用：<transition name="fade"></transition> .fade-enter/.fade-enter-active/.fade-leave/.fade-leave-active；
  • 能够接受动画的元素有：v-show/v-if/动态组件加载；
  • 通过mode="out-in"/"in-out"实现动画顺序；
  • 对于多元素模版，如果使用的是同标签名，需要使用key来进行区分；

js过渡实现原理：通过定义不同的方法来实现动画。

不同方法名：

<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled"> ... </transition>

自定义指令

  • 方法：主要有两种：局部定义和全局定义。
  • 使用：inserted和bind是指令的两个配置属性，属性值是一个函数，所以用es6语法。讲inserted函数，，然后然后回到组件，处理el表示使用了指令的元素对象，还有一个binding对象，其中binding.value表示的是使用了指令元素的指令的值，可以是json，然后借这个json（里面放着css相关信息）所包含的数据来修改dom的样式。

插件

  • vue-resource： 发送http请求
  • vue-router： 前端路由
  • 引入步骤：
    • 入口js文件 import from 插件
    • Vue.use(插件) 不过在模块环境中应当始终显式调用 Vue.use() :

相关概念

  • MVC
  • MVP
  • MVVM

相关知识点

  • Node.js
  • NPM
  • Mustache
  • ECMAscript
  • Javascript
  • Ajax

Vue全家桶

  • vue.js
  • vue-cli
  • vue-router
  • vue-axios
  • vue-lazyload

打包工具

  • Webpack
  • Gulp
  • Parcel

安装依赖

  • Css-loader
  • Sass-loader
  • Vue-style-loader
  • Superagent

踩坑

  • 在开发过程中，如果修改了配置文件，需要重新启动，否则报错；
  • 手写输入的拼写错误问题，一般会提示出来；
  • 样式文件中的拼写错误，包括属性、值、图片名称，如果找不到也会报错，一般很难找到，所以出现报错的时候一定先要解决！！
  • 使用webpack要进行loader依赖的安装；
  • proxyTable 反向代理设置；
  • 在组件中template节点下必须只有一个子节点；
  • 如果采用webpack进行打包管理，如果数据中有需要在js里引用图片地址，需要使用require()的方式进行引用，否则不会被打包到静态文件目录里；
  • 在组件使用时候先进行数据绑定；
  • 在使用属性的时候一定记得要添加作用域，比如this；
  • 在组件或者模版中使用sass或less文件，一定要在style标签上声明lang，否则报错没商量；
  • 在组件开发过程中，如果需要传参一定记得定义并且在引用的地方调用；

参考资料