绑定DOM结构到数据 and

v-？什么的是指令，不是属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for

 

条件渲染之v-if

绑定DOM结构到数据之控制元素显示（v-if）

<div id="app-3">
<p v-if="seen">Now you see me</p>   v-if指令控制元素是否显示，给指令设置一个参数，参数名为seen(Boolean）,控制seen的值控制元素是否显示
</div>

var app3 = new Vue({

el: '#app-3',

data: {
seen: true   //v-if为true则会显示<p>,false则不显示
}
})

 

这是绑定DOM结构到数据，之前的控制标签内容只是绑定DOM文本到数据，也可叫绑定DOM数据到数据 （文本，内容，数据一个意思）

即通过data里的数据控制DOM文本(html内容)或者结构

 

<template v-if="？"> </template>  可以将多个html元素写在<template>(称为包装元素)里，这样可以一个v-if渲染多个元素，而不是每个元素都设置一个v-if

 

 

v-show  用法跟v-if一样，作用也差不多，只不过它只是简单的通过控制css属性来实现是否显示，直接保存在dom里，并非如v-if那样即时控制，而且v-show不支持包装元素templete

但是正因为2直接保存于dom里，如果需要频繁切换，则v-show会更节约效率

 

 

v-else  一定要搭配在 v-if或者v-show后面才能使用，如果v-if/v-show为false不显示时，则会显示v-else的内容

注意如果v-if/v-show写在了<div id ?>里面，则v-else就也得写在<div id> 里   else就不能用于div标签上,

如果是v-if，show单独写在一个div里  则v-else也可以用在div里    如

<div id=app> </div>

<div v-if>...</div> 　　   <div v-else>...</div>

 

 

渲染列表（v-for）列表渲染详见https://www.w3cschool.cn/vuejs2/vuejs2-list.html

 

 

 

 

v-on指令 ，用于监听dom事件，在v-on这里指令参数是监听的事件名，

 许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。所以一般v-on指令=一个方法，方法在methods里面定义

 

 vue里面有2个指令可以缩写，v-on和v-bind

v-bind 

v-on:click="?"  可以缩写为 @click="?"   click属性一般在按钮给按钮添加事件时才会用

 

更复杂一点点的

 

 

 

 

 

 同一个方法用在多个按钮上，但是要实现不同的效果，通过控制方法参数来实现

这叫做内联处理器方法

 

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：

 

 

 这里没有$event和event，效果一样，没明白有什么作用

Vue可以直接创对象 ，不用var ？=new Vue()   ？不必=div里面的id  ，之前说法有错

 

按键修饰符 keyup  可以监听键盘按键值，用于事件处理器v-on里

<!-- 只有在 keyCode键值（这里是文本输入框值） 是 13 时调用 submit() -->
<input v-on:keyup.13="submit">

v-on:keyup.? 可以简写为@keyup.？

Vue 为最常用的按键提供了别名（键值）捕获这些按键就可以用别名代替键值，方便记忆

• enter　　　
• 　tab
• delete (捕获 “删除” 和 “退格” 键)
• esc
• space
• up
• down
• left
• right

也可以可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

Vue.config.keyCodes.f1 = 112    把f1键定义一个别名f1，f1键本来的键值是112

后面就可以/ 可以使用 v-on:keyup.f1捕获f1键

 

 

 

 

以上这些事件监听的方式看似违背了关注点分离，不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难

当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们

 

 

 

v-mound， 表单数据绑定

v-mound它使得在表单输入和应用状态中做双向数据绑定（即数据实时改变）变得非常轻巧

 

 运行后把输入框的Vue改为hhh，message就变为hhhh，上面的<p>段落标签也变为hhh

 

 

 message初值是什么根本是不重要的

 

 

 placeholder可以设置输入框的提示文本，这个提示是如同背景一样的，不需要删除后再输入，如果初值不为空，则输入框内初值会覆盖掉提示信息edit me

运行后输入hhh  is：后面的值也由初值空变为hhh

 

 

多行文本数据绑定

 

 　　　　

 

 

 如果输入文本未满一行主动换行，会输出一个空格

 

 

勾选框

 

 <input>里面type=checkbox表明是选择框　　　　　　　　　　id叫什么无所谓，默认的是checkbox

 

 

单选按钮 和勾选框差不多，只不过只能多选一

 

 

 单选列表，多选列表https://www.w3cschool.cn/vuejs2/forms.html

更详细的也在此链接