Vue 常用指令、注册指令方法

一、Vue简介

• 一套构建用户界面的渐进式框架。
• 只关注视图层， 采用自底向上增量开发的设计。
• 目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

1.vue安装

两种方式：

• 前端引入：下载vue.js文件，通过<script>标签引入到html文件中
• 命令行安装
  $ cnpm install vue （cnpm：淘宝npm镜像）

vue-cli创建项目参考：vue-cli脚手架项目创建

2.vue项目目录结构解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。 里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。
App.vue	项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js	项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

二、常见指令

指令	说明
v-show	标签是否显示
v-html	输出html代码
v-text	输出文本
v-bind	绑定属性
v-on	绑定事件
v-model	绑定变量
v-for	循环
v-if v-else	条件判断
v-pre	跳过这个元素
v-once	只执行一次
v-cloak	解决初始化慢导致页面抖动

1. 数据绑定 {{...}}

<!-- {{}} -->
 <div id="app">
     <p>{{message}}</p>        <!--   {{}} 数据渲染 -> 文本插值    -->
     <p>{{info}}</p>
 </div>
 <script>
     new Vue({
         el:'#app',    //将vue对象与选择器进行绑定
         data:{			//绑定的变量的值
             message:'第一个vue程序',
             info:'大家好'
         }
     })
 </script>

2. 输出文本/html标签： v-text,v-html

<!-- v-text,v-html  -->
<div id="it">
    <div v-text='x'></div>
    <input type="checkbox" >a
    <input type="checkbox" >b
    <input type="checkbox" >c
    <input type="checkbox" @click='qita'>other
    <br><br>
    <div v-html='h' v-show='t'></div>
</div>

<script>
    let vt=new Vue({
        el:'#it',
        data:{
            t:false,
            h:'<textarea></textarea>',   //输出html代码,页面显示该标签
            x:'你好'
        },
        methods:{
            qita:function(){
                this.t=!this.t
            }
        }
    })
</script>

3. 标签是否显示： v-show="false/true"

<!-- v-show -->
<div id="open">
    <p>你好</p>
    <p v-show='temp'>射雕</p>
    <p v-show='ok'>无效</p>
</div>

<script>
    let vm=new Vue({
        el:'#open',
        data:{
            temp:true,
            ok:false
        }
    })
    // 设置定时器
    window.setInterval(function(){
        vm.temp=!vm.temp
    },1000)

</script>

v-if,v-show的区别：

• v-if底层待用appendchild实现，v-show通过样式的display控制是否显示
• 加载性能： v-if>v-show
• 切换开销：v-show>v-if
• v-if是惰性的，真正的条件渲染，会确保在切换过程中条件块内的监听事件器和子组件适当地被销毁和重建
• v-show也是惰性的，如果在初始渲染条件为假时，什么都不做，直到条件为真，才开始渲染

4. 条件判断：v-if

<!-- v-if -->
    <div id="pan">
        <div v-if="role=='jock'">
            <h1>欢迎jock</h1>
        </div>
        <div v-else-if="role=='rose'">
            <h1>欢迎rose</h1>
        </div>
        <div v-else>
            <h1>~~</h1>
        </div>
    </div>
    <script>
        new Vue({
            el:'#pan',
            data:{
                role:'rose'
            }
        })
    </script>

5. 循环输出：v-for

<!-- v-for -->
<div id="for">
    <ul>
        <li v-for='(item,index) in arr'>{{index}}:{{item}}</li>
    </ul>
    <ul>
        <li v-for='(item,key) in obj'>{{key}}:{{item}}</li>
    </ul>
    <table border='1'>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr v-for='item in objs'>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.age}}</td>
        </tr>
    </table>
</div>
<script>
    new Vue({
        el:'#for',
        data:{
            arr:['jennie','rose','lisa','jisoo'],
            obj:{a:'jack',b:'lose',c:'join'},
            objs:[
                {
                    id:01,
                    name:'张三',
                    sex:'男',
                    age:12
                },
                {
                    id:02,
                    name:'李四',
                    sex:'男',
                    age:14
                },
                {
                    id:03,
                    name:'王五',
                    sex:'男',
                    age:13
                },
                {
                    id:04,
                    name:'赵六',
                    sex:'男',
                    age:11
                }
            ]
        }
    })
</script>

6. 绑定属性/事件v-bind v-on

<!-- v-bind  v-on -->
 <style>
     .info{
         color:aquamarine
     }
 </style>
 <div id="bin">
     <a v-bind:href='link' v-bind:class='{info:flag}' v-on="{mouseenter:ok,mouseleave:no,click:myclick}">baidu</a>
     <!--简写： <a :href='link' :class='{info:flag}'>baidu</a> -->
 </div>
 <script>
     new Vue({
         el:'#bin',
         data:{
             link:'http://www.baidu.com',
             flag:true
         },
         methods:{
             ok:function(){
                 console.log('鼠标进入')
             },
             no:function(){
                 console.log('鼠标移出')
             },
             myclick:function(){
                 console.log('跳转百度链接')
             }
         }
     })
 </script>

7. 双向交互获取值 v-model

<!-- v-model 双向交互，获取值-->
<div id="model">
    <input type="radio" v-model='gender' value='男'>男
    <input type="radio" v-model='gender' value='女'>女
    <br>
    性别：{{gender}}

    <br><br>

    <p>请选择：</p>
    <select v-model='girlfriends'>
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="d">d</option>
    </select>
    <br>
    选择的是：{{girlfriends}}

    <br>
    <br>
    <textarea v-model='text'></textarea>
    <br>
    {{text}}
</div>

<script>
    new Vue({
        el:'#model',
        data:{
            gender:'',
            girlfriends:'',
            text:'红红火火恍恍惚惚'
        }
    })
</script>

8. 只执行一次： v-once

<!-- v-once -->
<div id="once">
    <input type="text" v-model='opt'>
    <br>
    <p>{{opt}}</p>
    <p v-once>{{opt}}</p>
</div>
<script>
    new Vue({
        el:'#once',
        data:{
            opt:'grv'
        }
    })
</script>

9. 跳过这个标签编译：v-pre

<!-- v-pre  跳过这个标签的编译-->
<div id="pre">
    <p v-pre>{{mes}}</p>
</div>
<script>
    new Vue({
        el:'#pre',
        data:{
            mes:'这个标签会被跳过编译，浏览器不会有它'
        }
    })
</script>

三、注册指令

1.注册全局指令：

<!-- Vue.directive({})    注册全局指令 -->
<div id="dir">
    <p>页面载入时，input标签自动获得焦点</p>
    <input type="text" v-focus>     <!-- v-focus是自己注册的指令 -->
</div>
<script>
    Vue.directive('focus',{
        inserted:function(el){        //inserted 表示当指定的元素插入到其父元素使执行这个函数
            el.focus()       //el 表示被绑定的对象，使被绑定的对象获得焦点
        }
    })
    new Vue({
        el:'#dir'
    })
</script>

2.注册局部指令

<!-- directives:{}  注册局部指令 -->
<div id="dirs">
    <input type="text" v-focu>
</div>

<script>
    new Vue({
        el:'#dirs',
        directives:{
            focu:{
                inserted:function(el){
                    el.focus()
                }
            }
        }
    })
</script>