Vue自学（5）查缺补漏（2020-10-08）

每个绑定都只能包含单个表达式{{单个表达式}}

模板表达式——可使用Math和Date

v-bind:style = [值1， 值2 ]

数组中的值1 和值2 中存储的是一个对象 这个对象里面存储的 css属性和 属性值

v-bind:style =  {  键： 值 }

键 代表 CSS的属性 值 存贮的是 CSS 属性值

v-for = “(item,index) in 数组名”

item 代表数组中的每一项 index 代表索引

<p v-for="(val, key, i) in user">值是： {{ val }} ---   键是： {{key}}     -- 索引： {{i}}</p>

key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM

v-for in 后面可放（普通数组，对象数组，对象，数字）

VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】

如何将data 中的数据渲染到页面上？

利用循环遍历 list  
然后把list 中的数据渲染到页面

计算机属性

   computed: {
         //计算机属性的getter
        reversedMessage: function () {
          return this.message.split('').reverse().join('')
        }

计算机属性有缓存可避免多次执行
若不希望有缓存，用方法替代

事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
Vue 不推荐我们操作DOM 为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符
修饰符是由点开头的指令后缀来表示的

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联
即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。

因此,用 v-on:click.prevent.self 会阻止所有的点击,
而 v-on:click.self.prevent 只会阻止对元素自身的点击。

组件component，越简单，复用率越高