vuejs入门（1）

最新推荐文章于 2022-03-14 17:45:29 发布

Asyoulikeit_yc

最新推荐文章于 2022-03-14 17:45:29 发布

阅读量304

点赞数

分类专栏： vuejs

本文链接：https://blog.csdn.net/qq_23264017/article/details/75207972

版权

vuejs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/vue.js" ></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>

        <div id="app2">
            <!--
                描述：v-bind 指令  它们会在渲染的 DOM 上应用特殊的响应式行为
                    将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致
           -->
            <span v-bind:title="message">
                鼠标悬停
            </span>
        </div>

        <div id="app3">
            <!--绑定dom结构到数据-->
            <p v-if="seen">看到我啦</p>
        </div>

        <div id="app4">
            <ol>
                <!-- v-for 绑定数组的数据来渲染一个项目列表-->
                <li v-for="todo in todos">
                    {{todo.text}}
                </li>
            </ol>
        </div>

        <div id="app5">
            <p>{{message}}</p>
            <!-- v-on 绑定一个事件监听器-->
            <button v-on:click="reverseMessage">逆转消息</button>
        </div>

        <div id="app6">
            <p>{{message}}</p>
            <!-- v-model 实现表单输入和应用状态之间的双向绑定 -->
            <input v-model="message" />
        </div>

        <div id="app7">
            <ol>
                <todo-item
                    v-for="item in todos"
                    v-bind:todo = "item"
                    v-bind:key = "item.id"
                    >
                </todo-item>
            </ol>
        </div>
        <script>

            var app = new Vue({
                el:'#app',
                data:{
                    message:'Hello Vue'
                }
            });

            var app2 = new Vue({
                el:'#app2',
                data:{
                    message:'页面加载于'+new Date()
                }
            })

            var app3 = new Vue({
                el:'#app3',
                data:{
                    seen:true,
                }
            })

            var app4 = new Vue({
                el:'#app4',
                data:{
                    todos:[
                        {text:'学习 JavaScript'},
                        {text:'学习 Vue'},
                        {text:'整个牛项目'},
                    ]
                }
            })

            var app5 = new Vue({
                el:'#app5',
                data:{
                    message:'Hello Vue.js'
                },
                methods:{
                    //更新了应用的状态，但没有触碰到dom  所有的dom操作都由vue来处理  编写的代码不需要关注底层逻辑
                    reverseMessage:function(){
                        this.message = this.message.split('').reverse().join('');
                    }
                }
            })

            var app6 = new Vue({
                el:'#app6',
                data:{
                    message:'Hello Vue'
                }
            })

            Vue.component('todo-item',{
                props:['todo'],
                template:'<li>{{todo.text}}</li>'
            })
            var app7 = new Vue({
                el:'#app7',
                data:{
                    todos:[
                        {id:0,text:'蔬菜1'},
                        {id:1,text:'蔬菜2'},
                        {id:2,text:'蔬菜3'},
                    ]
                }
            })
        </script>
    </body>
</html>

Asyoulikeit_yc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuejs入门（1）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/vue.js" ></script> </head> <body> <div id="app
复制链接

扫一扫