一、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. LabVIEW中数组的自动索引

    我们在LabVIEW里面使用While或者是For循环结构的时候,就会发现每一个循环中在它们的循环结构的边界都可以自动完成一个数组元素的索引或累积.LabVIEW中循环结构的这种能力就叫做自动索引(A ...

  2. 关于MySQL的几个命令之load

    1.记录当前操作命令

  3. 结构型模式概述（Structural Pattern)

    结构型模式可以描述两种不同的东西:类与类的实例.结构型模式可以分为类结构型模式和对象结构型模式. 类结构型模式关心类的组合,可以由多个类组合成一个更大的系统,在类结构型模式中只存在继承关系和实现关系: ...

  4. HQL的执行过程

    解释器.编译器.优化器完成HQL查询语句从词法分析.语法分析.编译.优化以及查询计划(Plan)的生成.生成的查询计划存储在HDFS中,并在随后有mapreduce调用执行. 举个例子: 第一步:输入 ...

  5. 【渗透测试学习平台】 web for pentester -8.XML

    example1: http://192.168.91.139/xml/example1.php?xml=%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%2 ...

  6. Python 进阶（一）函数式编程

    来自慕课网: 简介: 函数:function ,在入门课程已学 函数式:functional,一种编程范式 函数式编程是一种抽象计算的编程模式,函数≠函数式,好比:计算≠计算机

  7. js如何判断不同的操作系统

    <html> <head> <title>判断操作系统</title> <script type="text/javascript&qu ...

  8. PHP自带方法验证邮箱、URL、IP是否合法

    PHP验证邮箱.URL.IP是否合法 以前用PHP验证邮箱.URL.IP是否合法都是通过自己写正则来实现,但是有时候脑子发昏,可能会写出一个不是完全正确的正则,导致验证出错,今天发现原来PHP本身自带 ...

  9. CSS3 属性组参考资料

    CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打印 Ruby ...

  10. diamond types are not supported at this language level

    在intellij导入git项目之后出现 diamond types are not supported at this language level错误 或者String等报错 File->P ...