Vue自定义指令
vue中的指令很多，例如v-if,v-for,v-model等等，当然尤大大也给我们提供了自定义属性这一 玩意儿，让我们也可自己定义指令,例如v-hello，v-fuck等等，那我们为什么需要自定义指令呢？那好，我就问你一句话，你在写项目当中有没有某一刻有想要操纵DOM 的冲动，但是vue很明确是不能直接操纵DOM的，那这时候就可以用到我们的自定义指令了。具体操作，如下所示：
主要是通过Vue.directive来定义!
  <script>
        Vue.directive('hello',{
            inserted(){//这个名字是固定的
                console.log("加油,中国！")
            }
        })
        var vm=new Vue({
            el:"#box"
        })
    </script>

具体用法：
    <div id="box">
        <div v-hello>加油，武汉!</div>
    </div>

当然了，我们的自定义指令也可以传参。具体用法，如下所示：
其实道理一样，只是我们传递了el和bind两个参数。el是节点的意思，大家都知道，而bind是从哪儿来的呢？
  <script>
        Vue.directive('color',{
            inserted(el,bind){
                console.log(bind)
                el.style.background=bind.value
            }
        })
        var vm=new Vue({
            el:"#box"
        })
    </script>

通过打印bind我们可以看到，它包含我们指令的所有信息


在使用过程中我们需要注意的就是要将传递的参数当做字符串来传，所以需要再加“ ”



接下来我们看一种情况



以我上面这种写法，我在控制台当中通过vm.mycolor:"red"来改变mycolor的值



然而视图并没有更新，那是因为指令也是有生命周期的，inserted:插入（只执行一次）

所以要想达到上面的那种效果，我们要引进另一生命周期,update：更新阶段



这样，就达到了我们想要的效果了。

1.了解vue
MVP典型应用:安卓

MVC典型应用:java(MVC可以在view中直接使用model的数据)

MVVM典型应用:Vue
MVVM：
M：model   模型层
v:view 视图层
VM:view model(桥梁,V与M连接的桥梁，也可以看作为控制器MVC的C层，监听两者动态)
框架的好处：

降低开发难度；
符合开发规范，更容易把控项目进度；
增强代码的复用性；

MVC 思想：一种将数据层与视图层进行分离的设计思想
MVVM思想：意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之相同
MVP思想：MVP的全称为Model-View-Presenter，Model提供数据，View负责显示，Presenter负责逻辑的处理
创建视图模型，（VM层，等同于Vue实例）
建议：el:绑定的时候，用ID
声明式渲染:只需要告诉程序想要什么效果，其他的都交给程序
命令式渲染：之前的JS（命令程序去做什么，程序就按照命令一步步滴去做）
Vue数据驱动（VM实时监听）:
即：视图的内容随着数据的改变而改变
模板语法：{{}}响应式的展示（双大括号语法， 双大括号赋值大法）
如果在表达式中写入过多的逻辑代码，那么违背了最初的设计思想；也就使代码看起来很复杂，难以维护
Vue.js的核心：数据驱动和组件化
Vue.js 指令：v-开头的特殊属性，给HTML标签添加更多的特殊功能。多个指令之间用空格隔开
1.v-show:是用css的display属性
eg:v-show=表达式；v-show=“bool”;
元素一直存在只是被动态设置了display：none
2.v-model：作用主要是用于表单数据的双向绑定
v-model=变量
v-model和复选框关联，勾选后，其值就会变成bool值
v-model和单选框关联，勾选后，其值就会变成value值
v-model和下拉框关联，勾选后，其值就会变成option的value值（v-model和select绑定）
双向绑定的原理：数据劫持（拦截）结合发布订阅模式
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的；

数据劫持:当我们访问或设置对象的属性的时候，都会触发Object.defineProperty()函数来拦截（劫持），然后在返回(get)或设置(set)对象的属性的值。并且当数据发生改变的时候做出反应。
发布者-订阅者模式:其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。
3.v-on指令简写：@事件名  eg     @click=“fun()”
作用：为HTML元素绑定事件监听
v-on:click=“func()”
注：函数定义在 methods 配置项中
4.v-for指令
v-for="(v,i) in arr"
5.v-bind指令简写为   ：class="bool?red:’  ’  "
v-bind:href=“url”
作用：绑定HTML的属性
绑定多个属性(不能使用简写)：

<img v-bind=‘{src:myUrl, title: msg}’ />
<li v-for="(v,i) in arr"> 
                    <!-- <p>{{v.srcm}}</p> -->
                    <!-- 注意v-bind:src='v.srcm'，虽然v.srcm是变量但是v-bind会自动解析，所以不需要用模板语法 -->
    <div ><img v-bind:src='v.srcm'></div>
    <p class="myPos" >{{v.con}}</p>
</li>

