Vue基础学习

Vue.js基础学习

Vue.js的基本介绍

    轻量级的前端界面框架，是一套构建用户界面的渐进式框架，与其他重量级框架不同，Vue是采用白底向上增量开发的设计。Vue的核心层只关注视图。

---

Vue.js的功能

1.数据渲染/数据同步 （实现了将js的文件、数据如何同步，渲染到html文件中）

HTML文件

、

   JS文件

将JS中的数据同步渲染到html文件上面，可以称为声明式渲染

渲染结果

---

2.条件与循环

渲染条件：可以根据标签的属性来进行设置，然后确定内容的样式。

HTML文件

JS文件

效果图

渲染循环：主要用于展示列表。

HTML文件

JS文件

效果图

---

3.组件化/模块化 （一个项目可以以组件为单位进行模块化的开发）

这里我们引入一个组件模块化，如果我们按照上述效果渲染一个能够随着点击变化的按钮。

JS文件

HTML文件

效果图

如果要实现这个按钮的复用，就会出现html文件里面需要写多个button的标签，还会使得message的值没点一次多个按钮都会变化

效果图

这个时候引入组件，每一个组件定义一个标签使他相互独立。

当一个组件被定义，data必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果data仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供data函数，每次创建一个新实例后，我们能够调用data函数，从而返回初始数据的一个全新副本数据对象。

JS文件

HTML文件

初始化插件

随点击数变化变化

多个组件的使用只需要在div多加入几个插件所定义的标签

JS文件

初始化

点击后

点击事件

组件中的数字我们用message变量，用函数去维护message，说到底还是一个message的值，只不过函数将他们复制了一份，如果我们要将变量变为不同的值，例如一个列表里获得数据填入到组件中。则需要引入一个prop。

注意：如果按照下图的JS文件会出现报错信息，即插件的标签无法被正确的实例化，因为编译时先加载了New Vue的类，类中在寻找到demo的div时里面的button-counter的标签还没有被加载，所以报错。所以正确的应该如上图的先写组件的代码，再写Vue的实例类

JS文件

报错信息

3.扩展功能

   ①路由

   在前端的地址栏了可以通过地址的不同来切换不同的页面

   ②Ajax

   ③数据流管理

---

Vue.js的特点

1.响应式-双向绑定

数据与展示的双向绑定，传统的js和html文件中由很多交互，可能时html想js传递数据，也有可有时js获取html文件的字段，但是如果这些交互复杂起来的时候，就会出现混论，Vue.js就可以很好的解决这个问题。

JS文件

HTML文件

显示结果

变化结果

当你在input的框内输入文本时，上面的文本

内的内容一起变化。

2.组件化

已经演示

有待补充

---

Vue.js的实例

1.数据与方法

当一个Vue实例被创建时，其中所拥有的选项中的data项时存放相应数据的，再data中的参数时响应式，也就是说修改data中的参数能够使页面中用到这个参数的位置被重新渲染，如果参数没有再data中则不会被重新渲染。

示例图

但是可以在参数的后面添加方法Object.freeze()使得在data中的参数不再被追踪响应。

表示的是点击之前我们的tode的值是before，点击按钮后变为after

  HTML文件

JS文件

点击前

点击后

这样就显示动态绑定，现在我们加入一个object.freeze(参数)的方法。

就会一直不变。

---

Vue.js的打包输出问题

在ideal中将写好的组件输出则需要执行npm run build的命令

在当前项目的文件夹下会输出一个dist文件夹，存在一个资源static的文件夹，和可打开的html文件

效果图

注意：如果你直接打开index.html文件会发生只加载了页面，没有加载vue资源，你需要在index里面修改资源路径。添加这个点返回上级菜单再访问才可以可以实现效果

示例图