vuejs从零开始（基本使用）

参考简书：https://www.jianshu.com/p/94ac8b8b8f6b
说明：工作需要，下面的基本使用，一般用于工作可以了
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>

    <title>vue.js完整实例</title>
</head>
<body>


<!--html-->
<div id="app">

    输入您的姓名: <input type="text" v-model="name">
    <p>{{ $data | json }}</p>
    <p>{{ name }}</p>


    <button v-on:click="say">欢迎点击</button>
    <button @click="say">欢迎点击</button>


    <!--loginStatus为true时会显示的section-->
    <section v-if="loginStatus">
        输入您的姓名: <input type="text" v-model="name">
        <button v-on:click="say">欢迎点击</button>
        <button @click="switchLoginStatus">退出登录</button>
    </section>

    <!--loginStatus为false时会显示的section-->
    <section v-if="!loginStatus">
        登录用户: <input type="text">
        登录密码: <input type="password">
        <button @click="switchLoginStatus">登录</button>
    </section>

    <!--v-for 不带索引-->
    <ul>
        <li v-for="el in products">
            {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
        </li>
    </ul>


    <!--v-for 带索引-->
    <ul>
        <li v-for="el in products">
            {{ $index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
        </li>
    </ul>

    <!--v-for 带索引-->
    <ul>
        <li v-for="(index,el) in products">
            {{ index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
        </li>
    </ul>


    <!--计算属性Computed-->
    输入一个数字: <input type="text" v-model="value">
    <p>计算结果：{{ square }}</p>


    输入1~10内的数字: <input type="text" v-model="value">
    <p>计算结果：{{ resultMsg }}</p>

</div>

</body>


<!--js-->
<script>
    // 创建一个新的Vue实例，并设置挂载点
    var V = new Vue({
        el: '#app',
        data: {  // v-model,双向数据绑定
            name: '_Appian',
            products: [
                {name: 'microphone', price: 25, category: 'electronics'},
                {name: 'laptop case', price: 15, category: 'accessories'},
                {name: 'screen cleaner', price: 17, category: 'accessories'},
                {name: 'laptop charger', price: 70, category: 'electronics'},
                {name: 'mouse', price: 40, category: 'electronics'},
                {name: 'earphones', price: 20, category: 'electronics'},
                {name: 'monitor', price: 120, category: 'electronics'}
            ],
            value: null,
            randNum: 5//第一次随机数为5
        },

        computed: { // 计算属性Computed
            square: function () {
                return this.value * this.value;
            },
            resultMsg: function () {
                if (this.value == this.randNum) {
                    this.randNum = this.getRandNum(1, 10);
                    return '你猜对了!';
                } else {
                    this.randNum = this.getRandNum(1, 10);
                    return '猜错了，再来!';
                }
            },
        },

        methods: { // v-on / @click  事件绑定
            say: function () {
                alert('欢迎' + this.name);
            },
            switchLoginStatus: function () { // 利用v-if或者v-show进行条件判定
                this.loginStatus = !this.loginStatus;
            },
            getRandNum: function (min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
        }


    });
</script>

</html>
vuejs从零开始（基本使用）

猜你喜欢
