码迷,mamicode.com
首页 > 其他好文 > 详细

Vue基础

时间:2019-12-19 19:12:25      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:开发   png   决定   实例   定义   class   figure   复用   并且   

1. 认识Vue

  • 读音 vju:
  • Vue是一个渐进式框架
  • Vue有很多特点和Web开发中常见的高级功能
    • 解耦视图和数据
    • 可复用的组件
    • 前端路由技术
    • 状态管理
    • 虚拟DOM

2. Vue安装

2.1 CDN引入

   <!-- 开发环境版本,包含了有帮助的命令行警告 -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!-- 生产环境版本,优化了尺寸和速度 -->
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 下载和引入

   开发环境 https://vuejs.org/js/vue.js 
   生产环境 https://vuejs.org/js/vue.min.js

2.3 NPM | YARN安装

3. Hello Vuejs

3.1 Mustache

技术图片

  • 创建Vue对象的时候,传入了一些options:{}
    • {}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里是挂载到了id为app的元素上
    • {}中包含了data属性:该属性中通常会存储一些数据
      • 这些数据可以是我们直接定义出来的,比如像上面这样。
      • 也可能是来自网络,从服务器加载的。
  • 浏览器执行代码的流程:
    • 执行到10~13行代码显然出对应的HTML
    • 执行第16行代码创建Vue实例,并且对原HTML进行解析和修改。
  • 并且,目前我们的代码是可以做到响应式的。

3.2

Vue基础

标签:开发   png   决定   实例   定义   class   figure   复用   并且   

原文地址:https://www.cnblogs.com/instinct-em/p/12069250.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!