Vue(指令篇)

不说废话
注意事项都在注释里了,自己看
<!DOCTYPE html>
<html  xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head lang="en" >
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span{
            color: blue;
        }
        <!--解决闪动效果-->
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="my">
v_text方式:&nbsp;&nbsp;&nbsp;<span v-text="v_text"></span>
    <hr/>
{{}}方式:&nbsp;&nbsp;&nbsp;<span>{{czbds}}</span>
    <hr/>
    解决{{}}方式插值带来的闪烁效果,添加class样式,再使用v-cloak指令 <span v-cloak>{{czbds}}</span>
    <hr/>
    v-html:不会作为 Vue 模板进行编译&nbsp;&nbsp;&nbsp;<span v-html="v_html"></span>
    <hr/>
    v-show控制标签的display的属性:&nbsp;&nbsp;&nbsp;<span v-show="isShow">你能看到我?</span>
    <!--@click是v-on:click的简写,@就是v-on-->
    <button @click="changeShow">显示或隐藏左边的文字</button>
    <hr/>
    v-model双向绑定:&nbsp;&nbsp;&nbsp;<input type="text" v-model="v_model"> &nbsp;&nbsp;&nbsp;俺跟着左边的一起变:&nbsp;&nbsp;<span>{{v_model}}</span>
    <br/>v-model相当于:value+@input:&nbsp;&nbsp;<input :value="v_model" @input="v_model = $event.target.value"/>
    <hr/>
if and else不得不说的秘密:&nbsp;&nbsp;<span v-if="ifFlag">是true的时候我才会出来</span>
    <span v-else="ifFlag">值要是false的时候我就出来了</span>
    <!--v-else必须跟紧v-if 或者 v-else-if这两个大哥,要不然自己不会被识别-->
    <!--v-if vs v-show的区别,v-show无论值是什么都会渲染,v-if是个懒汉只有当值第一次为true的时候才会进行渲染-->
    <button type="button" @click="ifFlgClick">点俺可以操控左边的值</button>
    <hr/>
    怎么能少得了我v-for呢?<ul ><li v-for="value in items" v-if="value%2==0">{{value}}</li></ul> <span>v-if比v-for优先级高只显示:value%2==0的数</span>
    <br>
    使用v-for遍历对象,v-bind绑定值
    <select><option v-for="(item,index) in objects" v-bind:value="item.id">{{item.name}}--下标{{index}}</option></select>
</div>
<script src="../js/vue.js"></script>  <!--手欠,写成自闭合,导致没有引入成功-->
<script>
new Vue({
    el:"#my",//表示所能使用的此对象的标签
    data:{
        czbds:"插值表达式",
        v_text:"v_text方式",
        v_html:"<h4>容易导致XSS攻击</h4>",
        isShow:true,
        v_model:"俺是默认值",
        ifFlag:true,
        //定义一个数组
        items:[1,2,3,4,5,6],
        objects:[{id:1,name:"天雁"},{id:2,name:"斗鹰"},{id:3,name:"血雕"}]
    },
    methods:{
        changeShow:function(){
            this.isShow=!this.isShow;
        },
        ifFlgClick:function(){
           this.ifFlag=!this.ifFlag
        }
    }
})
</script>
</body>
</html>
效果大致如下,copy走自己折腾吧