6.v-if 指令
v-if和v-show的效果基本一样
区别在于：
v-if直接对元素的dom进行添加和删除，有更高的切换消耗（安全性高）；
v-show有更高的初始化的渲染消耗；（对安全性无要求选择）
7.v-else-if指令
8.v-else指令（搭配v-if使用）语法：
{{text}}
9.v-text指令，简写{{}}，一般不用
10.v-html指令，用的较少，安全性较低
语法：

11.v-once指令，一次性插值（一旦插入，不能修改）
语法：
{{text}}
todoList案例：

 <div id="box">
        <h2>任务列表</h2>
        <p>任务总数：<span>{{obj.length}}</span>还有：<span>{{surplus()}}</span>未完成 【<span class="finish" @click="finish()">完成</span>】</p>
        <ul>
            <li v-for="(v,i) in obj">
                <input type="checkbox" v-model="v.colbool">
                <span  v-if="v.style" @click="edit(v)" v-bind:class="v.colbool?'gray':''">{{v.task}}</span>
                <input type="text" v-model="v.task" @blur="edit(v)" v-else>
            </li>
        </ul>
        <input type="text" v-model="newtitle"><button @click="add()" v-bind:disabled="btnbool">添加</button>
    </div>
    
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        new Vue({
            el:"#box",
            data:{
               obj:[
                   {task:"切图",style:true,colbool:false},
                   {task:"编写JS代码",style:true,colbool:false},
                   {task:"编写文档",style:true,colbool:false},
                   {task:"编辑项目日志",style:true,colbool:false}
               ],
               newtitle:'',
                btnbool:true
            },
            methods:{
                add(){
                    this.obj.push({task:this.newtitle,style:true,colbool:false})
                    this.newtitle=""
                },
                edit(v){
                    if(v.colbool==true){
                        return;
                    }
                    v.style=!v.style
                },
                surplus(){
                    let num=0;
                    this.obj.forEach(function(value,i){
                        // console.log(value,i)
                        if(value.colbool==false){
                            num++;
                        }
                    });
                    return num;
                },
                finish(){
                    var arr=this.obj;
                    this.obj=[];
                    // for(var i=0;i<arr.length;i++){
                    //     if(arr[i].colbool==false){
                    //         this.obj.push(arr[i])
                    //     }
                    // }
                    var that=this;
                    arr.forEach(function(value){
                        if(value.colbool==false){
                            //注意this 的指向问题
                            that.obj.push(value)
                        }
                    })
                }
            },
            watch:{
                newtitle(){
                    if(this.newtitle!=''){
                        this.btnbool=false 
                    }else{
                        this.btnbool=true
                    }
                }
            }
        })
    </script>

模板语法 {{}}
即 {{}}
作用：在视图中渲染数据
注意：
 - 模板中是js环境（必须放表达式或值），不会去放语句。
 - 模板中的变量和函数必须是实例中的属性或者方法
 - 对于js全局函数，有些可以使用，有些不可以，即（白名单）：
 对于全局window下的方法Vue设置了白名单，只有在白名单下的方法，模板才可以使用。
 `白名单`：
 'Infinity,undefined,NaN,isFinite,isNaN,'+'parseFloat,parseInt,decodeURI,decodeURIComponent
 ,encodeURI,encodeURIComponent,'+'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,
 Set,JSON,Intl,' +'require'（摘自官网）
 - if结构不能用，if-else也不能
 if可以用逻辑运算符代替，即（&& 和 ||），这里涉及到短路运算（不懂的小伙伴可以私聊哦）
 if-else可以用三目运算符，即	a>b?c:d

指令
作用：扩展了普通html属性的功能（其用法跟自定义属性相同）
语法：v-指令名="值"

具体常用的Vue指令有：
+ v-model
将表单控件的value属性与Vue中的数据进行`双向绑定`
+ v-text
将元素的文本内容与一个Vue的数据进行绑定
这里需要注意的是：{{}}模板引擎和v-text都不会渲染富文本数据
+ v-html
同v-text，但v-html会渲染富文本数据
+ v-bind
将一个普通的任意标签的属性（可以是自定义属性）的值与Vue的一个数据进行绑定，可以简写成 :属性
+ v-on
将Vue元素的事件与Vue的方法进行绑定，可以简写成 @事件
绑定方法为：

<button @click="fn">按钮</button>
new Vue({
  methods:{
    fn(e){
      // 这种绑定方式 fn就是事件函数，第一个参数就是事件对象
    }
  }
})
<button @click="fn()">按钮</button>
// 需要传参的时候
new Vue({
  methods:{
    fn(){
      // 这种绑定方式 fn是普通调用，不再是事件函数，如果需要事件对象则手动传入$event,
      // $event是Vue给我们提供的,就是时间对象,$event 挂载到Vue.prototype上的
    }
  }
})
方法中改变数据
this.数据 = 值
eg:
 {
   data:{
     isShow:true
   },
   methods:{
     fn(){
       this.isShow = !this.isShow
     }
   }
 }
 另外，Vue还给我们提供了事件修饰符：
 .stop	阻止事件冒泡
 .prevent	阻止默认事件
 .capture	事件捕获阶段提前触发
 .self	只能自己触发，其后代元素无法触发
 .once	事件只触发一次

