Vue.js学习小结

前端初学者，最近在看着菜鸟教程学Vue.js。初步了解了前端三剑客的各自作用。HTML是骨架，css是皮肤，js是肌肉，这三门技术构成了Web前端的基石。仅从入门的角度的话感觉前端相对较为容易，但是要往深学会发现前端的东西杂而多，感觉大脑的存储量都不够用了。

---

好了，接下来讲讲最近学的内容。教程详见：https://www.runoob.com/vue2/vue-tutorial.html

首先教程对vue.js的简介：

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

关于这几几句话除了第三句好理解，第一、二句比较不好理解，我参考了几个链接强行理解了一下：https://www.zhihu.com/question/51907207、https://baijiahao.baidu.com/s?id=1647203004323024188&wfr=spider&for=pc、https://www.sohu.com/a/141392237_771850

可能是前端菜鸟学的框架还不够多，有大神可一语道破指导一下。

---

接下来开始写笔记了。

1.使数据绑定最常见的形式就是使用 {{...}}（双大括号）的:{{ message }}，括号里面还可以加表达式，如{{ ok ? 'YES' : 'NO' }}

2.HTML插值：用 v-html 指令用于输出 html 代码：v-html="message"

3.使用 v-model 指令来实现双向数据绑定，可以将两个参数捆绑在一起。常用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

4.使用 v-bind 指令绑定控制HTML属性值，常常与 v-model进行联用。v-bind缩写时为省略

5.按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。 v-on:click=缩写为@click=。 v-on可以与function (newValue, oldValue)一起用

6.v-if、v-else、v-for等与正常其他语言语法使用效果差不多

7.可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

8.组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：