在Vue中使用样式
使用class样式
1.数组
<h1 :class="['red','thin']">这是一个h1</h1>
2.数组中使用三元表达式
<h1 :class="['red','thin',flag?'active':'']">这是一个h1</h1>
3.数组中嵌套对象
<h1 :class="['red','thin',{'active':flag}]">这是一个h1</h1>
4.直接使用对象
- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性名是类名，对象的属性可带引号，也可不带, 属性的值 是一个标识符
<h1 :class="classObj">这是一个h1</h1>
JS代码
<script>
var vm=new Vue({
el:"#app",
data:{
flag:true,
classObj:{red:true, thin:true,italic:false,active:true}
},
methods:{}
})
</script>
使用内联样式
1.直接在元素上通过:style形式，书写样式对象
<h1 :style="{color:'red'}">这是一个h1</h1>
2.将样式对象，定义到data中，并直接引用到:style中
- 在data上定义样式
data:{
styleObj1:{color:'red','font-weight':200 }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="styleObj1">这是一个h1</h1>
3.在:style 中通过数组，引用多个 data 上的样式对象
- 在data上定义样式
data:{
styleObj1:{color:'red','font-weight':200},
styleObj2:{ 'font-style':'italic' }
}
- 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
<h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>
Vue指令v-for和key属性
1.迭代数组
<p v-for="(user,i) in list">ID:{{user.id}}----名字:{{user.name}}---索引{{i}}</p>
2.迭代对象中的属性
<!-- 在遍历对象身上的键值对的时候，除了有val key ,在第三个位置还有一个索引-->
<p v-for="(val,key,i) in user">值是:{{ val }}---键:{{key}}--索引:{{i}}</p>
3.迭代数字
<!-- in后面放 普通数组，对象数组，对象，还可以放数字 -->
<!-- 注意：如果使用v-for 迭代数字的话，前面的count值从 1 开始-->
<p v-for="count in 10">这是第{{ count }}次循环</p>
2.20+的版本里，当在组件中使用v-for时，key现在是必须的 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并 且确保它在特定索引下显示已被渲染过的每个元素。 为了给Vue一个提示，以便他能跟踪每个节点身份，从而重用和重新排序现有元素，需要为每项提供一个唯一key属性。 key 的作用主要是为了高效的更新虚拟DOM。
Vue指令v-if和v-show
一般来说，v-if有更高的切换消耗 而v-show有更高的初始渲染消耗，因此，如果需要频繁切换 v-show较好，如果在运行时条件不大可能改变v-if较好。
1.MVC 和 MVVM 的区别 2.学习了Vue中最基本代码的结构 3.插值表达式 v-cloak v-text v-html v-bind(缩写是:) v-on(缩写@) v-model v-for v-if v-show 4.事件修饰符：.stop .prevent .capture .self .once 5.el 指定要控制的区域 data是个对象，指定了控制的区域内要用到的数据 methods 虽然带个s后缀，这里可以自定义方法 6.在 VM 实例中，如果要访问 data 上的数据，或者要访问 methods中的方法，必须带 this 7.在 v-for 要会使用 key 属性(只接受 string / number) 8.v-model 只能应用于表单元素 9.在vue中绑定样式两种方式 v-bind:class v-bind:style
