Vue学习-1

预读:为了满足当前移动webApp项目的开发需求,MVVM框架诞生,而VUEJS 便是这样一种js框架,其两大核心:<code>数据驱动</code>和<code>组件化</code>

为了解决webApp这些体验和开发上的不足,使用一个MVVM框架VUELS;

(数据驱动视图)

View --- ViewModel --- Model三部分

页面DOM viewModel model数据

中间监控两侧的数据,并相对应地通知另一侧进行修改;

这就是MVVM框架,属于MVVM的JS框架还有React.js,Angular.js

Vue更轻量更快

更容易上手

-通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

数据绑定

Vue数据驱动视图:数据改变视图自动更新,传统的做法要手动改变DOM来改变视图,VUEJS只需要改变数据,就会自动更改视图,不用再担心DOM;

视图组件化

把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成;

​

如果你还在用jQuery来频繁的操作你的DOM更新页面的话,就可以用vue.js来解放DOM操作;

如果项目中有多个部分是相同的,并可以封装成一个组件,那就可以使用Vue.js

此外,vue.js的核心使用了ES5的Object.defineProperty特性.IE8以下的版本是不兼容的;

为了更好满足当前移动webapp项目的开发需求，MVVM框架诞生，而Vue.js便是这样的一种js框架，其两大核心：数据驱动和组件化。

如果不想安装到本地,使用CDN方式,引入网上的资源

还可以通过npm在命令行下载

我们通过new Vue( )创建一个实例vm，参数是一个json对象，属性el提供一个在页面上存在的DOM 元素(id='app')，表明这个实例是关联指定的DOM节点。

在DOM节点上，我们就可以使用双大括号{{ }}的语法来渲染Vue实例对象data中已经存在的属性值，如上面案例中的name属性的值“web前端教程”就会被渲染到页面中，替换{{ name }} 显示效果为：“web前端教程”

例子:监听用户在页面输入框输入的内容，然后将其实时更新在页面上。

在Vue中我们使用v-model指令就可以轻松实现

组件化就是把页面中特定的区块独立抽出来，并封装成一个可方便复用的组件。

加入页面上有三个同样的图片,传统的办法,我们需要写三个同样布局的HTML布局;

如果我们把每个卡片看作一个可复用的区域的话，那么它就可以封装成一个组件。

我们用Vue.component(tagName, options)注册了一个名字叫card的组件，这样，在需要复用这个组件的地方，我们只需要使用就可以了。实际开发中，组件比这个复杂得多，越复杂，封装后的便利性越高

可能你会说，组件里面的显示的内容不可能全都一样。放心，Vue为组件提供了props属性来接受传递进来的参数,后面会介绍

创建并使用一个Vue实例并不难，仅需4步走：

newVue-----&gt;设置数据-----&gt;-------&gt;挂载元素-------&gt;成功渲染

例如:我们有一组数字全是小数,

展示到页面中

突然，需求改了，我们不能把小数展示出来，需要把小数转换成整数再显示

这个时候，我们需要把三个小数经过过滤处理后再展示，不能直接展示。这种情况就需要用到Vue的filters过滤器了

相信大家都注意到了，参数对象除了el和data属性之外，还多了一个filters属性，它的值也是一个对象，里面定义了一个叫toInt( )的方法，传入了一个value的参数，函数的作用就是把传入的参数value，简单地转成一个整出并return回去。

紧接着:通过管道符|把函数toInt 放在变量后面即可，num1，num2，num3会分别作为参数value传入toInt( value )方法进行运算，并返回一个整数

我们有三个数，但是需要展示的是三个数字之和。这种情况，就适合用我们的计算属性computed。

紧接着 :

需要注意的是，sum的值是依赖data中的数据num1，num2，num3的，一旦它们发生了变化，sum的值也会自动更新。

我们定义一个数据a，当用户点击按钮的时候，a的值加1。这种情况，我们可以利用methods来实现。

定义一个plus( )的方法在methods中，下面我们把plus( ) 绑定在按钮的点击事件上

watch选项是Vue提供的用于检测指定的数据发生改变的api。

最后一部分watch就是我们新加的代码，a( ) 表示我们要观察监听的就是数据a;

Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段，每个阶段都会给一些“钩子”

此时的实例中的data和el还是undefined,不可用的。

此时，我们能读取到数据data的值，但是DOM还没生成，所以属性el还不存在，输出$data为一个Object对象，而$el的值为undefined。

此时的$el不再是undefined，而是成功关联到我们指定的dom节点

，但此时{{ name }}还没有被成功地渲染成我们data中的数据。

此时打印属性el，我们看到{{ name }}已经成功渲染成我们data.name的值：“前端课程”。

当修改vue实例的data时，vue就会自动帮我们更新渲染视图，在这个过程中，vue提供了beforeUpdate的钩子给我们，在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate

在控制台修改一下实例的数据name，在更新渲染之前,name还是之前的数据,视图并未重新渲染更新

此阶段为更新渲染视图之后，此时再读取视图上的内容，已经是最新的内容，接着上面的案例，我们添加钩子updated的代码

此时name 的值已经被改变了,视图已经更新;

调用实例的destroy( )方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子

成功销毁之后，会触发destroyed钩子，此时该实例与其他实例的关联已经被清除，它与视图之间也被解绑。

此时再在控制台修改数据,视图不会改变

keep-alive组件被激活的时候调用

keep-alive 组件停用时调用。