前端
关注
分享
扫一扫
爱飞的笨鸟
千里之行，始于足下.
展开
-
5.组件化应用构建---(vue入门 文档学习记录)
组件化应用构建<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组件化构建应用</title> <script type="text/javascript" src="../img/vue.js" ></script>...原创 2019-06-12 16:41:35 · 297 阅读 · 0 评论 -
14.侦听属性进阶 ---(vue入门 文档学习记录)
假设有如下代码：<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div> new Vue({ el: '#root', data: {...转载 2019-07-05 17:26:20 · 218 阅读 · 0 评论 -
13.侦听属性 ---(vue入门 文档学习记录)
侦听属性先看下面的例子:<div id="computed_props"> 千米 : <input type="text" v-model="kilometers"> 米 : <input type="text" v-model="meters"> </div> <script> var vm = new Vue(...原创 2019-07-05 17:31:01 · 193 阅读 · 0 评论 -
17.条件渲染之 v-if ---(vue入门 文档学习记录)
v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。上代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>kkk</title> <script type="text/ja...原创 2019-08-19 16:11:18 · 218 阅读 · 0 评论 -
17.1列表渲染之 v-for(把一个数组展示为一个列表) ---(vue入门 文档学习记录)
v-for本节主要是实践把一个数组展示为一个列表.就是在多个<li>标签中展示.代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="tex...原创 2019-08-26 11:37:43 · 939 阅读 · 0 评论 -
17.2列表渲染之 数组更新检测 ---(vue入门 文档学习记录)
变异方法Vue 将被侦听的数组的变异方法进行了包裹,这些方法包括:push()pop()shift()unshift()splice()sort()reverse()也就是说这些方法也变成了响应式的,当方法执行后,视图也会跟着改变.替换数组变异方法,会改变调用了这些方法的原始数组,相比之下,也有非变异数组,例如:filter()、concat() 和 slice().他们...原创 2019-09-04 17:10:31 · 141 阅读 · 0 评论 -
18.1事件修饰符 ---(vue入门 文档学习记录)
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。注:event.preventDefault() 是阻止默认事件发生,比如点击提交按钮,提交表单的时候,如果你不想点击的时候提交,就可以调用该...原创 2019-09-18 17:55:21 · 129 阅读 · 0 评论 -
19.表单输入绑定----复选框 ---(vue入门 文档学习记录)
单个复选框绑定到布尔值:<body> <div id="app-6"> <input type="checkbox" name="checkbox" v-model="checked" /> <label for="checkbox">{{ checked }}</label> </div> &l...原创 2019-09-24 17:51:25 · 186 阅读 · 0 评论 -
20.组件-插槽---(vue入门 文档学习记录)
插槽有的时候我们需要向模板里面插入文字,活着其他的东西,我们如何做呢?这时候,就需要插槽来实现了.就相当于,组件给你留了一块自己动手去填的地方,下面先上代码:<div id="app-8"> <navigation-link url="/profile"> Your Profile </navigation-link> </di...原创 2019-09-29 14:37:04 · 137 阅读 · 0 评论 -
21.组件-动态数组---(vue入门 文档学习记录)
动态数组1.动态数组顾名思义是指动态的绑定数组.具体使用如下:<!--div --> <div id="app-9"> <!--遍历tabls 定义按钮 click 按钮时触发 事件(将tab值赋值给 currentTab),这里是一个表达式--> <button v-for="tab in tabs" v-bind:key="tab"...原创 2019-09-29 16:09:58 · 637 阅读 · 0 评论 -
16.绑定Html class ---(vue入门 文档学习记录)
绑定Html class我们可以通过v-bind 动态绑定class,通过表达式拼接出结果即可,表达式的类型可以是字符串,对象或者数组.对象语法例如:<style> div.active { color: blue; } </style> <body> <div id="app16" v-bind:class="{act...原创 2019-07-10 18:58:19 · 237 阅读 · 0 评论 -
12.计算属性缓存 vs 方法---(vue入门 文档学习记录)
计算属性缓存 vs 方法方法:<div id="app12"> <p>方法结果:{{revmessage()}}</p> </div> <script> var vm = new Vue({ el:'#app12', data:{ message:'hello' }, me...原创 2019-06-28 19:04:44 · 540 阅读 · 1 评论 -
11.计算属性基础例子---(vue入门 文档学习记录)
基础例子<div id="app11"> <p>message:{{message}}</p> <p>revmessage:{{revmessage}}</p> </div> <script> var vm=new Vue({ el:"#app11", data:{ ...原创 2019-06-27 19:06:42 · 183 阅读 · 0 评论 -
1.第一个vue.js---(vue入门 文档学习记录)
声明式渲染Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js</title> <script type="text/javascript" s...原创 2019-06-11 18:44:11 · 266 阅读 · 0 评论 -
2.响应式编程---(vue入门 文档学习记录)
响应式编程<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../img/vue.js" ></script> </h...原创 2019-06-11 18:45:48 · 416 阅读 · 0 评论 -
3.条件与循环---(vue入门 文档学习记录)
条件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>条件与循环</title> <script type="text/javascript" src="../img/vue.js" ></script> </...原创 2019-06-11 18:47:13 · 146 阅读 · 0 评论 -
4.处理用户输入---(vue入门 文档学习记录)
函数的调用以及事件处理<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>处理用户输入</title> <script type="text/javascript" src="../img/vue.js" ></script&...原创 2019-06-11 18:50:01 · 182 阅读 · 0 评论 -
7. 实例生命周期钩子---(vue入门 文档学习记录)
1.想要了解vue的实例生命周期钩子就要先了解实例的声明周期是怎样的,先拿文档的生命周期图示看一下(部分,想看全图请移步vue文档):当然,目前还不需要深入了解其中的东西.但是我们可以从中看到beforecreate,created等生命周期钩子在实例生命周期的具体哪个阶段,那么我们还是来学习生命周期钩子的作用和用法:作用:文档的简介是 每个 Vue 实例在被创建时都要经过一...原创 2019-06-21 17:43:07 · 316 阅读 · 0 评论 -
8.插值---(vue入门 文档学习记录)
文本数据绑定最经常用的就是"Mustache"语法(两个大括号)的文本插值,注意这里特别标明只是文本插值,如果是html格式也会只显示文本.<span>Message: {{ msg }}</span>该语法中{{message}}的message值是响应式的,不管什么时候改变页面都会重新渲染,我们可以只渲染一次,也就是使其不进行重新渲染(但是值是变了的),可以通过...原创 2019-06-21 18:48:07 · 599 阅读 · 0 评论 -
9. VUE全局变量与局部变量---(vue入门 文档学习记录)
转自:https://www.cnblogs.com/webxu20180730/p/10890888.html作用域:全局作用域：Vue对象 全局api 局部作用域： 实例对象vm 实例api 组件component 组件配置选项 在引入Vue文件时，就相当于拥有了一个全局Vue对象。 在var vm = new Vu...转载 2019-06-24 11:57:32 · 1829 阅读 · 0 评论 -
10.指令---(vue入门 文档学习记录)
指令指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：<p v-if="seen">现在你看到我了</p>这里，v-if 指令将根据表达式 seen 的...原创 2019-06-24 19:04:06 · 179 阅读 · 0 评论 -
15.计算属性Setter进阶 ---(vue入门 文档学习记录)
计算属性setter一般情况计算属性只有getter,并且默认不用显示的表明getter方法,也可以有setter方法:<div id="app15"> <p> <input v-model="message"></input> <input v-model="revmessage"></input>...原创 2019-07-08 19:09:22 · 373 阅读 · 0 评论 -
1.组件间数据传递以及父子组件的引用----Vue实践
父子组件的引用直接上代码吧 下面是一个组件List.vue的内容：<template> <div class="col-md-8"> <h3 class="reply">评论回复：</h3> <h2 style='display: none'>暂无评论，点击左侧添加评论！！！</h2> ...原创 2019-10-10 22:58:50 · 192 阅读 · 0 评论