Vue_1.1 指令

什么是指令？

1>什么是自定义属性

2>指令的本质就是自定义属性

3>指令的格式：以v-开头 如：v-cloak

============================================================

v-cloak  解决多次刷新出现原文本问题 即“闪动”；指令用法

1-提供样式

<style type="text/css">
    [v-cloak]{
        display:none;
    }
</style>

2-在插值表达式中添加 v-cloak 指令

<div id="bin">
    <div c-cloak>{{msg}}</div>
</div>

原理-先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示值的结果；即：先隐藏，替换好值之后显示最终值。

=============================================

数据绑定指令

v-text  填充纯文本  相比插值表达式更加简洁 没有闪动问题 如果考虑到用户体验用该指令，不用v-cloak

<div id='bin'>
    <div v-text='msg'></div>
</div>

v-html  填充HTML片段 注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

存在安全问题；本网站内部数据可以使用，来自第三方的数据不可以使用

<div id="bin">
    <div v-text="msg"></div>
    <div v-html="msg1"></div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:'bin',
        data:{
            msg:'hello vue',
            msg1:'<h1>HTML</h1>'
        }
    });
</scrpt>

v-pre  显示原始信息  跳过编译过程 如显示{{msg}}  即

<div id='bin'>
    <div v-pre>{{msg}}</div>
</div>

=============================================

数据响应式   

数据的变化来导致页面显示的变化 即 数据来驱动页面显示的内容

个人理解即  直接在 浏览器控制台 修改Vue对象的属性的数据

数据绑定     将数据填充到标签中（上述指令）  单向的  从数据到页面

v-once  只编译一次  （不可以在控制台修改）如果显示的信息 后续不需要修改可以用，可以提高性能

<div v-once>{{msg}}</div>

=============================================

双向数据绑定 

即双向的  数据到页面 和 页面到数据（页面的表单数据 文本域等）

v-model 

<div>
    <input type="text" v-model='msg'>
</div>

输入框中可以修改数据  数据也修改可以修改页面

MVVM设计思想

M（model）V（view）VM（view-model）

VM 实现控制逻辑 将两者结合

view（视图--即提供页面展示效果）--》DOM listeners DOM监听--》model（模型--即提供数据的）

view《-- data bindings 数据绑定《-- model

设计理念--

分而治之--将不同模块的代码通过特定的逻辑整合到一块，

核心 双向绑定的方式 ：从视图到模型用的是事件监听，从模型到视图用的是数据绑定。

=============================================