Vue.js入门

2018-06-24 02:00:28来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

引用vue.js文件

<script src="https://unpkg.com/vue/dist/vue.js"></script>

Vue.js常用指令

  • v-if

v-if指令可以根据表达式的值在DOM中生成或移除元素

<div id="xiu">
    <p v-if="kang">修抗</p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            kang: true
        }
    })
</script>
  • v-show

v-show指令可以根据表达式的值在DOM中隐藏或显示元素

如果隐藏的话,会在元素中添加一个内联样式:style="display:none"

<div id="xiu">
    <p v-show="kang">修抗</p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            kang: false
        }
    })
</script>

v-show指令有更高的初始渲染消耗,需要频繁切换时使用

v-if指令有更高的切换消耗,运行时条件不太可能改变时使用

  • v-else

v-else指令为false时可以显示表达式的值

v-else指令需要和v-if指令一起使用

<div id="xiu">
    <P v-if="ok">true</P>
    <p v-else="ok">false</p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            ok: false
        }
    })
</script>
  • v-text

 v-text指令与{{ }}效果一样

<p v-text="xiu"></p>
<p>{{xiu}}</p>
  • v-html

 v-html指令可以动态渲染任意HTML判断

<div class="xiu" v-html="kang"> </div>
<script>
    new Vue({
        el:".xiu",
        data: {
            kang:"<h1>标题</h1>"
        }
    })
</script>
  • v-pre

 v-pre指令用来跳过这个元素和它的子元素的编译,直接显示原始的Mustache标签:{{kang}}

<div id="app">
    <span v-pre>{{kang}}</span>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            kang: 'Hello World!'
        }
    })
</script>
  • v-cloak

 v-cloak指令防止刷新数据之前闪烁{{name}}

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak >
    <p>{{name}}</p>
</div>
<script>
new Vue({
    el:"#app",
    data: {
        name: "修抗"
    }
})
</script>
  • v-bind

 v-bind指令用于响应式更新HTML特性(v-bind可以默认不写)

<div id="xiu">
    <a v-bind:href="url">百度</a><!-- v-bind可以默认不写 -->
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            url:"https://www.baidu.com/"
        }
    });
</script>

 v-bind显示或隐藏多个css属性

第一种方式:

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="[size,color]">文字颜色</p>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            size: 'fontSize',
            color: 'backgroundColor'
        }
    });
</script>

第二种方式:

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="{fontSize:true,backgroundColor:true}">文字颜色</p>
</div>
<script>
    new Vue({
        el: '#box'
    });
</script>

第三种方式:

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="{fontSize:z,backgroundColor:c}">文字颜色</p>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            z: true,
            c: true
        }
    });
</script>

第四种方式:

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="json">文字颜色</p>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            json: {
                fontSize:true,
                backgroundColor:true
            }
        }
    });
</script>
  • v-model

v-model指令用于input、select、text、CheckBox、radio等表单控件元素上创建双向数据绑定

<div id="xiu">
    <input type="checkbox" v-model="kang">
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            kang: true 
        }
    })
</script>

v-model指令的lazy参数(同步输入框的值和数据,lazy可以默认不写)

<div id="xiu">
    <input v-model="msg" lazy/>
    {{msg}}
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            msg:'修改文本框的值查看效果'
        }
    })
</script>

v-model指令的debounce参数(设置一个最小延迟,比如在input输入内容时随时发送Ajax请求,设置5000毫秒发送一次)

<input v-model="msg" debounce="5000"/>
  • v-for

 v-for指令语法:xiu : kang (kang是源数据数组,xiu是kang的别名)

方法一:(绑定数据到数组)

<div id="xiu">
    <ul>
        <template v-for="place in places">
            <li>{{ place.name }}</li>
        </template>
    </ul>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            places: [
                { name: '厦门' },
                { name: '漳州' },
                { name: '福州' }
            ]
        }
    })
</script>

方法二:(通过对象的属性来迭代数据)

value对象的值(必填)

key对象的属性

index对象的索引

