zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    HTML 嵌入 SWF ,访问域的问题
    Flex 4 中,StageScaleMode 设置
    一句话清除MC下所有的子
    DataGrid 表头标题,表格文字的字体设置
    Flash中,将某个元件置于最顶层
    Android开发中使用SQLite 数据库
    Android多分辨率支持说明
    Android adb shell 命令大全
    Android Camera 使用小结
    Android多分辨率支持以及各种类型图标尺寸大小
  • 原文地址:https://www.cnblogs.com/starwei/p/12467895.html
Copyright © 2011-2022 走看看