java1234开源博客系统
博客信息

vue.js模板语法

0
发布时间:『 2019-06-18 22:18』  博客类别:Vue.js  阅读(708)

结合官方用户指南;


我们这节主要掌握,插值显示,数据绑定,事件绑定以及js表达式,包括缩写语法;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>插入显示</h2>
    <input type="text" v-model="message">
    <p>{{message}}</p>
    <p>{{message.toUpperCase()}}</p>
    <p v-html="message"></p>
    <h2>数据绑定</h2>
    <div id="dynamicId"></div>
    <div v-bind:id="dynamicId"></div>
    <div :id="dynamicId"></div>
    <button v-bind:disabled="isButtonDisabled">Button</button>
    <a href="java1234">Java知识分享网</a>
    <a v-bind:href="java1234">Java知识分享网</a>
    <a :href="java1234">Java知识分享网</a>
    <br/>
    <h2>js表达式</h2>
    <p>{{ number + 1}}</p>
    <p>{{ ok ? 'YES' : 'NO'}}</p>
    <p>{{info.split(' ').reverse().join(',')}}</p>
    <p v-if="seen">现在你看到我了</p>
    <h2>事件绑定</h2>
    <button v-on:click="doSomething">按钮</button>
    <button @click="doSomething">按钮2</button>
    <br/>

</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            message:'<font color="red">呵呵</font>',
            dynamicId:'2',
            isButtonDisabled:true,
            java1234:'http://www.java1234.com',
            number:2,
            ok:false,
            info:'1 3 5',
            seen:false,
            attributeName:"href",
            url:'http://www.baidu.com'
        },
        methods:{
            doSomething(){
                alert('点我干嘛')
            }
        }

    })
</script>
</body>
</html>


关键字:   vue     模板语法  
关注Java1234微信公众号
博主信息
Java1234_小锋
(知识改变命运,技术改变世界)
Powered by Java1234 V3.0 Copyright © 2012-2016 Java知识分享网 版权所有