前端起步Vue.js基础

vscode配置开发js前端 java前端开发有哪些技术 vuejs 前端开发

hello world 实例:

html 代码片段

<!DOCTYPE html>
<head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
    <title>VueJs</title>
</head>
<body>
    <div>{{mes}}</div>
</body>
<script src=”http://apps.bdimg.com/libs/vue/1.0.14/vue.js”></script>
<script>
    new vue({
        el: “div”,
        data: {
            mes: “Hello World”
        }
    })
</script>
</html>

双向数据绑定

html 代码片段

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
    <title>双向数据绑定</title>
</head>
<body>
    <div id=”app”>
        <input type=”text” v-model=”mes” />
        <div>{{mes}}</div>
    </div>
</body>
<script src=”http://apps.bdimg.com/libs/vue/1.0.14/vue.js”></script>
<script>
    new Vue({
        el: “#app”,
        data: {
            mes: “default message!”
        }
    })
</script>
</html>

渲染列表

html 代码片段

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
    <title>渲染列表</title>
</head>
<body>
    <div id=”app”>
        <ul>
            <li v-for=”x in do”>{{x.text}}</li>
        </ul>
    </div>
</body>
<script src=”http://apps.bdimg.com/libs/vue/1.0.14/vue.js”></script>
<script>
    new Vue({
        el: “#app”,
        data: {
            do: [
                { text: “Int16Array” },
                { text: “instanceof” },
                { text: “Boolean” },
                { text: “package” }
            ]
        }
    })
</script>
</html>

处理用户输入

html 代码片段

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
    <title>处理用户输入</title>
</head>
<body>
    <div id=”app”>
        <p>{{mes}}</p>
        <button v-on:click=”ClicYo”>按我啊!有脾气你按啊!</button>
    </div>
</body>
<script src=”http://apps.bdimg.com/libs/vue/1.0.14/vue.js”></script>
<script>
    new Vue({
        el: “#app”,
        data: {
            mes: “Hello World!”
        },
        methods: {
            ClicYo: function () {
                alert(“你是哥!”)
                this.mes = this.mes.split(”).reverse().join(”);
            }
        }
    })
</script>
</html>

综合

html 代码片段

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
    <title>综合</title>
</head>
<body>
    <div id=”app”>
        <input v-model=”newdo” type=”text” v-on:keyup.enter=”enters”>
        <ul>
            <li v-for=”x in tod”>
                {{x.text}}
                <button v-on:click=”removme($index)”>X</button>
            </li>
        </ul>
    </div>
</body>
<script src=”http://apps.bdimg.com/libs/vue/1.0.14/vue.js”></script>
<script>
    new Vue({
        el: “#app”,
        data: {
            newdo: “”,
            tod: [{ text: “hello world!” }]
        },
        methods: {
            enters: function () {
                var text = this.newdo.trim();
                if (text) {
                    this.tod.push({ text: text });
                    this.newdo = ”
                }
            },
            removme: function (index) {
                this.tod.splice(index, 1)
            }
        }
    })
</script>
</html>

前端开发与java对接 java web开发前端 前端接口开发 java

» 本文来自:前端开发者 » 《前端起步Vue.js基础》
» 本文链接地址:https://www.rokub.com/5484.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!