Vue快速入门知识点（二）

最新推荐文章于 2022-09-14 11:14:31 发布

iswka

最新推荐文章于 2022-09-14 11:14:31 发布

阅读量291

点赞数

分类专栏： vue 文章标签： vue vue表单控件 vue过滤器 vue指令

本文链接：https://blog.csdn.net/iswka0833/article/details/70266321

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">
        <a v-bind:href="link">百度</a>
    </div>

    <hr/>

    <div id="app2">
        <a :href="link">百度</a>
        <p @click="clicked">{{ text }}</p>
    </div>

    <hr/>

    <div id="app3">
        <button :click="clicked">点我</button>
    </div>

    <hr/>

    <div id="app4">
        {{ message | filterUpperCase }}
    </div>

    <hr/>

    <div id="app5">
        <input type="text" placeholder="请输入" v-model="text">
        <p>输入的内容：{{ text }}</p>
    </div>

    <hr/>

    <div id="app6">
        <textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
        <p>输入的内容：{{ content }}</p>
    </div>

    <hr/>

    <div id="app7">
        <input type="checkbox" v-model="isChecked" id="aaa">
        <label for="aaa">{{ isChecked }}</label>
    </div>

    <hr/>

    <div id="app8">
        <input type="checkbox" name="" id="Apple" value="苹果" v-model="fruit">
        <label for="Apple">苹果</label>
        <input type="checkbox" name="" id="Banana" value="香蕉" v-model="fruit">
        <label for="Banana">香蕉</label>
        <input type="checkbox" name="" id="Orange" value="橙子" v-model="fruit">
        <label for="Orange">橙子</label>
        <p>你喜欢的水果有：{{ fruit }}</p>
    </div>

    <div id="app9">
        <input type="radio" name="" id="play" value="玩游戏" v-model="hobby">
        <label for="play">玩游戏</label>
        <input type="radio" name="" id="movie" value="看电影" v-model="hobby">
        <label for="movie">看电影</label>
        <p>你的爱好是：{{ hobby }}</p>
    </div>

    <div id="app10">
        <select name=""  v-model="fruit">
            <option value="Apple">Apple</option>
            <option value="Banana">Banana</option>
            <option value="Orange">Orange</option>
        </select>
        <p>you selected : {{ fruit }}</p>
    </div>

    <script src="vue2.js"></script>
    <script>

        /**
         * 表单控件绑定
         * */

        // 单行文本
        new Vue({
            el: '#app5',
            data: {
                text: ''
            }
        });

        // 多行文本
        new Vue({
            el: '#app6',
            data: {
                content: ''
            }
        });


        // 复选框

        // 一个复选框
        new Vue({
            el: '#app7',
            data: {
                isChecked: false
            }
        });

        // 多个复选框
        new Vue({
            el: '#app8',
            data: {
                fruit: []
            }
        });

        // 单选按钮
        new Vue({
            el: '#app9',
            data: {
                hobby: ''
            }
        });

        // 下拉列表
        new Vue({
            el: '#app10',
            data: {
                fruit: null
            }
        });

        /**
         * 过滤器
         * Vue.js 允许自定义过滤器
         * 常用来文本格式化
         * 一般用在 mustche插值 和 v-bind 表达式
         * 过滤器应该被添加在Javascript表达式的尾部，由"管道"[ | ]符指示
         * */
        new Vue({
            el: '#app4',
            data: {
                message: 'hello world'
            },
            filters: {
                // 将字符串转换成大写
                filterUpperCase: function (value) {
                    if (!value) return '';
                    return value.toString().toUpperCase();
                }
            }
        });



        /**
         * 修饰符
         * 修饰符是以是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
         * 常用的有取消默认事件 .prevent
         * 更多修饰符请参考： https://cn.vuejs.org/v2/api/#v-on
         * */
        new Vue({
            el: '#app3',
            methods: {
                clicked: function () {
                    alert('不会弹出来了');
                }
            }
        });

        /**
         * 指令的缩写
         *
         * v-bind可以缩写为: ':'
         * 即 v-bind:href 等价于 :href
         *
         * v-on可以缩写为: '@'
         * 即 v-on:click 等价于 @click
         *
         * */
        new Vue({
            el: '#app2',
            data: {
                link: 'http://www.baidu.com',
                text: '点我试试'
            },
            methods: {
                clicked: function () {
                    this.text = '你还真点我了';
                }
            }
        });


        /**
         * v-bind
         * 作用：可以更新HTML属性
         * v-bind:标签属性名="值"
         * 比如：v-bind:href="http://www.baidu.com"
         * */
        new Vue({
            el: '#app',
            data: {
                link: "http://www.baidu.com"
            }
        });
    </script>
</body>
</html>