vue基础学习
关注
分享
扫一扫
哒玲
这个作者很懒，什么都没留下…
展开
-
vue中的样式绑定
我们直接来看一个例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue中的样式绑定1&l原创 2019-02-22 10:00:42 · 255 阅读 · 0 评论 -
Vue3.0之proxy代替object.definProperty()
在最新的Vue 3.0，一个很重要的改变就是将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。对于Object.defineProperty大家应该在学习Vue中的响应式数据时深有体会，它可以 重写属性的 get 与 set 方法，从而完成监听数据的改变。1. Vue 2.x中的 Object.defineProperty实现响应式数据...原创 2019-04-22 11:56:34 · 3602 阅读 · 0 评论 -
计算属性和侦听器
计算属性–computed官网对于计算属性的解释是用于简化模板中放入冗杂的计算逻辑而设计的，也就是说当要显示的变量要经过逻辑运算后再显示后，不推荐在模板中进行计算，都应当使用计算属性。下面通过一个例子来实现：<body><div id="root"> 姓：<input v-model="firstName"> 名：<input v-mod...原创 2019-02-20 14:45:22 · 418 阅读 · 0 评论 -
vue之模板语法
vue的模板语法有三种，分别为：插值表达式 {{…}}v-textv-html当name为js表达式时，三者是看不出来区别的：<body> <div id="app"> {{name + 'lee'}} <!--插值表达式，第一种模板语法--> <div v-text="name + 'lee'"></di原创 2019-02-20 13:35:56 · 165 阅读 · 0 评论 -
todolist带你熟悉vue
vue.js实现todolist在学习vue之前，先跟着视频实现了一个todolist，对vue这个框架有了初步的认识。引入vue.js文件，具体vue的安装参考官方文档。然后实现一个简单的todolist：当点击提交时，我们提交的任务项会显示在下方：具体实现代码如下：&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html lang=&amp;amp;原创 2019-02-20 10:22:52 · 187 阅读 · 0 评论 -
在vue中同时使用过渡和动画
我们先来看一个例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>在vue中同时使用过渡和动画</title> <link rel="stylesheet" hr原创 2019-02-24 20:31:56 · 599 阅读 · 0 评论 -
vue中使用animate.css库
1、@keyframeskeyframes翻译成中文，是"关键帧"的意思，使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。– 自定义实现下面我们来看一个例子，要实现的效果是文字弹跳放大在缩小显现和隐...原创 2019-02-24 17:20:09 · 4094 阅读 · 1 评论 -
vue中的css动画效果
我们通过一个例子来理解，想实现的效果是点击动画按钮，文字“hello world”由显示到逐渐消失，再点击，逐渐显示。一般来说想要哪个元素有动画效果，就要在外面包裹一层transition标签，如下：<div id="root"> <transition name="fade"> <div v-if="show">hello world&原创 2019-02-24 17:08:59 · 1415 阅读 · 0 评论 -
动态组件和v-once指令
1、动态组件我们首先看一个例子，首先定义两个子组件，要实现的功能是点击change按钮，进行两个组件的切换：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态组件与v-once指令</title&原创 2019-02-24 16:50:22 · 183 阅读 · 0 评论 -
vue中的插槽
首先由一个例子来引出插槽的概念，我现在需要子组件中除了展示p标签之外，还要展示一段内容，这段内容并不是子组件所决定的，而是父组件传递来的。以往可以用props接收父组件传递过来的参数，如下：&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;插槽&原创 2019-02-24 16:18:46 · 890 阅读 · 0 评论 -
vue中非父子组件传值
我们在之前的文章中提到过，父组件向子组件传值时是利用定义属性来传值的，而子组件向父组件传值是通过事件原创 2019-02-24 11:52:50 · 1547 阅读 · 1 评论 -
vue中父子组件传值
1. 父–子父组件通过属性给子组件传值：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父子组件传值</title> <script src="../node_mo原创 2019-02-24 10:22:56 · 324 阅读 · 0 评论 -
vue组件中使用的一些细节点
1. 在table/ul/ol/select中显示子组件bug&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot原创 2019-02-22 11:41:41 · 195 阅读 · 0 评论 -
vue中的条件渲染
控制一个模板标签是否在页面上显示，有以下两种方法：v-if:如果判断条件show为false的话，就删除dom元素，反之为true就添加dom元素：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-if&l原创 2019-02-22 11:11:24 · 444 阅读 · 0 评论 -
怎样理解Vue中的路由
1. 路由传统的路由指的是：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发。而前端路由是不涉及服务器的，是前端利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换。目前Vue 推荐单页面应用 SPA 开发模式，大型单页应用最显著特点之一就是采用前端路由系统，通过改变URL，在...转载 2019-04-28 13:02:22 · 4821 阅读 · 0 评论