1.Vue概述(1. Vue overview)

一、Vue的创建者及Vue的历史

尤雨溪老师:Vue.js的创建者

2014年2月,Vue.js正式发布

2015年10月27日,正式发布1.0.0

2016年4月27日,发布2.0的预览版本

二、Vue概述

(1)渐进式的JavaScript框架

渐进式:声明式渲染 -> 组件系统 -> 客户端路由 -> 集中式状态管理 -> 项目构建

(2)优点

  (2.1)易用:熟悉HTML、CSS、JavaScript之后,可以快速上手Vue

  (2.2)灵活:在一个库和一套完整框架之间自如伸缩

  (2.3)高效:20kb运行大小,超快虚拟DOM

三、Vue的基本使用

  (1) Vue的Hello World之基本步骤

 1 <div id="app">
 2         <div>{{msg}}</div>
 3         <!-- 插值表达式 -->
 4         <div>{{1+2}}</div>
 5         <div>{{msg + '------' + 123}}</div>
 6     </div>
 7     <script src="./js/vue.js"></script>
 8     <script>
 9         /* 
10             Vue的基本使用步骤
11             1、需要引入提供标签用于填充数据
12             2、引入vue.js文件
13             3、可以使用vue的语法做功能
14             4、把vue提供的数据填充到标签里
15          */
16 
17         var vm = new Vue({
18             el:'#app',
19             /* 把数据填充到哪个标签 */
20             data:{
21                 msg:'Hello Vue'
22             }
23         })
24     </script>

  (2) Vue的Hello World之细节分析

    (2.1)通过new Vue({})的方式定义了一个Vue实例,其中的实例参数为el和data

      el:元素的挂载位置(值可以是CSS选择器或DOM元素)

      data:模型数据(值是一个对象)

    (2.2)插值表达式的用法

      将数据填充到HTML标签中

      插值表达式支持基本的计算操作

    (2.3)Vue代码运行原理分析

      Vue代码通过Vue框架编译成原生的JS代码

————————

1、 The creator of Vue and the history of Vue

Mr. You Yuxi: Vue Creator of JS

February 2014, Vue JS officially released

On October 27, 2015, 1.0.0 was officially released

On April 27, 2016, a preview version of 2.0 was released

2、 Vue overview

(1) Progressive JavaScript framework

Progressive: declarative rendering – & gt; Component system – & gt; Client Routing – & gt; Centralized state management – & gt; Project construction

(2) Advantages

(2.1) easy to use: after you are familiar with HTML, CSS and JavaScript, you can quickly start Vue

(2.2) flexibility: flexible between a library and a complete set of frames

(2.3) high efficiency: 20KB running size, super fast virtual DOM

3、 Basic use of Vue

(1) basic steps of Vue’s Hello World

 1 <div id="app">
 2         <div>{{msg}}</div>
 3         <!-- 插值表达式 -->
 4         <div>{{1+2}}</div>
 5         <div>{{msg + '------' + 123}}</div>
 6     </div>
 7     <script src="./js/vue.js"></script>
 8     <script>
 9         /* 
10             Vue的基本使用步骤
11             1、需要引入提供标签用于填充数据
12             2、引入vue.js文件
13             3、可以使用vue的语法做功能
14             4、把vue提供的数据填充到标签里
15          */
16 
17         var vm = new Vue({
18             el:'#app',
19             /* 把数据填充到哪个标签 */
20             data:{
21                 msg:'Hello Vue'
22             }
23         })
24     </script>

(2) detailed analysis of Vue’s Hello World

(2.1) define a Vue instance through new Vue ({}), where the instance parameters are el and data

El: mount location of element (value can be CSS selector or DOM element)

Data: model data (value is an object)

(2.2) usage of interpolation expression

Populate data into HTML tags

Interpolation expressions support basic calculation operations

(2.3) Vue code operation principle analysis

Vue code is compiled into native JS code through the Vue framework