Vue学习笔记

一.基础语法

插值操作

• Mustache语法(也就是双大括号)
• v-once:该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)，该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着 数据的改变而改变。
• v-html=" "该指令后面往往会跟上一个string类型(变量）,会将string的html解析出来并且进行渲染
• v-text=" "作用和Mustache比较相似：都是用于将数据显示在界面中，v-text通常情况下，接受一个string类型
• v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
• v-cloak:在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。设置了v-cloak后当浏览器编译完成后会自动移除v-cloak属性，所以可以通过设置css[v-cloak] { display: none !important;}来实现当未编译时隐藏，编译完后展示，注意要加！important，否则可能会被其他更高级的样式覆盖。

绑定属性（专门用来绑定属性）

• v-bind：属性名 =" " 语法糖 ：属性名=" "
• v-bind绑定class的两种方式：在写CSS属性名的时候，比如font-size，我们可以使用驼峰式 (camelCase) fontSize ,或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

计算属性computed

在模板中可以直接通过插值语法显示一些data中的数据,但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示,每个计算属性都包含一个getter和一个setter。

methods和computed看起来都可以实现我们的功能，那么为什么还要多一个计算属性这个东西呢？原因：
计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

事件监听（专门绑定事件）

v-on:绑定事件监听器=" " 语法糖 @绑定事件监听器=" "
   修饰符：

• .stop - 调用 event.stopPropagation()。阻止相同的事件向上和向下传播
• .prevent - 调用 event.preventDefault()。阻止事件的默认操作
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。Vue组件最终都会编译成普通的html标签，如果我们直接在组件上定义一个click事件，这样是不起作用，加了.native之后会将定义在组件上的事件放在编译后的组件根元素上
• .once - 只触发一次回调

事件传递参数

事件传递参数主要有以下几种情况

fn (e, value) {
	console.log(e)
	console.log(value)
}

1. @click=“fn” ======事件对象 undifined
2. @click=“fn($event)” ======事件对象 undifined
3. @click=“fn()” ======undifined undifined
4. @click=“fn($event, ‘hellow’)” ======事件对象 hellow
5. @click=“fn(argument)” ======事件数组 undifined

条件判断

1. v-if、v-else-if、v-else
2. v-if和v-show对比,v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
   v-if当条件为false时，压根不会有对应的元素在DOM 中。
   v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
3. 开发中如何选择呢？
   当需要在显示与隐藏之间切片很频繁时，使用v-show，当只有一次切换时，通过使用v-if

循环遍历v-for

v-for=“item in 对象|数组”，官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。

v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定。v-model其实是一个语法糖，它的背后本质上是包含两个操作：

1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件

修饰符：

• lazy修饰符：
  默认情况下，v-model默认是在input事件中同步输入框的数据的。也就是说，一旦有数据发生改变对应的data中的数据 就会自动发生改变。lazy修饰符可以让数据在失去焦点或者回车时才会更新

• number修饰符：
  默认情况下，在输入框中无论我们输入的是字母还 是数字，都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。number修饰符可以让在输入框中输入的内容自动转成数字类型

• trim修饰符：
  如果输入的内容首尾有很多空格，通常我们希望将其去除，trim修饰符可以过滤内容左右两边的空格

二.组件开发

认识组件化

我们将一个完整的页面分成很多个组件。每个组件都用于实现页面的一个功能块。而每一个组件又可以进行细分。组件化是Vue.js中的重要思 想。它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树。

注册组件

创建组件
最原始的注册方式，现在基本不会用了

const 组件名 = Vue.extend({
    template（模板）: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容, 哈哈哈哈</p>
        <p>我是内容, 呵呵呵呵</p>
      </div>
      `})

构造器
注册组件
在Vue实例外注册组件，是全局组件，能在所用Vue实例里进行使用
Vue.component(‘my-cpn’, cpnC)
语法糖：

Vue.component('cpn1', {
    template: `
      <div>
        <h2>我是标题1</h2>
        <p>我是内容, 哈哈哈哈</p>
      </div>
    `，
	components：{
	这里定义另一个组件
	}
  })

在某一个Vue实例里面组成主键，是局部组件，只能在该Vue实例里面才能使用

const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      // cpn使用组件时的标签名
      cpn: cpnC
    }
  })
语法糖：
const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      'cpn2': {
        template: `
          <div>
            <h2>我是标题2</h2>
            <p>我是内容, 呵呵呵</p>
          </div>
    `
      }
    }
  })

组件其他补充

模板分离写法: 使用template标签在script标签外定义组件的内容，然后通过template标签的id在注册组件的时候与template变量对应起来

Vue.component('cpn', {
    template: '#cpn'
  })

组件数据存放

实际上Vue实例与组件的注册并没有多大差别，在组件注册的时候一样可以定义数据，方法，不过组件内的data属性需要使用类似于方法的形式，返回一个对象，将需要用到的数据存放到对象里

父子组件通信

真实的开发中，Vue实例和子组件的通信和父组件和子组件的通信过程是一样的。
父级向子级传递：

1. 父组件有数据data
2. 子组件的实例需要添加一个props对象，对象里定义与父组件相对应的字段cdata，：后面可以指定数据类型，也可以以一个对象的形式添加
   多种约束条件
3. 在父组件使用子组件的时候通过v-bind：cdata = "data"将父组件的数据绑定到子组件中
   

子级向父级传递：

1. 在子组件template模板中绑定一个事件，编写对应的事件函数，在函数中使用$emit(标识名，发送的数据）方法向父组件发送请求
2. 在父组件的template模板中使用子组件的标签，并通过@标识名=“父组件的事件方法”
3. 进行父组件事件方法的实现，通过参数将子组件传过来的参数接受

父子组件的访问方式：

1. 父组件访问子组件：使用$children或$refs reference(引用)
2. 子组件访问父组件：使用$parent

插槽slot

插槽是为了解决某一组件在不同地方具体diy的，就是可能在不同的地方需要使用到一个类似的组件，这时候就可以抽取共性，保留不同，不同的部分就定义一个插槽slot，然后根据具体情况编写这插槽，在子组件中，使用特殊的元素就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。

具名插槽

当子组件的功能复杂时，子组件的插槽可能并非是一个。比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？这个时候，我们就需要给插槽起一个名字

1. 如何使用具名插槽呢？
   非常简单，只要给slot元素一个name属性即可<slot name='myslot'></slot>
   
   

编译作用域

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

三.前端模块化

协作开发，不同人写的东西可能会出现全局变量同名问题，另外，这种代码的编写方式对js文件的依赖顺序几乎是强制性的（会存在覆盖问题）。匿名函数虽然可以解决自己定义的变量受别人影响的情况，但也会使得自己写的变量不能再另一文件中复用，这时候就要用到模块化了，模块化其实就是将自己定义的变量、方法、对象导出，使得自己可以通过引入自己写的文件来复用变量、方法、对象

常见的模块化规范：

CommonJS、AMD、CMD，也有ES6的Modules