[Vue] 01 - MVVM

开始学习

一、资源整理

• 资源与概念：

PDF: <Vue前端开发 快速开发与专业应用>

组件化、数据绑定。

 

• MVVM模型：

MVC，MVP 和 MVVM 的图示 作者： 阮一峰

 

• 基础教程：

vue教程_2019年vue视频教程 7小时学会Vue+Vuex+MintUi+ElementUi入门实战视频教程（30讲）

 

• 官网安装：

https://cn.vuejs.org/v2/guide/installation.html

 

• 项目创建：

初始化更快，目录更为简单。

vue init webpack-simple vue-demo02

 

• JS基础：

https://www.cnblogs.com/jesse123/category/515258.html

 

 

二、数据绑定 

<template>

<!-- vue的模板里面 所有的内容要被一个根节点包含起来  -->

  <div >  
    
      <h2>{{msg}}</h2>

      <br>
      这是一个根组件

    <br>

    <h3>{{obj.name}}</h3>

    <br>
    <hr>

    <br />

    <ul>
      <li v-for="item in list">
          {{item}}
      </li>
    </ul>

    <br>
    <hr>

    <br />

    <ul>
      <li v-for="item in list1">
          {{item.title}}
      </li>
    </ul>


     <br>
      <hr>

      <br/>

      <ul>
        <li v-for="item in list2">
            {{item.cate}}

            <ol>
              <li v-for="news in item.list">
                  {{news.title}}
              </li>
            </ol>

        </li>
      </ul>

  </div>
</template>

Vue js style likes this.

<script>
    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {

          msg: '你好vue',
          obj:{
            name:"张三"
          },

          list:['111','222','333'],
          list1:[
            {'title':'11111'},
            {'title':'222'},
            {'title':'333333'},
            {'title':'44444'}
          ],
          list2:[
              {
                "cate":"国内新闻",
                "list":[

                   {'title':'国内新闻11111'},
                   {'title':'国内新闻2222'}
                ]
              },
              {
                "cate":"国际新闻",
                "list":[

                   {'title':'国际新闻11111'},
                   {'title':'国际新闻2222'}
                ]
              }
          ]

        }
      }
    }
</script>

<style lang="scss">
</style>

View Code