V-指令篇

v- 开头都是指令

    <script>
        // 每一个Vue的应用都是通过创建一个Vue的实例来启动的
        // 在实例化时，需要传入一个选项对象
        var app = new Vue({
            el:"#app", //提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标,可以是 CSS 选择器和html元素
            data: {    //Vue实例的数据对象，Vue将会递归data的属性并转换为getter/setter，只有data内的数据属性是响应的。data必须是函数!
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        })
    </script>

---

原始的HTML

v-html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

v-bind 绑定数据

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-model 表单数据双向绑定

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-for 循环遍历

v-show 显示与隐藏

不会从dom移除元素display none;

v-if 显示或隐藏

从dom元素中移除

v-on 事件绑定

#事件修饰符
    .stop:同等于调用event.stopPropagation()阻止事件的冒泡方法，不让事件向documen上蔓延。
    .prevent:等同于调用event.preventDefault()阻止默认事件的方法，但是会发生冒泡，冒泡会传递到上一层的父元素。
    .capture:使用capture模式添加事件监听器。
    .self:只当事件是从监听元素本身触发时才触发回调。

    #按键修饰符
    <input v-on:keyup.13="submit"/>
    监听回车时触发的submit函数(回车的keycode值为13)，用于处理常见的用户输入完直接按回车键提交
    "submit"按键别名，例如:enter,tab,delete。
    
    > $emit 触发事件主要是触发父级的事件 只会向上通知 并且只通知自己的父组件
    >.native 监听原生事件
    例如：<my-component v-on:click .navtive="onClick"></my-component>

v-text 类似el.innerText

v-html 类似el.innerHtml

v-class 类名

v-style 原生style

v-once 只绑定一次事件

v-cloak 防闪烁

v-pre 跳过变异这个元素和子元素

v-else-if

v-else

Vue.extend() 构造子组件