VUE2.X全教程--入门篇(一)

主要内容:

vue基础语法

MVP及MVVM设计模式的介绍

组件的简单使用

一:下载

进入官网

 

 

新建vue项目--用vue实现第一个hello world 

    <script src="vue.js"></script>
</head>
<body>
    <div id="app">{
  
  {content}}</div>
<script>
//    var app = document.getElementById("app");
//    app.innerHTML='hello world';
//    setTimeout(function(){
//        app.innerHTML = 'bye hello'
//    },2000);

    var app = new Vue({
//    el表示限制接管的范围区域,表示接管了id为App的元素
        el:'#app',
        data:{
            content:'hello world'
        }
    });
    //两秒以后会变化
    setTimeout(function(){
        app.$data.content='bye world'
    },2000);

 

用vue实现一个todoList

        <div id="app">
            <!--v-model:表示数据的双向绑定,当input中的数据发生绑定的时候,data中的inputValue也会发生改变-->
            <input type="text" v-model="inputValue"/>
            <!--v-on绑定事件:绑定的事件需要定义在vue data的 methods中-->
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <!--把list中的每一项都放在item中 list表示data中的list,item表示循环中的每一项的内容-->
               <li v-for="item in list">{
  
  {item}}</li>
            </ul>
        </div>
        <script
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值