Js学习笔记（一）：vue.js初体验

最新推荐文章于 2022-12-08 00:24:47 发布

小火skr车

最新推荐文章于 2022-12-08 00:24:47 发布

阅读量143

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xiaohuoche175/article/details/82697738

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.try</title>
</head>
<body>
    <div id = "app">
        {{ message }}
    </div>
    <div id = "app-2">
        <span v-bind:title = "message">
            鼠标悬停
        </span>
    </div>
    <div id = "app-3">
        <p v-if="seen">现在看到我了</p>
    </div>
    <div id = "app-4">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text}}
            </li>
        </ol>
    </div>
    <div id = "app-5">
        <p>{{ message }}</p>
        <button v-on:click = "reverseMessage">逆转信息</button>
    </div>
    <div id = "app-6">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>
    <div id = "app-7">
        <ol>
            <todo-item
                v-for = "item in groceryList" 
                v-bind:todo = "item" 
                v-bind:key = "item.id">
            </todo-item>
        </ol>
    </div>
</body>



<script src="onevue.js"></script>
</html>
<script>
    var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
    var app2 = new Vue({
        el : '#app-2',
        data : {
            message:'页面加载于' + new Date().toLocaleDateString()
        }
    })
    var app3 = new Vue({
        el : '#app-3',
        data:{
            seen:true
        }
    })
    var app4 = new Vue({
        el : "#app-4",
        data : {
            todos : [
                {text: '学习1'},
                {text: '学习2'},
                {text: '学习3'}
            ]
        }
    })
    var app5 = new Vue({
        el : '#app-5',
        data:{
            message:'hello Vue.js'
        },
        methods:{
            reverseMessage:function(){
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
    var app6 = new Vue({
        el : '#app-6',
        data:{
            message:'Hello Vue!'
        }
    })
    Vue.component('todo-item',{
        props:['todo'],
        template:'<li>{{ todo.text }}</li>'
    })
    var app7 = new Vue({
        el : '#app-7',
        data:{
            groceryList:[
                {id:0,text:'蔬菜'},
                {id:1,text:'奶酪'},
                {id:2,text:'随便其他什么人吃的东西'}
            ]
        }
    })
</script>

前端页面效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
    <div id="app">
        <pre><a v-bind:href="url">页面跳转</a></pre>
    </div>
    <div id="app1">
        {{ message | capitalize }}
    </div>
</body>
<script src="onevue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            url:"https://blog.csdn.net/xiaohuoche175"
        }
    })
</script>
<script>
    new Vue({
        el:"#app1",
        data:{
            message: 'runoob'
        },
        filters: {
            capitalize: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
    })
</script>
</html>