前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
模板语法
插值（模板字符串）
可以使用 {{ }} 来显示变量。这样的话，如果内部修改 author 的话，页面上也会实时更新。v-once 指令，可以执行单次渲染，后续变化不在更新。delimiters: ['${', '}'] 通过这个配置项，我们可以修改为习惯的分隔符。
<template>
<span>Message: {{ author }}</span>
</template>
<script>
export default {
data(){
return {
author: 'www.lilnong.top'
}
}
}
</script>v-text 和 v-html
插值的写法基本等价于 v-text。
当然有些时候我们有可能会需要渲染 HTML，比如说 表情、富文本等等，这个是我们可以使用 v-html。
当然，不建议使用 v-html ，因为有可能会有 xss 的问题。
<template>
<div>
<span>Message: {{ author }}</span>
<span v-text="author"></span>
<span v-html="author"></span>
</div>
</template>
<script>
export default {
data(){
return {
author: 'www.lilnong.top，<span style="red>lilnong.top</span>'
}
}
}
</script>属性
绑定动态属性需要使用 v-bind（缩写是:）。下面这两种写法是等价的
<span v-bind:id="author"></span>
<span :id="author"></span>如果是 disabled 这类的属性，在值为 false 时是不会渲染在DOM 上的。因为这种属性在 HTML5 规范中，存在即为 true。
style
style 属性是特殊处理过的，你可以 直接使用对象形式。
<template>
<div>
<span :style="authorStyle">Message: {{ author }}</span>
</div>
</template>
<script>
export default {
data(){
return {
author: 'www.lilnong.top，<span style="red>lilnong.top</span>',
authorStyle: {
color: '#0cc'
}
}
}
}
</script>class
class 属性是特殊处理过的，你可以 直接使用对象形式。
-
对象形式。如下，
item.checked为真时，会增加checked这个class。item.checked && item.age >= 18为真时，会增加isHigh这个class。{ checked: item.checked, isHigh: item.checked && item.age >= 18 } -
数组形式。默认给所有都加上了
checkbox这个class。['checkbox',{ checked: item.checked, isHigh: item.checked && item.age >= 18 }]
事件
事件是我们开发中必不可少的东西。比如 click、input 等等。
我们在 Vue 中，绑定事件使用 v-on（缩写是 @）来绑定事件。下面两种写法是等价的。
<button v-on:click="clickHandler">btn</button>
<button @click="clickHandler">btn</button>指令
指令 (Directives) 带有 v- 前缀，如刚才我们用到的 v-bind、v-on、v-text、v-html。
指令的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
<a v-bind:href="url">...</a>
<a :href="url">...</a>
<button v-on:click="clickHandler">btn</button>
<button @click="clickHandler">btn</button>
<span v-text="author"></span>
<span v-html="author"></span>Vue 自带的指令
- v-text 更新元素
textContent，我个人感觉还是模板字符串好用 - v-html 更新元素的
innerHTML，这里需要注意 XSS 防护哟。 - v-show 切换元素的
display，来实现显示隐藏。 - v-if、v-else、v-else-if 通过组件销毁重建，来实现显示隐藏。
-
v-for 遍历，这里要注意使用
:key。<div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, name, index) in object"></div> -
v-on 用于绑定事件。组件上如果想触发元素的原生事件可以用
.native。缩写是@-
修饰符
-
.stop- 调用event.stopPropagation()。 -
.prevent- 调用event.preventDefault()。 -
.capture- 添加事件侦听器时使用 capture 模式。 -
.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。 -
.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。 -
.native- 监听组件根元素的原生事件。 -
.once- 只触发一次回调。 -
.left- (2.2.0) 只当点击鼠标左键时触发。 -
.right- (2.2.0) 只当点击鼠标右键时触发。 -
.middle- (2.2.0) 只当点击鼠标中键时触发。 -
.passive- (2.3.0) 以{ passive: true }模式添加侦听器
-
-
-
v-bind 设置属性。缩写是
:-
修饰符：
-
.prop- 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？) -
.camel- (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持) -
.sync(2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的v-on侦听器。
-
-
-
v-model 用于实现数据双向绑定，其实是个语法糖
- v-slot 为插槽传入 prop 的时候使用。默认是
default，缩写是# - v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
- v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
[v-cloak] { display: none }一起用时，这个指令可以 隐藏未编译的 Mustache 标签直到实例准备完毕。 - v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
动态指令
从 2.6.0 开始，可以用 方括号 （\[ 和 \]）括起来的 JavaScript 表达式作为一个指令的参数：
<a v-bind:\[attributeName\]="url"\> ... </a\>
<a v-on:\[eventName\]="doSomething"\> ... </a\>修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。