[JavaScript知识库]Vue的基础语法学习和总结

声明式渲染

1. 数据绑定的形式：Mustache语法（双大括号）的文本插值；

<template>
   {{message}}
</template>

<script>
var app = new Vue({
    el:"#app",
    data:{
      message:'Hello Vue'
    }
});


</script>

2.

Vue生命周期钩子：

? beforeCreate

??created

??beforeMount

??mounted

??beforeUpdate

??updated

??beforeDestroy

??destroyed

3. v-指令：表示Vue提供的特殊属性Attribute；

1. v-bind?绑定值，v-bind:title 缩写:title，表示一个js表达式而不是字符串；
2. v-for 循环，绑定数组的数据，渲染一个项目列表，v-for的优先级高于v-if；
3. v-on 事件监听，v-on:click缩写@click
4. v-model 双向数据绑定，本质上是v-on:input 和v-bind 的语法糖；
5. v-once?执行一次性地插值，当数据改变时，插值内容不会更新
6. v-html?
7. v-if? 条件渲染，切换开销更大；
8. v-show 条件展示，不同于v-if，v-show始终被渲染，只是切换元素的display属性，初始渲染开销更大；

4. 修饰符(modifier)??.??

? ? ?用于指出一个指令应该以特殊方式绑定 ；

1. ?.prevent修饰符：?对于触发的事件调用event.preventDefault();
2. ?.stop?：阻止单击事件继续传播;
3. ?.capture?：添加事件监听器时使用事件捕获模式;
4. ?.self?：只有当event.target是当前元素自身时才触发处理函数;

5. .native?：根元素上监听一个原生事件;

6. .sync?：带有.sync修饰符的v-bind不能和?表达式?一起使用，只能提供想要绑定的property名，例如?：?v-bind:title.sync?='doc.title' ;