1、基本数据渲染和指令
创建 01-基本数据渲染和指令.html
你看到的 v-bind 特性被称为指令。指令带有前缀 v-
除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）
data: { content: '我是标题', message: '页面加载于 ' + new Date().toLocaleString() }
<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令 此时title中显示的是模型数据 --> <h1 v-bind:title="message"> {{content}} </h1> <!-- v-bind 指令的简写形式： 冒号（:） --> <h1 :title="message"> {{content}} </h1>
2、双向数据绑定
创建 02-双向数据绑定.html
双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
data: { searchMap:{ keyWord: '尚硅谷' } }
<!-- v-bind:value只能进行单向的数据渲染 --> <input type="text" v-bind:value="searchMap.keyWord"> <!-- v-model 可以进行双向的数据绑定 --> <input type="text" v-model="searchMap.keyWord"> <p>您要查询的是：{{searchMap.keyWord}}</p>
双向绑定比较常用。如下面的输入框中第二个是双向绑定的，当在这个里面输入值时，另外两个也会随着变化，这就是双向绑定。
3、事件
创建 03-事件.html
需求：点击查询按钮，按照输入框中输入的内容查找公司相关信息
在前面的例子基础上，data节点中增加 result，增加 methods节点 并定义 search方法
这是方法的书写
data: { searchMap:{ keyWord: '尚硅谷' }, //查询结果 result: {} }, methods:{ search(){ console.log('search'); this.result = { "title":"尚硅谷", "site":"http://www.atguigu.com" } } }
html中增加 button 和 p
使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中
<!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 --> <button v-on:click="search()">查询</button> <p>您要查询的是：{{searchMap.keyWord}}</p> <p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
事件的绑定简写
<!-- v-on 指令的简写形式 @ --> <button @click="search()">查询</button>
主要掌握事件的写法以及事件的绑定
4、修饰符
创建 04-修饰符.html
修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
即阻止事件原本的默认行为
data: { user: {}
<!-- 修饰符用于指出一个指令应该以特殊方式绑定。 这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()： 即阻止表单提交的默认行为 --> <form action="save" v-on:submit.prevent="onSubmit"> <label for="username"> <input type="text" id="username" v-model="user.username"> <button type="submit">保存</button> </label> </form>
methods: { onSubmit() { if (this.user.username) { console.log('提交表单') } else { alert('请输入用户名') } } }
上面这个修饰符主要的是阻止原本的方法，而去执行自己的方法
5、条件渲染
v-if：条件指令
data: { ok: false }
注意：单个复选框绑定到布尔值
<input type="checkbox" v-model="ok">同意许可协议 <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 --> <h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1> <h1 v-else>no</h1>
v-show：条件指令
使用v-show完成和上面相同的功能
<!-- v:show 条件指令 初始渲染开销大 --> <h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1> <h1 v-show="!ok">no</h1>
这个实现就是一点复选框就变化，来实现条件渲染
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
6、列表渲染
v-for：列表循环指令
例1：简单的列表渲染
<!-- 1、简单的列表渲染 --> <ul> <li v-for="n in 10">{{ n }} </li> </ul> <ul> <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 --> <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li> </ul>
这个就是实现每次遍历显示遍历的数
这个是加一个索引的值
例2：
遍历数据列表 这个在项目中经常用
data: { userList: [ { id: 1, username: 'helen', age: 18 }, { id: 2, username: 'peter', age: 28 }, { id: 3, username: 'andy', age: 38 } ] }
<!-- 2、遍历数据列表 --> <table border="1"> <!-- <tr v-for="item in userList"></tr> --> <tr v-for="(item, index) in userList"> <td>{{index}}</td> <td>{{item.id}}</td> <td>{{item.username}}</td> <td>{{item.age}}</td> </tr> </table>
这个显示的效果如下
