<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字">
<h1>你好,{{name}}</h1>
</div>
<script src="前端参考手册/vue.min.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
name:''
}
})</script>
</body>
</html>
注释:
el:用于指定一个页面中已存在的DOM元素来挂载Vue实例,它可以是HTMLElement,也可以是CSS选择器。(通过app.$el访问)
v-model: 它的值对应于我们创建的Vue实例的data选项中的name字段,这就是Vue的数据绑定。
通过Vue实例的data选项,可以声明应用内需要双向绑定的数据。
{{}}是最基本的文本插值方法,会自动将我们双向绑定的数据实时显示出来。
v-html:输出HTML,而不是将数据解释后的纯文本
v-pre:既可跳过这个元素和它的子元素的编译过程( <span v-pre{{这里的内容是不好被编译的}}</span> )
v-bind:的基本用途是动态更新HTML元素上的属性,比如id,class等 (v-bind:简化为:)
v-on: 用来绑定事件监听器 (v-on:简化为@)
如果绑定得事件要处理复杂得业务逻辑,建议还是在methods里声明一个方法
计算属性
所有得计算属性都以函数得形式写在Vue实例内得computer选项内,最终返回计算后得结果
基本指令
v-cloak
不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none;配合使用 是解决初始化慢导致页面闪动的最佳实践
v-once: 作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。
条件渲染指令
v-if、v-else-if、v-else
可以根据表达式的值在DOM中渲染或销毁元素/组件
v-else-if
要紧跟v-if,v-else
要紧跟v-else-if
或v-if
。
如果一次判断多个元素,可以在Vue.js内置的<template>
元素上使用条件指令,最终渲染的结果不会包含该元素。
v-show: 改变元素的CSS属性display
。当v-show表达式的值为false
时,元素会隐藏,查看DOM结构会看到元素上加载了内联样式display:none
;
v-show不能在<template>上使用
列表渲染指令
v-for
当需要将一个数组遍历或枚举循环显示时,就会用到列表渲染指令 结合in来使用
v-for
指令基于一个数组渲染一个列表,特殊的语法,形式为:item in
items,items
是数据数组,item是当前元素的别名;
在vue实例中,如果想要获取data上的数据,或者调用methods中的方法,必须通过this.数据属性名 或 this.方法名
来进行访问。这里的this 就表示 我们 new 出来的 vm 实例对象
事件修饰符
.stop
阻止冒泡
.prevent
阻止默认事件
.capture
添加事件侦听器时使用事件捕捉模式
.self
只当事件在该元素本身(比如不是子元素)触发时触发回调
.once
事件只触发一次
v-model
指令,可以实现表单元素和Model中数据的双向绑定