Vue
文章平均质量分 89
松鼠先森
IT自学者。
展开
-
Vue2学习计划六:组件化
我们面对乱麻的时候,当然是快刀斩。面对复杂问题的时候,我们最佳方案就是将问题进行拆解成一个个小问题,然后一个一个的解决。这同样适用于编程。如果将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续管理和维护。但如果将一个页面拆分成不同的供可能块,每个功能块都完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得很容易了。同样在Vue中,也提供了一种抽象思想,让开发者可以开发出一个个独立可复用的小组件来构造开发者的应用,任何应用最终都会可以被抽象成一颗组件树。一、组件原创 2021-08-23 22:05:35 · 156 阅读 · 0 评论 -
Vue2学习计划五:v-on、v-model、v-if、v-for和v-show
v-on事件监听1.1 v-on基本使用我们前面学习了,{{}}和v-bind,这两货可以让我们将Vue实例中的数据绑定到DOM中。那么,产品经理又开始有奇怪的需求了,比如我们要点击按钮更换图片怎么办?怎么办呢?我们目前只会将数据绑定到DOM上,如何监听DOM里的事件,然后作用到Vue实例数据上呢?别急,这正是今天要学的v-on的主场。产品经理太可恶,我们实现一个其他的事件监听案例,实现一个计数器。有按钮加和按钮减,然后将数值展示出来。 <div id="app"> <h原创 2021-08-06 21:31:28 · 1698 阅读 · 0 评论 -
Vue2学习计划四:v-bind
我们上一节讲了插值,主要是针对DOM的文本节点操作。那么如果现在有个需求,我们需要点击按钮,更换图片,怎么办?或者我们需要更换一下元素的样式该怎么实现呢?Vue当然有办法,这就是v-bind的功效了。主要用于动态绑定属性。可以用冒号来缩写。一、v-bind基本使用(动态绑定链接地址)我们这里主要讲一下怎么使用v-bind和v-bind的语法糖,实现了数据动态绑定超链接a元素的href和图片的src属性。以后只需要修改Vue实例里的数据就可以更换图片和链接地址。<div id="app">原创 2021-08-01 08:50:09 · 1039 阅读 · 0 评论 -
Vue2学习计划三:插值语法
一、什么是插值语法插值字面意思大概就是插入值,那么把什么值插入什么地方就是我们研究的了。既然这个插值语法是Vue2里面的语法,那么肯定跟Vue的核心思想有关。Vue的核心是采用简洁的模板语法来声明式地将数据渲染进DOM系统。那么数据从哪来,插入哪,我们大概就知道了。我们响应式的数据插入到DOM中。这正是插值语法要做的。二、不得不提的Mustache插值前面浆果了,Mustache采用{{}},将Vue实例中的数据插入DOM中<div id="app">{{message}}</di原创 2021-07-28 20:01:39 · 303 阅读 · 0 评论 -
Vue2学习计划二:mustache与methods和computed等Vue实例参数
上一节写了Vue实例的生命周期,我们心里有了个Vue里的数据绑定至DOM,那么具体怎么实现的呢?要实现只需要在Vue绑定的DOM元素中使用mustache语法即可,简单例子如下<div id="app"> <h2>{{message}}</h2> <hr> <h3>全名:{{fullName}}</h3> <h3>lastName:{{lastName}}</h3> <h3>f原创 2021-07-28 19:58:13 · 228 阅读 · 0 评论 -
Vue2学习计划一:Vue初体验
Vue2学习计划一:Vue初体验一、安装二、Vue初体验三、Vue的MVVM四、Vue的生命周期既然点开了,就不啰嗦为什么学Vue了,或者Vue有多好。实在太多大佬已经解释过了。初体验,那么必然就是先怎么安装,然后怎么使用Vue输出Hello World,最后再说一下Vue的总体结构。一、安装一共有三种安装方式:直接CDN引入开发环境:下载Vue.js文件并在使用时引入开发版本下载地址:https://cn.vuejs.org/js/vue.js生产版本下载地址:https:/原创 2021-07-25 20:06:12 · 143 阅读 · 0 评论