<div id="xiu">
    <p v-for="(value,key,index) in object">
        {{ index }}{{key}}:{{value}}
    </p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            object: {
                name: "修抗",
                url: "www.xiukang.com",
                index: "教育"
            }
        }
    })
</script>

方法三:(循环一个整数)

<div id="xiu">
    <p v-for="value in 10">
        {{value}}
    </p>
</div>
<script>
    new Vue({
        el: '#xiu'
    })
</script>
  • v-on

v-on指令用来绑定事件的

绑定事件

 

<div id="app">
    <button v-on:click="onClick">按钮</button>
</div>
<script>
    new Vue({
        el:"#app",
        methods: {
            onClick:function(){
                alert(new Date())
            }
        }
    })
</script>

 

 

绑定提交事件

<form id="xiu" v-on:submit="onSubmit">
    <input type="text"/>
    <input type="submit" value="提交"/>
</form>

<script>
new Vue({
    el:"#xiu",
    methods: {
        onSubmit: function(){
            alert("提交事件");
        }
    }
})
</script>

 

el、data、methods、computed、watch介绍

 

 

  • el

el指Vue实例挂载的元素节点

  • data

data值初始化的值

  • template

template创建虚拟DOM渲染函数

<div id="app"></div>
<script>
    new Vue({
        el: '#app',
        template: '<p>{{ say }}</p>',
        data: {
            say:"修抗"
        }
    })
</script>

 

  • methods

methods必须要有一定的触发条件才能执行,如点击事件

<div id="app">
    <p>{{ say() }}</p>
</div>
<script>
new Vue({
    el: '#app',
    methods: {
        say: function () {
            return '我要成为海贼王'
        }
    }
})
</script>

 

 

  • computed

computed是在HTML DOM加载后马上执行的,如赋值

<div id="app">
    {{firstName}} · {{secName}} · {{thirdName}}
</div>
<script>
var vm = new Vue({
    el: '#app',
    /*
    data选项中的数据:firstName,secName,thirdName
    computed监控的数据:lufei_Name
    两者关系: lufei_Name = firstName + secName + thirdName
    所以等式右边三个数据任一改变,都会直接修改 lufei_Name
    */
    data: {
    // 路飞的全名:蒙奇·D·路飞
        firstName: '蒙奇',
        secName: 'D',
        thirdName: '路飞'
    },
    computed: {
        luFei_Name: function () {
            return this.firstName + this.secName + this.thirdName
        }
    }
})
// 将“路飞”改为“海军王”
vm.thirdName = '海军王'</script>

 

  • watch

watch呢?它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。

<div id="app">
    {{haiZeiTuan_Name}} · {{suoLong}} · {{naMei}}· {{xiangJiShi}}
</div>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        haiZeiTuan_Name: '草帽海贼团',
        suoLong: '草帽海贼团索隆',
        naMei: '草帽海贼团娜美',
        xiangJiShi: '草帽海贼团香吉士'
    },
    watch: {
        haiZeiTuan_Name: function (newName) {
            this.suoLong = newName + '索隆'
            this.naMei = newName + '娜美'
            this.xiangJiShi = newName + '香吉士'
        }
    }
})
vm.haiZeiTuan_Name = '橡胶海贼团'
</script>
  • computed、methods、watch执行顺序

默认加载的时候先computed再watch,不执行methods;

等触发某一事件后,则是:先methods再watch。

 

  • 数组变动检测

push()在最后添加

pop()删除最后一个

shift()删除第一个

unshift()在开头添加

splice()从下标为start开始删除deleteCount个元素,并在该位置添加val,val2 

sort()排序

reverse()

<div id="app">
    <p>{{xiu}}</p>
    <button v-on:click="kang">按钮</button>
</div>
<script>
new Vue({
    el:"#app",
    data: {
        xiu: ["23","1","3","4"]
    },
    methods: {
        kang:function(){
            this.xiu.push("23");
        }
    }
})
</script>

 

  • 内置过滤器

 

  • 1.filterBy(0.12版本)

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js的栈与堆

下一篇:FileReader对象异步获取外部文件的内容