（一）vue基本常识

最新推荐文章于 2021-09-01 12:03:08 发布

吱吱不倦小子

最新推荐文章于 2021-09-01 12:03:08 发布

阅读量238

点赞数

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/u013109501/article/details/113621186

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.介绍描述

1.1渐进式 JavaScript 框架

1.2作者: 尤雨溪(一位华裔前 Google 工程师)

1.3作用: 动态构建用户界面

2.Vue 的特点

2.1遵循 MVVM 模式

声明式开发：vue

命令式开发：jq

2.2编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

2.3它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

3.与其它前端 JS 框架的关联

3.1借鉴 angular 的模板和数据绑定技术

3.2借鉴 react 的组件化和虚拟 DOM 技术

4.Vue 扩展插件

1) vue-cli: vue 脚手架

2) vue-resource(axios): ajax 请求

3) vue-router: 路由

4) vuex: 状态管理

5) vue-lazyload: 图片懒加载

6) vue-scroller: 页面滑动相关

7) mint-ui: 基于 vue 的 UI 组件库(移动端)

8) element-ui: 基于 vue 的 UI 组件库(PC 端)

5.vue的demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_HelloWorld</title>
</head>
<body>

<!--
  1. 引入Vue.js
  2. 创建Vue对象
    el : 指定根element(选择器)
    data : 初始化数据(页面可以访问)
  3. 双向数据绑定 : v-model
  4. 显示数据 : {{xxx}}
  5. 理解vue的mvvm实现
-->

<!--div模板指的是mvvm中的view-->

<div id="test">
  <input type="text" v-model="msg"><br><!--指令-->
  <input type="text" v-model="msg"><!--指令-->
  <p>hello {{msg}}</p><!--大括号表达式-->
</div>
//提供js
<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript">
  //创建vue实例（mvvm的viewmodel）  数据绑定（内存显示到页面），dom监听
  const vm = new Vue({ // 配置对象 options
    // 配置选项(option)
    el: '#test',  // element: 选择器 指定用vue来管理页面中的哪个标签区域
    //数据 mvvm中的model
    data: {
      msg: 'atguigu'
    }
  })
</script>
</body>
</html>

MMVM

M：模型，数据对象data（model）

V: 视图,模板页面（view）

VM:视图模型，vue实例（viewmodel）

吱吱不倦小子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（一）vue基本常识

1.介绍描述1.1渐进式 JavaScript 框架1.2作者: 尤雨溪(一位华裔前 Google 工程师)1.3作用: 动态构建用户界面2.Vue 的特点2.1遵循 MVVM 模式2.2编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发2.3它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目3.与其它前端 JS 框架的关联 3.1借鉴 angular 的模板和数据绑定技术3.2借鉴 react 的组件化和虚拟 DOM 技术4.Vue
复制链接

扫一扫