首页 > Web开发 > 详细

Vue.js笔记(一)

时间:2019-06-02 19:57:07      阅读:108      评论:0      收藏:0      [点我收藏+]

Vue.js笔记(一)


Vue.js引入方法

  • CDN引入
  • 下载vue.js

Vue.js的使用

1.创建Vue对象 new Vue({})
2.属性

3.在使用数据的地方使用{{ data的属性名}}或{{methods中方法名()}}

4.代码示例
js代码:

new Vue({
    el:"#vue-app",
    data:{
        name:"andy",
        job:"java Web开发"
    },
    methods:{
         greet:function(time){
            return 'Good '+time+'!';
        }
    }
});

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="vue-app">
        <h1>{{greet('afternoon')}}</h1>
        <p>Name:{{ name}}</p>
        <p>job:{{job}}</p>
    </div>
    <script type="text/javascript" src="./js/app.js"></script>
</body>
</html>

4.数据绑定
v-bind:属性=Vue属性
如:

  • v-bind:href=""
  • v-bind:value="
  • v-html=""

Vue.js笔记(一)

原文:https://www.cnblogs.com/puxuebing/p/10963974.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!