Vue.js初步学习

vue.js

1、了解vue.js

vue.js是一套构建用户界面的渐进式自底向上增量开发MVVM框架。
渐进式的理解:

可以单独用,也可以整个使用。(即可以在原有的系统的上面,把一两个组件改用VUE实现,也可以整个用vue全家桶开发。**不会做职责之外的事**)

自底向上增量开发的理解:

先写一个基础的页面,把基础的东西写好。再逐一添加功能和效果(由简单到繁琐的一个过程)

MVVM思想

M: mode 模型 等同于数据 (就是在项目中写数据的地方)
V:view 视图 (就是用户可以看见的网页内容)
VM:ViewModel 视图模型 (就是用来关联数据模型与视图界面之间的桥梁)

MVC思想

一种将数据层和视图层进行分离的设计思想

Vue.js的目的:

  1. 解决数据绑定
  2. 为了开发大型单页面应用
  3. 支持组件化(可以把页面封装成若干个组件,把组件进行拼装,从而让页面的复用性达到最高)

Vue.js的优势:

轻量级、高效率、上手快、简单易学、文档全面而整洁

Vue.js的核心思想:数据驱动和组件化

Vue的基本写法

下载vue依赖包

1. 初始化     npm init -y
2.下载vue核心依赖包 npm install --save vue
3.引用vue的js包   node_modules/vue/dist/vue.min.js
<body>
     <!-- 1.创建视图层  v层 -->
     <div id="box">
          <!-- 4.我想在视图中展示模型数据 -->
          {{text}}
          <h2>数组类型:{{arr[2]}}</h2>
          <h2>对象类型:{{obj.name}}</h2>
          <h2>布尔类型:{{bool?"成功":"失败"}}</h2>
     </div>
   
</body>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
     //2.vm层  就是vue的实例   用于关联视图和模型
     new Vue({
         el:"#box", //Vue实例挂载的元素节点
          // 3.创建模型  m层  也就是数据层
         data:{
             text:"asdfaj",
             bool:true,
             arr:["guod",12,6,13,7],
             obj:{
                 name:"guo",
                 age:10,
              }
          }
      })
</script>

渲染

命令式渲染 : 命令我们的程序去做什么,程序就会跟着你的命令去一步一步执行
声明式渲染 : 我们只需要告诉程序我们想要什么效果,其他的交给程序来做。

你可能感兴趣的:(javascript)