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

最新推荐文章于 2025-06-23 14:08:14 发布

原创

最新推荐文章于 2025-06-23 14:08:14 发布 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #vue.js

主要内容：

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