VUE 入门一

最新推荐文章于 2023-12-18 17:12:19 发布

隶属感

最新推荐文章于 2023-12-18 17:12:19 发布

阅读量117

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_36445227/article/details/84880318

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{getFullName()}}
    </div>
    <script>
        new Vue({
            el :"#app",
            data :{msg : "hellow world!",
                    age : 30,
                    firstName : "anling",
                    secondName : "quan"
            },
            methods : {
                getFullName :function(){
                    return this.firstName + " " +this.secondName;
                }
            }

        })
        </script>
</body>
</html>

我是学.net 开发的, 现在觉得 VUE 和 ASP.NET MVC 中的 Razor 语法有相似的地方

要点 : data 和 methods 中的对象执行后都会在中双括号以平级关系存在,这里的双括号内部是一处的作用域 ,

注意: 在 methods 中定义方法不要用箭头函数,这会导致 this指向 Window ,

正常情况下 , 执行方法时 this 都指向Vue 实例

VUE指令:

v-指令名 + : + 指令的参数 = 指令的表达式

小实例: 显示电影名称上映日期是否新旧电影鼠标覆盖显示名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
       电影名:{{movietitle}} <br>
       上映日期:{{movieDate}} <br>
       这部电影是 {{movieDate >2000? "新":"旧"}}电影

       <div v-bind:title="movietitle">  
            hover me!!! 
       </div>
    </div>
    <script>
        new Vue({
            el :"#app",
            data :{
                    movietitle : "妖猫传",
                    movieDate : "2017"
            },
            methods : {
                getFullName :function(){
                    return this.firstName + " " +this.secondName;
                }
            }

        })
        </script>
</body>
</html>