总结
以上就是常见指令，即

<元素 v-指令=“xxx”>

指令的值需要写在引号中，且：

1.为js环境

2.里面可以写表达式，不能用语句

3.全局函数中只能使用白名单中的

即相当于模板中的语法，但v-model有点特殊，小伙伴们可以摸索一下。

v-if
v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。
如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；
否则，对应元素的一个克隆将被重新插入DOM中
<template>
    <div id="app">
        <h1>Title</h1>
        <p>paragraph 1</p>
        <p>paragraph 2</p>
    </div>
</template>
 
 
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            greeting: true
        }
    })
</script>

v-show
v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素被隐藏。查看DOM时，会发现元素上多了一个内联样式style=“display:none”。
<template>
    <div id="app">
        <h1>Title</h1>
        <p v-show="ok">我是对的</p>
        <p v-show="no">我是错的</p>
    </div>
</template>
 
 
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            ok: true,
            no: false
        }
    })
</script>

v-model
v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素。
<div id="example">
    <form>
        姓名：
        <input type="text" v-model="data.name" placeholder="姓名"/>
        <br />
        性别：
        <input type="radio" id="one" value="One" v-model="data.sex"/>
        <label for="man">男</label>
        <input type="radio" id="two" value="Two" v-model="data.sex"/>
        <label for="male">女</label>
        <br />
        <input type="checkbox" id="jack" value="book" v-model="data.interest"/>
        <label for="jack">阅读</label>
        <input type="checkbox" id="john" value="swim" v-model="data.interest"/>
        <label for="john">游泳</label>
        <input type="checkbox" id="move" value="game" v-model="data.interest"/>
        <label for="move">游戏</label>
        <input type="checkbox" id="mike" value="song" v-model="data.interest"/>
        <label for="mike">唱歌</label>
        <br />
        身份：
        <select v-model="data.identity">
            <option value="teacher" selected>教师</option>
            <option value="doctor">医生</option>
            <option value="lawyer">律师</option>
        </select>         
    </form>
</div>
<script type="text/javascript">
    new Vue({
        el: '#example',
        data: {
            data:{
               name:'',
               sex:'',
               interest:[],
               identity:''
            }
        }
    })
</script>

v-for
<template>
    <div id="app">
        <h1>Title</h1>
        <ul>
            <li v-for="item in items" class="item-{{$index}}">
                {{$index}} - {{parentMessess}} - {{item.msg}}
            </li>
        </ul>
    </div>
</template>
 
 
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            : '前端开发基础技术',
            items:{
                {msg: 'html'}，
                {msg: 'css'},
                {msg: ‘javascript'}
            }
        }
    })
</script>

v-text
v-text 指令可以更新元素的textContent.
<span v-text="msg"></span> <br/>
<span>{{msg}}</span>

v-html
v-html指令更新元素的innerHTML 能解析html标签
<template>
    <div id="app">
        <h1>Title</h1>
        <p v-html="msg"></p>
        <p>{{msg}}</p>
    </div>
</template>
 
 
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            msg:'<p>效果一样</p>'
        }
    })
</script>

v-bind
v-bind指令用于响应更新HTML特性，将一个或者多个attribute，或者一个组件prop动态绑定到表达式简写为：。
<template>
    <div id="app">
        <h1>Title</h1>
        <div :class="[classA,{classB:isB,classC:isC}]”></div>
    </div>
</template>
 
 
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            classA: 'A',
            isB: false,
            isC: true
        }
    })
</script>

v-on
v-on指令用于绑定事件监听器。事件类型由参数指定。
如果访问原始DOM事件，可以使用$event传入方法 ，简写为@
<template>
    <div id="app">
        <h1>Title</h1>
        <p> {{}} </p>
        <button v-on:click="doThis">doThis</button>
    </div>
</template>
 
 
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 'hello world',
        },
        methods: {
            doThis: function(){
                this.msg = 'hello world change !!!'
            }
        }
    })
</script>

v-cloak
解决差值表达式闪烁的问题
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style>
        [v-cloak]{
            display: none;
        }
</style>
</head>
 
<body>
   
    <div id="app" v-cloak>{{msg}}</div>
 
    <script>
            new Vue({
                el: '#app',
                data: {
                    msg: '欢迎Vue!'
                }
            })
        </script>
</body>
 
</html>

v-pre
跨过当前的标签不解析
<div id="app">
   <span v-pre>{{msg}} 这句不会编译</span>
 </div>
 <script>
   var app =new Vue({
     el:'#app',
     msg:'this is a message'
   });
 </script>