vue基础

一、vue是什么？

vue.js与react.js和angular.js并称为前端三大主流框架（能够减少不必要的dom操作，提高渲染效率；双向数据绑定的概念）

）。

Vue.js 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。

前端的主要工作就是负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

二、前端框架和库的区别：

框架是一套完整的解决方案，项目如果需要 切换框架，需要重构，则要重新架构整个项目。

而库（插件）是一个小的功能，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

三、vue是一种双向数据绑定模型

同样的双向数据绑定还有（angular.js）

双向数据绑定的优点：

1、用户在视图上的修改会自动同步到数据模型中去，同样的，如果数据模型中的值发生了改变，也会自动同步到视图中去。是无需进行和单项数据绑定的那些CRUD（增删改查）操作。

2、通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】

四、vue的基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 通过vue给p标签中填值 -->
    <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
    <!-- Vue 实例所控制的这个元素区域，就是我们的 V  -->
     <div id="text">
         <p>{{ wenzi }}</p>
     </div>

</body>
</html>
<script src="vue-2.4.0.js"></script>
<script>
    //当我们导入vue.js文件后，在浏览器的内存中，就多了一个 Vue 构造函数
    //   new 出来的这个 mas 对象，就是我们 MVVM中的 VM调度者
 var mas = new Vue({
     el : "#text", //// 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
     data:{
         //这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
         //data 属性中，存放的是 el 中要用到的数据
         wenzi:"你好，我是一个标题"
     }

 })
</script>

 

posted @ 2020-03-12 11:17  苏小妞吖  阅读(173)  评论(0)  编辑  收藏  举报