vue 基础随笔-

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-else 你可以使用 v-else 指令来表示 v-if 的“else 块”。
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if 顾名思义，充当 v-if 的“else-if 块”,可以连续使用:

vue 中用 key 管理可服用的元素

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-for 和 v-if 同时使用 v-for 具有比 v-if 更高的优先级

控制台报错 [Vue warn]: Error in created hook: "TypeError: handler.call is not a function";
此问题为调用中生命周期钩子函数引起来的错误，解决办法为 生命周期钩子函数 是否有未定义方法 还是 声名了空的钩子

v-for 遍历对象的属性

html 代码:
<div v-for="item in obj">{{item}}</div> //循环出来的 是 值 hello kitty 20 东厂
<div v-for="(item,name,index) of obj">{{name}}---{{item}}---{{index}}</div> //循环得到的 name ---name---hello kitty---0 age---20---1 gender---东厂---2

js代码:

let vm = new Vue({
　　el:‘#app‘,
　　data:{
　　　　obj:{
　　　　　　name:‘hello kitty‘,
　　　　　　age:20,
　　　　　　gender:‘男‘
　　　　}
　　}

})

数据的绑定：

v-model  数据双向绑定

<input v-model="message" placeholder="edit me">// 用法

一般用法：

<label for="checkbox">{{ checked }}</label>

在vue中文本域 textare 绑定数据 在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。
<textarea v-model="message" placeholder="add multiple lines"></textarea>

如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，推荐提供一个值为空的禁用选项。

 注：素材来源于网诺 

vue 基础随笔-

原文：https://www.cnblogs.com/yangyang520/p/11641475.html