<!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来使用
图片.png
v-for 指令基于一个数组渲染一个列表，特殊的语法，形式为：item in
items，items是数据数组，item是当前元素的别名；
在vue实例中，如果想要获取data上的数据，或者调用methods中的方法，必须通过this.数据属性名 或 this.方法名 来进行访问。这里的this 就表示 我们 new 出来的 vm 实例对象
事件修饰符
.stop阻止冒泡
.prevent 阻止默认事件
.capture添加事件侦听器时使用事件捕捉模式
.self只当事件在该元素本身（比如不是子元素）触发时触发回调
.once事件只触发一次
v-model指令，可以实现表单元素和Model中数据的双向绑定
网友评论