Vue第二天（语法）

最新推荐文章于 2023-03-15 19:29:25 发布

若叶-知秋

最新推荐文章于 2023-03-15 19:29:25 发布

阅读量344

点赞数

文章标签：自学菜鸟 Vue

本文链接：https://blog.csdn.net/qq_31051117/article/details/83993932

版权

准备步骤如之前第一天相同。

代码：（测试注意事项：js中的代码依次开启测试，不可全部开启，会报错）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
    <script src="../node_modules/jquery"></script>
    <script src="../node_modules/jquery-easyui"></script>
    <style>
        .class1 {
            background: chartreuse;
            color: red;
        }
    </style>
</head>
<body>

<div id="app1">
    <div v-html="message"></div>
</div>
<br>

<div id="app2">
    <label for="r1">测试v-bind按钮</label>
    <input type="checkbox" v-model="class1" id="r1">
    <div v-bind:class="{'class1':class1}">
        v-bind:class 指令
    </div>
</div>
<br>

<div id="app3">
    {{5+5}}<br>
    {{ok?'YES':'NO'}}<br>
    <!--翻转内容-->
    {{message.split('').reverse().join('')}}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<br>

<div id="app4">
    <p v-if="seen">判断V-if是否能看见</p>
    <template v-if="ok">
        测试
    </template>
</div>
<br>

<div id="app5">
    <a v-bind:href="url">测试v-bind跳转</a>
</div>

<!--v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值-->
<br>
<div id="app6">
    <p>{{message}}</p>
    <input v-model="message">
</div>

<!--v-on 指令，它用于监听 DOM 事件-->
<br>
<div id="app7">
    <p>{{message}}</p>
    <button v-on:click="fanzhuan">反转</button>
</div>

<!--过滤器-->
<!-- 在两个大括号中 -->
<!--{{ message | capitalize }}-->

<!-- 在 v-bind 指令中 -->
<!--<div v-bind:id="rawId | formatId"></div>-->
<div id="app8">
    {{ message | shouzimu }}
    <br>
    {{ message | shouzimu |filterchuanxian}}
</div>

<!--缩写-->
<!--v-bind 缩写-->
<!-- 完整语法 -->
<!--<a v-bind:href="url"></a>-->
<!-- 缩写 -->
<!--<a :href="url"></a>-->

<!--v-on 缩写-->
<!-- 完整语法 -->
<!--<a v-on:click="doSomething"></a>-->
<!-- 缩写 -->
<!--<a @click="doSomething"></a>-->
</body>
</html>

<script>
    /* v-html 指令*/
    /*    var vm=new Vue({
            el:'#app1',
            data:{
                message:'通过V-html属性引用'
            }
        });*/

    /*v-bind 指令*/
    /*    new Vue({
            el: '#app2',
            data: {
                class1: false
            }
        });*/

    /*JavaScript 表达式*/
    /*   new Vue({
           el: '#app3',
           data: {
               ok: true,
               message: 'RUNOOB',
               id: 1
           }
       })*/

    /*v-if指令*/
    /*   new Vue({
           el:'#app4',
           data:{
               seen:true,
               ok:false
           }
       })
   */
    /*v-bind跳转指令*/
    /* new Vue({
       el:'#app5',
       data:{
           url:'http://www.baidu.com'
       }
     })*/

    /*v-model数据绑定*/
    /* new Vue({
         el: '#app6',
         data: {
             message: '数据绑定'
         }
     })*/

    /*v-on绑定*/
    /*new Vue({
        el:"#app7",
        data:{
            message:"123456"
        },methods:{
            fanzhuan:function () {
                /!*反转方法*!/
                this.message=this.message.split('').reverse().join('')
            }
        }
    })*/

    /*过滤器*/
    /*首字母大写*/
    new Vue({
        el: "#app8",
        data: {
            message: 'shouzimu'
        },
        filters: {
            shouzimu: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            },
            filterchuanxian: function (value) {
                return value
            }
        }
    })
</script>

若叶-知秋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue第二天（语法）

准备步骤如之前第一天相同。代码：（测试注意事项：js中的代码依次开启测试，不可全部开启，会报错）&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &am
复制链接

扫一扫