随心记录

引入 vue 文件。（如果是引入的vue2，就引入vue-router3）

　　　　　　　 （如果是引入的vue3，就引入vue-router4）

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

 

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
　<p v-if="seen">现在你看到我了</p>
　<ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>

  </ol>

</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()，
　　 seen: true，
　　 todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
     ]
  }
})

app2.message = '新消息'

app2.seen = false。     //显示的盒子消失了

app2.todos.push({ text: '新项目' })

 

 

Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

 

Vue 实例还暴露了一些有用的实例 property 与方法（比如下面这个）

vm.$el === document.getElementById('example') // => true

 

 

computed properties计算属性中getter 函数和setter 函数

当你定义一个计算属性时，你只需提供一个 getter 函数，Vue 会使用这个函数来计算和缓存该属性的值。

也可以为计算属性提供一个 setter 函数，该函数会在你尝试修改计算属性的值时被调用。

 

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

 

v-for第二个的参数为 property 名称 (也就是键名），第三个参数作为索引

<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>

 

<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>

 

 

.passive修饰符的最佳使用场景是在那些你确定不会调用event.preventDefault()并且想要提高事件响应性能的情形下

 

自定义按键修饰符别名： Vue.config.keyCodes.f1 = 112