这是跟着高阳老师学习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是全新的前端开发方式。从原始的前端快放方式，转变成全新的方式。
网友评论