一、vue - 介绍

vue的作者叫尤雨溪，中国人。自认为很牛逼的人物，也是我的崇拜之神。

关于他本人的认知，希望大家读一下这篇关于他的文章，或许你会对语言，技术，产生浓厚的兴趣。https://mp.weixin.qq.com/s?__biz=MzA5NzkwNDk3MQ==&mid=2650585523&idx=1&sn=432f53b79da522db26e7f3665d4c04cf&source=41#wechat_redirect

送给大家一句话，只有对框架，甚至任何一门语言产生兴趣，你才会爱上它，并且去爱护它。

那么，接下来进入到咱们的课题。

在前端框架技术中有三大框架：

Angularjs：谷歌公司生产

React：Facebook公司

Vue:尤雨溪作者

vue的介绍

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

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

vuejs的优点

1.易用

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

2.灵活

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

3.高效

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

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

(1) 提供一种方便的工具，使得开发效率得到保证

(2) 保证最小化的DOM操作，使得执行效率得到保证

ps：关于虚拟dom，在这里不做赘述，大家可以这样认为，虚拟dom的渲染速度要比我们真实的dom渲染速度快

二、vue - github上的一个小项目

https://github.com/bailicangdu/vue2-happyfri

## 项目运行（nodejs 6.0+）
``` bash
# 克隆到本地
git clone https://github.com/bailicangdu/vue2-happyfri.git

# 进入文件夹
cd vue2-happyfri

# 安装依赖
npm install 或 yarn(推荐)

# 开启本地服务器localhost:8088
npm run dev

# 发布环境
npm run build
```

三、vue - 使用

https://cn.vuejs.org/

1. 安装

对于新手来说，强烈建议大家使用<script>引入

2. 引入vue.js文件

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

3. 使用Vue实例化对象

1.创建vue实例对象

<div id="app">

  {{ msg }}

</div>
var app = new Vue({

     el:'#app',

     data:{

        msg : '路飞学城'

     }

})

输出结果：

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

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

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

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

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

code

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<div id="app">

    <h3>{{title}}</h3>

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

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

    var app = new Vue({

        el:"#app",

        data:{

            title:"哈哈",

        }

    })

</script>

</body>

</html>

vue - vue的更多相关文章

  1. Javascript - Vue - vue对象

    vue提供了一整套前端解决方案,可以提升企业开发效率 vue的处理过程 app.js 项目入口,所有请求最先进入此模块进行处理 route.js 由app.js调用,处理路由的分发 controlle ...

  2. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  3. 前端开发 Vue Vue.js和Nodejs的关系

    首先vue.js 是库,不是框架,不是框架,不是框架. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你 ...

  4. [Vue] : Vue概述

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架. Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框 ...

  5. Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'valid...

    使用vue-cli 3.0+Element-ui时候,调用form表单校验时候出现的问题是: Property 'validate' does not exist on type 'Element | ...

  6. Vue Vue.use() / Vue.component / router-view

    Vue.use Vue.use 的作用是安装插件 Vue.use 接收一个参数 如果这个参数是函数的话,Vue.use 直接调用这个函数注册组件 如果这个参数是对象的话,Vue.use 将调用 ins ...

  7. vue & vue router & dynamic router

    vue & vue router & dynamic router https://router.vuejs.org/guide/essentials/dynamic-matching ...

  8. vue & vue router & match bug

    vue & vue router & match bug match bugs solution name must be router https://stackoverflow.c ...

  9. [Vue] vue中setInterval的问题

    vue中使用setInterval this.chatTimer = setInterval(() => { console.log(this.chatTimer); this.chatMsg( ...

  10. [Vue] vue跳转外部链接

    问题 vue 跳转外部链接问题,当跳转的时候会添加在当前地址后面 var url = 'www.baidu.com' //跳转1 window.localtion.href = url //跳转2 w ...

随机推荐

  1. jquery validate自定义规则

    //检查身份证号码是否存在 $.validator.addMethod("checkIDCardExist", function (value, element) { if ($( ...

  2. 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版

    上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...

  3. Unity3d实现幸运转盘

    完成效果 我说一下制作流程,然后再看后面的代码1.创建一个image,选择我们的转盘背景图,素材找我或者网上都有,不多说了哈:2.创建一个空物体,位于转盘的正中心,因为我们的转盘指针的旋转中心是根据空 ...

  4. 利用MSSQL对不经常使用的表进行依赖缓存

    缓存是我们开发应用系统的一把利刃,如果用的不好,会导致数据不准确等一系列问题. 所以在如何选择缓存的时候,我们要慎之又慎.所以在对系统中一些 不经常变化的表,我们可以采用SqlCacheDenpend ...

  5. 聊聊iOS中TCP / UDP 协议

    TCP (Transmission Control Protocol)和UDP(User Datagram Protocol)协议属于 传输层协议. UDP(User Datagram protoco ...

  6. python2.0_s12_day19_前端模版使用

    Django中引用bootstrap实现在前端可以创建客户信息,可以修改客户信息我们需要设计一个前端用户交互系统.我们在设计之前,讨论一些需求:前端实现:1. 不同角色的用户,看到的东西是不一样的 销 ...

  7. redis安装之zmalloc.h:55:2: error: #error "Newer version of jemalloc required"错误

    redis是C语言编写的软件,安装前需要编译,需要gcc编译环境,确认安装gcc编译环境后(安装gcc命令:yum install gcc-c++) 在redis解压目录下,确认有Makefile文件 ...

  8. thinkjs之页面跳转-同步异步

    对于刚入手thinkjs项目的新手来说,时常会犯的一个错误就是“混用”各种代码逻辑,比如:我们经常在做后台管理系统的时候用到的登录框, , 其实它原本是有一个路由专门存放自己的代码逻辑,而在点击提交按 ...

  9. js中replace()方法

    str.replace(/Microsoft/g, "W3School");//全局替换 str.replace(/Microsoft/, "W3School" ...

  10. Swift-'as?','as'用法

    何时使用 'as?'和'as' 让我们来继续为我们假象的UIKit应用写点代码.假设你需要出场(展示)一个新的modal view controller到手机的屏幕上(比如通过使用presentVie ...