v-if
条件为真 所在标签元素显示 为假不显示 原理： 不加载该元素
v-show
条件为真 所在标签元素显示 为假不显示 原理： 设置display:none;
你会看到同样的内容，但两者问确实存在其他的影响和差异。 首先 ，因为使用 v-if 隐藏的内部元素不会被显示， vue 不会尝试生成对应的 HTML 代码： 而对于 v-show 指令，事实并非如 。这意味着隐藏尚未加载的内容时， v-if 令更好一些
v-for 循环
循环数组 直接写item出来的时数组元素每一项内容
<ul v-for="(value) in dog2" :key="value.name">
<li> {{value}}</li>
</ul>
dog: [{
name: "大",
url: "www",
slogan: "热爱知识！"
}, {
name: "大白",
url: "www.dreamstudio",
slogan: "热爱知识，传递"
}, {
name: "大白菜",
url: "www.dreamstudio.top",
slogan: "热爱知识，传递技术！"
}],
循环对象 循环多项（value,key）固定顺序
<ul v-for="(value,key) in dog1" :key="value.name">
<li> {{value}} - {{key}}</li>
</ul>
--------------------------------------------------------------------------------------------
v-bind 指令用于将某个值绑定到 HTML 属性上。通常用冒号表示 使这个属性值变成动态的可加可减
响应式
created 函数方法会在应用初始化完成后执行。 vue 的生命周期钩子会在后面详细介绍， 所以暂时不用太过担心这个函数 这个方法中的 this.seconds 直接指向 data 对象中的 相应值，并且通过操控它来更新模板。
created() {
setInterval(() => {
this.time++;
}, 1000)
},
//当time改变时vue可以检测到 做出响应vue响应式的实现原理
vue修改了添加到了data上的对象当该对象发生改变时vue会收到通知，从而实现响应式。对象的每个属性会被替换为 getter setter 方法 因此可以像使用正常对象一样去使用他们，当你修改时vue会知道他已经发生改变
注意事项
响应式对于对象而言 要注意必须要为vue实例初始化时候添加的，该实力创建之后继续添加的属性就不再是相应式的
canst vm = new Vue({
data: {
formData: {
time:'som use'
}
}
});
vm.formData.name = 'username';
//time是响应式的 name属性不是后加的
非i响应式的解决方式
1、
提前定义好属性名就好在data中 将值赋值为默认值(最简单最常用)
formData: {
use name ：'someuse'
name: undefined
}2、覆盖此对象重新创建该对象
vm.formData =Object.assign({}, vm.formData, {
name: 'Some User'
});
3、set方法
vue提供了Vue.set（）方法
对于数组而言要注意
不可以通过数组索引来设置数组的值
解决方式
使用 splice （） 方法在去移除旧元素井添加新元素
vm.dogs.splice(2, 1,’Bob ’);
2、vue提供了Vue.set（）方法
Vue.set(vm.dogs, 2,’Bob ’);
改变数组的长度
不可以vue不可以监测数组的改变
--------------------------------------------------------------
v-bind 属性绑定 可以用：：代替
<body>
<div id="vue-div">
//使用（v-bind:）该属性值与data中相关联可以改变
<img v-bind:src="imgUrl" style="width: 50px;height: 50px;display: block;"/>
使用（:src），简写方式
<img :src="imgUrl" style="width: 50px;height: 50px;"/>
</div>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#vue-div",
data: {
msg : "aabbdDD-Hello-World",
imgUrl : "https://cn.vuejs.org/images/logo.png"
}
});
</script>
</body>
</html>v-bind对于class和style的绑定 区别于其他属性
1、class绑定
<div :class="['active']">ddd</div>
<div :class="{active:bool}">ddd</div>
<div class="ddd" tabindex="-1">ddd</div>
//对象跟数组可以写直接量 也可以配合写变量
style属性的绑定
<div :style="['active']">ddd</div>
<div :style="{active:bool}">ddd</div>
//对象跟数组可以写直接量 也可以配合写变量-------------------------------------------------------
表单双向数据绑定 v-model input标签value与vue实例对象中的数据相互影响
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
- text 和 textarea 元素使用
value属性和input事件； - checkbox 和 radio 使用
checked属性和change事件； - select 字段将
value作为 prop 并将change作为事件。
修饰符
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：（输入完成后触发） 相当于由input事件转移到了change事件 会导致双向数据绑定失去作用
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
不会影响双向数据绑定
<input v-model.trim="msg">