VueJs学习笔记：基本概念及简单demo
Vue官方介绍：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
简单小巧指的是vue.js压缩后仅有17KB，量轻。渐进式指的是我们学习和使用vue的过程中是一步一步循序渐进的，不必一开始就学会并使用所有的东西。
1.vue.js在设计上采用的是MVVM模式：当view（视图）层发生变化时，会自动更新到ViewModel（视图模型）层，反之亦然。View和Model通过双向绑定建立联系。大家都使用过JQuery，当页面的数据发生变化的时候，我们经常用JQuery去操作DOM元素来将最新的数据呈现给用户。这样带来的后果是我们的视图代码和业务代码紧紧耦合在一起，随着功能的增加和业务的复杂程度的增加，我们的代码会越来越难维护。
2.而Vue.Js通过MVVM模式将数据和视图双向绑定，我们只需要关注数据即可，剩下操作浏览器DOM的事情Vue帮我们自动完成，这样我们就可以专注于业务代码。
3.我们有两种方式将VueJs引进到自己的项目中，一种是我们直接通过script加载CDN文件：<script src="https://unpkg.com/vue/dist/vue.min.js"></script>，这种方式是自动引入最新版本的VueJs。第二种方式是我们将Vue代码包下载到自己的项目本地，然后在页面中通过script标签引用即可，我觉得如果是自己学习阶段的话可以直接引用CDN文件，这样简单方便。如果是实际项目的话还是将包下载到本地再引用。
4.下面用一段代码演示一下入门用法()：
Hello：{ {name}}
});
运行结果：
5.动手试一下发现，我在输入框中输入内容之后，输入的内容会自动显示在下边，这就是vue双向绑定数据。
6.vue挂载实例的时候一些事件
created：实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载,$el还不可用。一般我们需要初始化一些数据的时候会用到这个事件。
mounted：el挂载到实例后调用，一般我们的第一个业务逻辑会从这里开始
beforeDestory：实例销毁之前调用，主要用于解绑使用addEventListener监听事件等。
7.这些事件与data类似，也是作为选项写在vue内，并且事件内的this指的是调用它的实例。
8.过滤器：
我们可以在{
{}}插值的尾部添加一个符号：| 对数据进行过滤，经常用于格式化文本数据，比如数字小数位的显示，时间的格式化等。{ {num|formatNumber}}show为true，显示这段文本
9.过滤器也可以同时使用多个：{
{ num | filter1 | filter2 }}，也可以接收参数：{ { num | filter('arg1','arg2') }}，这里的字符串arg1和arg2将分别传递给过滤器的第二个和第三个参数，因为第一个是数据本身。10.指令(directive)是vue最常用的一项功能，它带有前缀v-，例如上述代码中的v-if，还有v-bind，v-on
参考资料：《Vue.Js实战》-梁灏
作者：ADi
转载请注明出处：https://www.cnblogs.com/Infancy/p/10741245.html