Vue第一天学习

最新推荐文章于 2024-11-15 19:58:47 发布

@、

最新推荐文章于 2024-11-15 19:58:47 发布

阅读量95

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43608642/article/details/117413180

版权

vue学习笔记

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div id="app">
        {{message}}
        <br>
        <span v-bind:title="suspension">悬浮信息（鼠标停留几秒）</span>
        <p v-if="seen">if条件（是否可以看到）</p>
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
        <button v-on:click="reverseMessage">翻转消息</button>
        <br>
        双向绑定信息为：{{inputText}}
        <br>
        输入框信息：<input v-model="inputText" />
        <br>
        组件：
        <ol>
            <todo-item v-for="item in groceryList" v-bind:todow="item" v-bind:key="item.id"></todo-item>
        </ol>
        <br>
        {{htmlText}}
        <br>
        <div v-html="htmlText"></div>
        <br>
        直接使用计算属性转换字符串：{{reversemessage1}}
        <br>
        直接使用方法转换字符串：{{reverseMessage2()}}
        </div>
    </body>
</html>
<script type="text/javascript">
Vue.component('todo-item',{
        props:['todow'],
        template:'<li>{{todow.text}}</li>'
    })

    var app=new Vue({
        el:'#app',
        data:{
            message:'hello vue!',
            suspension:'页面加载于：'+new Date().toLocaleString(),
            seen:true,
            todos:[{text:"樱田"},{text:"尔良"},{text:"奥朵"}],
            inputText:"请输入",
            groceryList:[
                {id:0,text:'语文'},
                {id:1,text:"数学"},
                {id:2,text:"英语"},
                {id:3,text:"综合"}
            ],
            htmlText:"<p style='color:dodgerblue'>读取HTML标签</p>",
            message1:"这是使用计算属性实现的转换！"
        },
        methods:{
            reverseMessage:function(){
                this.message=this.message.split('').reverse().join('')
            },
            reverseMessage2:function(){
                return this.message.split('').reverse().join('')
            }
        },
        computed:{
            reversemessage1:function(){
                return this.message1.split('').reverse().join('')
            }
        }
    })
</script>