vue 之 介绍及简单使用

浏览目录

• vue的介绍

• vue的使用

 

vue的介绍

简介

vue官网说：Vue.js（读音 /vjuː/，相似于 view） 是一套构建用户界面的渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。 

关于渐进式和自底向上增量开发咱们来看一下知乎的回答：

vue.js的优势

1.易用

　　已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

2.灵活

　　不断繁荣的生态系统，能够在一个库和一套完整框架之间自如伸缩。

3.高效

　　20kB min+gzip 运行大小
      超快虚拟 DOM 
      最省心的优化

虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操做。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想。

(1) 提供一种方便的工具，使得开发效率获得保证
(2) 保证最小化的DOM操做，使得执行效率获得保证

虚拟dom的渲染速度要比咱们真实的dom渲染速度快。

vue的使用

安装

建议你们使用<script>引入

 

引入vue.js文件

咱们发现：引入vue.js文件以后，Vue被注册为一个全局的变量，它是一个构造函数。

使用vue实例化对象

 建立vue实例对象

<div id="app">
  {{ msg }}
</div>

var app = new Vue({
     el:'#app',
     data:{
        msg : '你们好'
     }
})　　

输出结果：

ok，咱们已经简单的建立了第一个vue应用。渲染的数据的方式咱们也叫声明式的渲染。如今数据和 DOM 已经被创建了关联，全部东西都是响应式的。咱们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.msg 的值，你将看到上例相应地更新。

在上面案例中，咱们学到了，{{ }}插值的语法。

{{}}插值，不只能够插变量，只要你能想到的插入均可以，if-else不能够啊！！！

 <p>{{2==1?'真的':'假的'}}</p>　　

输出结果：

data中存储的就是咱们的数据属性。Vue实例还暴露了一些有用的属性和方法，它们都有前缀 $，以便与用户定义的属性区分开来。