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的框内输入文本时，上面的文本<p>内的内容一起变化。
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里面修改资源路径。添加这个点返回上级菜单再访问才可以可以实现效果
示例图
网友评论