![](https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue1
Vue1
YY小怪兽
干饭了 干饭了
展开
-
Vue的列表动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>35-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding:原创 2021-12-04 15:25:21 · 326 阅读 · 0 评论 -
Vue的v-for注意点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>34-Vue-v-for-key</title> <script src="js/vue.js"></script></head><body><!--1.v-for注意点1.1v-for为了提升性能, 在更新已渲原创 2021-12-04 15:15:21 · 274 阅读 · 0 评论 -
Vue的过渡动画5(使用animate.css)
详情可见<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>33-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; pad原创 2021-12-04 15:03:29 · 224 阅读 · 0 评论 -
Vue的过渡动画4(自定义类名动画)
详情可见<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>32-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; pad原创 2021-12-04 14:59:48 · 328 阅读 · 0 评论 -
Vue的过渡动画3(使用velocity)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>31-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding:原创 2021-12-04 14:56:19 · 395 阅读 · 0 评论 -
Vue的过渡函数2(使用钩子函数)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>30-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; padding:原创 2021-12-04 14:53:24 · 442 阅读 · 0 评论 -
Vue的过渡动画1
详情可见<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>28-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{ margin: 0; pad原创 2021-12-04 14:52:32 · 70 阅读 · 0 评论 -
Vue的计算属性和函数的区别
详情可见<!--1.计算属性和函数通过计算属性我们能拿到处理后的数据, 但是通过函数我们也能拿到处理后的数据那么计算属性和函数有什么区别呢?2.1函数"不会"将计算的结果缓存起来, 每一次访问都会重新求值2.2计算属性"会"将计算的结果缓存起来, 只要数据没有发生变化, 就不会重新求值2.计算属性应用场景计算属性:比较适合用于计算不会频繁发生变化的的数据--><!--这里就是MVVM中的View--><div id="app"> <原创 2021-12-03 15:09:12 · 615 阅读 · 0 评论 -
Vue的计算属性
详情可见<!--1.插值语法特点可以在{{}}中编写合法的JavaScript表达式2.在插值语法中编写JavaScript表达式缺点2.1没有代码提示2.2语句过于复杂不利于我们维护3.如何解决?对于任何复杂逻辑,你都应当使用计算属性--><!--这里就是MVVM中的View--><div id="app"> <p>{{name}}</p> <p>{{age + 1}}</p>原创 2021-12-03 15:08:00 · 50 阅读 · 0 评论 -
Vue的自定义指令
详情可见自定义全局指令<!--1.自定义全局指令在Vue中除了可以使用Vue内置的一些指令以外, 我们还可以自定义指令2.自定义全局指令语法ue.directive('自定义指令名称', { 生命周期名称: function (el) { 指令业务逻辑代码 }});3.指令生命周期方法自定义指令时一定要明确指令的业务逻辑代码更适合在哪个阶段执行例如: 指令业务逻辑代码中没有用到元素事件, 那么可以在bind阶段执行例如: 指令业务逻辑代码中用到原创 2021-12-03 14:56:15 · 90 阅读 · 0 评论 -
Vue的常用指令7(v-on)
详情可见<!--1.什么是v-on指令?v-on指令专门用于给元素绑定监听事件2.v-on指令格式v-on:事件名称="回调函数名称"@事件名称="回调函数名称"3.v-on注意点:v-on绑定的事件被触发之后, 会去Vue实例对象的methods中查找对应的回调函数--><!--这里就是MVVM中的View--><div id="app"><!-- <button onclick="alert('lnj')">我是按原创 2021-12-03 14:35:47 · 454 阅读 · 0 评论 -
Vue的常用指令6(绑定样式)
详情可见<!--1.如何通过v-bind给style属性绑定数据1.1将数据放到对象中:style="{color:'red','font-size':'50px'}"1.2将数据放到Model对象中obj: { color: 'red', 'font-size': '80px',}2.注意点2.1如果属性名称包含-, 那么必须用引号括起来2.2如果需要绑定Model中的多个对象, 可以放到一个数组中赋值--><!--这里就是MVVM中的View原创 2021-12-03 14:19:02 · 362 阅读 · 0 评论 -
Vue的常用指令5(绑定类名)
详情可见<!--1.v-bind指令的作用v-bind指令给"任意标签"的"任意属性"绑定数据对于大部分的属性而言我们只需要直接赋值即可, 例如:value="name"但是对于class和style属性而言, 它的格式比较特殊2.通过v-bind绑定类名格式:class="['需要绑定类名', ...]"3.注意点:3.1直接赋值一个类名(没有放到数组中)默认回去Model中查找:class="需要绑定类名"2.2数组中的类名没有用引号括起来也会去Model中查找:cla原创 2021-12-01 16:10:31 · 392 阅读 · 0 评论 -
Vue的常用指令4(v-for和v-bind)
详情可见v-for<!--1.什么是v-for指令相当于JS中的for in循环, 可以根据数据多次渲染元素2.v-for特点可以遍历 数组, 字符, 数字, 对象--><!--这里就是MVVM中的View--><div id="app"> <ul><!-- <li v-for="(value, index) in list">{{index}}---{{value原创 2021-12-01 16:00:18 · 439 阅读 · 0 评论 -
Vue的常用指令3(v-once和v-cloak)
详情可见v-once<!--1.什么是指令?指令就是Vue内部提供的一些自定义属性,这些属性中封装好了Vue内部实现的一些功能只要使用这些指令就可以使用Vue中实现的这些功能2.Vue数据绑定的特点只要数据发生变化, 界面就会跟着变化3.v-once指令:让界面不要跟着数据变化, 只渲染一次--><!--这里就是MVVM中的View--><div id="app"> <p v-once>原始数据: {{ name }}&原创 2021-12-01 15:48:49 · 297 阅读 · 0 评论 -
Vue的常用指令2(v-text和v-html)
详情可见<!--1.什么是v-text指令v-text就相当于过去学习的innerText2.什么是v-html指令v-html就相当于过去学习的innerHTML--><!--这里就是MVVM中的View--><div id="app"> <!--插值的方式: 可以将指定的数据插入到指定的位置--><!-- <p>++++{{ name }}++++</p>--> <!--原创 2021-12-01 15:46:28 · 138 阅读 · 0 评论 -
Vue的常用指令1(v-if和v-show)
详情可见v-if<!--1.什么是v-if指令条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素2.v-if特点:如果条件不满足根本就不会创建这个元素(重点)3.v-if注意点v-if可以从模型中获取数据v-if也可以直接赋值一个表达式--><!--4.v-else指令v-else指令可以和v-if指令配合使用, 当v-if不满足条件时就执行v-else就显示v-else中的内容5.v-else注意点v-else不能单独出现v-i原创 2021-12-01 15:44:56 · 248 阅读 · 0 评论 -
Vue的MVVM设计模式、单向传递和双向传递
详情可见单向传递<!--1.MVVM设计模式在MVVM设计模式中由3个部分组成M : Model 数据模型(保存数据, 处理数据业务逻辑)V : View 视图(展示数据, 与用户交互)VM: View Model 数据模型和视图的桥梁(M是中国人, V是美国人, VM就是翻译)MVVM设计模式最大的特点就是支持数据的双向传递数据可以从 M -> VM -> V也可以从 V -> VM -> M2.Vue中MVVM的划分V原创 2021-12-01 15:21:44 · 343 阅读 · 0 评论 -
Vue的基本模板
<!--1.Vue框架使用方式1.1传统下载导入使用1.2vue-cli安装导入使用2.Vue框架使用步骤2.1下载Vue框架2.2导入Vue框架2.3创建Vue实例对象2.4指定Vue实例对象控制的区域2.5指定Vue实例对象控制区域的数据--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>02-Vu原创 2021-12-01 15:06:08 · 379 阅读 · 0 评论 -
vue的基本介绍
1.什么是Vue? Vue.js 是一套构建用户界面的`框架`,它不仅易于上手,还可以与其它第三方库整合(Swiper、IScroll、...)。 2.框架和库的区别? 框架:是一套完整的解决方案;对项目的`侵入性`较大,项目如果需要更换框架,则需要重构整个项目。 库(插件):提供某一个小功能,对项目的`侵入性`较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。 例如: 从jQuery 切换到 Zepto, 无缝切换 从IScroll切换到S原创 2021-12-01 15:03:39 · 236 阅读 · 0 评论