vue组件学习

这是跟着高阳老师学习vue的课堂笔记，之前的都没做笔记。😅。
高阳老师的官网是一起学js，本来想发到老师创建的社区的，发现已经有人已经发了笔记了。我就不去发了。感兴趣的可以去学习。社区很好，高阳老师也是超级棒。

---

正文

vue的核心库，解决了数据和视图绑定问题。

组件是vue强大功能之一。

vue的组件 和 HTML中的便签 不是一个层面的东西了。这里的组件是对原始的HTML元素进行封装，来拓展它的能力。在较高层面上，组件是自定义的元素。vue.js的编辑器为它添加了特殊功能。这些功能是原始的HTML不具备的。

在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

也就是说，与原生的HTML元素相比，元素增加了is特性。

<div>
  <xu> xxx </xu>
</div>

<xu>非原生的标签，但是并没有影响显示，说明解析是容错的。在解析的时候也没有什么问题。

但是在某些情况下，比如在列表中，默认的非原生的标签不能正常的显示。

<table>
  <my-row>...</my-row>
</table>

<my-row>是不能被解析成 tr来使HTML显示成我们希望的样子，

is特性(is what 是什么)，是表现为某种标签样式的特性，比如下面示例，is='my-row' 告诉浏览器 my-row标签作为一个tr标签使用。

<table>
  <tr is="my-row"></tr>
</table>

is的那就话就是仿佛在说 这个元素是 什么什么 你先按这个解析。后续vue再偷天换日。

以下三种，HTML可以正常解析，可以不使用is属性。

• <script type="text/x-template">
• JavaScript内联模板字符串
• .vue组件

所有的vue组件同时也都是vue的实例。他们可以接受相同的选项对象，并提供相同的声明周期钩子。

• 一个组件是具备自己的声明周期的，
• 一个有自己的数据和方法，(注意，组件中的data必须是个函数,不能是obj，但是这个函数必须返回一个obj，最终data值其实还是个obj)
• 组件和其他的组件是隔离的。是不能调用其他组件的数据和方法的。

他们之间需要通过一些方法来通信。

组件的创建方式：

创建全局组件：

Vue.component('name',option_obj)；

全局组件意思是 所有的vue实例都可以访问，

全局组件是vue中是不常用的，要尽量避免使用全局组件。

组件创建(或者注册)之后，便可以作为自定义标签在HTML中使用。

局部组件

不用全局创建，通过某个Vue对象的components选项实现。

new Vue({
  components : {
    ...
  }
});

除非所有的页面都能用到的组件，否则不要定义为全局组件。

在vue选项对象中定义的组件，仅供该vue实例使用。

组件组合

组件可以组合，组件套组件。形成新的组件。

使用属性prop传递数据

往组件里面塞数据，必须通过属性传递。v-bind:message="message"

Vue.component('child', {
  // declare the props
  props: ['message'],
  // like data, the prop can be used inside templates and
  // is also made available in the vm as this.message
  template: '<span>{{ message }}</span>'
})

v-bind:message 可以缩写成 :message

驼峰命名和短横线命名

在vue中，组件的名称请使用短横线方式。写HTML时的习惯就是短横线，而JavaScript中命名变量是习惯驼峰式命名的。

。。。。

高阶的HTML开发者可以都使用驼峰命名。因为高阶的vue开发者，不care HTML，HTML不是占主要部分，JavaScript占据主导地位。

v-指令 后面的双引号 是表达式 ,不是v指定就是一个字符串常量。不会当做js表达式计算

vue组件的数据流是单向的，只允许父组件向子组件传递数据，不允许组内部的数据向父组件传递数据。否则就很乱，数据会变得不可控。

正确的方式是，要保证数据的变化是可控的，是可跟踪的。推荐的使用方式是：

1，定义一个局部变量，并用prop的值初始化

2.定义一个计算属性，数据来自 属性 prop 的值

属性prop验证

要指定验证规则，使用字符串是不可以的，要使用对象形式的。还可以设置一些可选项。

Vue.component('user-info',{
  props:  {
    name:{
      type:String,
      required:true,
      default:'xiaoming'
    }
  }
})；

抄代码

• 处理粘贴过来HTML代码
  • 删除不需要的
  • 脑子里要想一下大概长什么样子，需要什么数据，把HTML代码修改成想要的模样。
• 创建vue实例，进行数据绑定，事件绑定等。

使用立即执行函数。快速构建测试数据。使用for循环构建数据并返回。

老师的搭建界面样式都很6，是因为老师花时间研究Bootstrap了。把一件东西搞熟了，用习惯了，就搞的快了。

案例点：

V-for 是可以传入index的，需要使用括号

v-for= "(item,index) in menues"

避免使用硬编码，维护起来太麻烦。

数据层面和服务器保持一致，可以减少很多判断，减少bug。

关于vue组件化的一些思考：

1.如何把代码抽离成组件？

2.数据是如何传递给组件的？

3.组件之间是如何传递数据的？

4.组件之间的事件是如何传递的？

vue-cli是全新的前端开发方式。从原始的前端快放方式，转变成全新的方式。