随笔分类 - vue
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：官网图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
阅读全文
摘要：可以使用v-on指令将事件侦听器绑定到元素上。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
阅读全文
摘要：有时你会发现需要直接访问一个DOM元素；也许你正在使用一个不支持Vue的第三方库，或者希望做一些Vue自身不能完全处理的事情。可以使用ref直接访问元素，而不需要使用querySelector或者其他选择DOM节点的原生方法。 使用ref访问一个元素，只需要将这个元素的ref属性设置为字符串，然后可
阅读全文
摘要：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
阅读全文
摘要：侦听器可以监听data对象属性或者计算属性的变化。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
阅读全文
摘要：计算属性介于data对象的属性和方法两者之间：可以像访问data对象的属性那样访问它，但需要以函数的方式定义它。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=
阅读全文
摘要：在方法中，this指向该方法所属的组件。可以使用this访问data对象的属性和其他方法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi
阅读全文
摘要：函数是十分优雅的语言特性，它让我们可以采用可复用的方式存储一段逻辑，从而不用重复代码就可以多次使用这一逻辑。在Vue的模板里，函数被定义为方法来使用。只要将一个函数存储为methods对象的一个属性，就可以在模板中使用它： <!DOCTYPE html> <html lang="en"> <head
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：不能使用v-bind:value——使用v-bind只会在inputValue值变化时才更新输入框的值，反过来则不行。作为替代，可以使用v-model指令，它作用于输入框元素，将输入框的值绑定到data对象的对应属性上，因此输入框不但会接收data上的初始值，而且当输入内容更新时，data上的属性值
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：除了在一开始创建HTML, Vue还监控data对象的变化，并在数据变化时更新DOM。 让我们创建一个用于显示当前时间的页面，每隔一秒获取一下当前时间： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name
阅读全文
摘要：v-bind，可以接收参数。v-bind指令用于将一个值绑定到一个HTML属性上。 下面的这个例子将http://www.baidu.com的值绑定到href上： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
阅读全文
摘要：另外一个我经常使用的指令是v-for，这个指令通过遍历一个数组或者对象，将指令所在的元素循环输出到页面上。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi
阅读全文
摘要：区别： v-if指令的值为假，那么这个元素不会被插入DOM。 和v-show指令比较一下，该指令使用CSS样式控制元素的显示/隐藏。 <!-- 以下代码会输出 <div>one</div> --> <div v-if="ture">one</div> <div v-if="false">two</d
阅读全文
摘要：Vue的核心是将数据显示在页面上，这一功能通过模板实现。为正常的HTML添加特殊的属性——被称作指令——借助它来告诉Vue我们想要实现的效果以及如何处理提供给它的数据。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m
阅读全文
摘要：安装Vue不需要任何特殊的工具，使用下面的代码就可以实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
阅读全文
浙公网安备 33010602011771号