vue - vue
一、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 - 使用
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的更多相关文章
- Javascript - Vue - vue对象
vue提供了一整套前端解决方案,可以提升企业开发效率 vue的处理过程 app.js 项目入口,所有请求最先进入此模块进行处理 route.js 由app.js调用,处理路由的分发 controlle ...
- Vue - vue.js 常用指令
Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...
- 前端开发 Vue Vue.js和Nodejs的关系
首先vue.js 是库,不是框架,不是框架,不是框架. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你 ...
- [Vue] : Vue概述
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架. Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框 ...
- 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 | ...
- Vue Vue.use() / Vue.component / router-view
Vue.use Vue.use 的作用是安装插件 Vue.use 接收一个参数 如果这个参数是函数的话,Vue.use 直接调用这个函数注册组件 如果这个参数是对象的话,Vue.use 将调用 ins ...
- vue & vue router & dynamic router
vue & vue router & dynamic router https://router.vuejs.org/guide/essentials/dynamic-matching ...
- vue & vue router & match bug
vue & vue router & match bug match bugs solution name must be router https://stackoverflow.c ...
- [Vue] vue中setInterval的问题
vue中使用setInterval this.chatTimer = setInterval(() => { console.log(this.chatTimer); this.chatMsg( ...
- [Vue] vue跳转外部链接
问题 vue 跳转外部链接问题,当跳转的时候会添加在当前地址后面 var url = 'www.baidu.com' //跳转1 window.localtion.href = url //跳转2 w ...
随机推荐
- c#后台访问接口
直接上代码 后台代码 //接口地址string url = "http://spherefg.topsmoon.com:6666/restapi/Comment/SubmitCommentF ...
- 【Java面试题】45 什么是java序列化，如何实现java序列化？或者请解释Serializable接口的作用。
我们有时候将一个java对象变成字节流的形式传出去或者从一个字节流中恢复成一个java对象,例如,要将java对象存储到硬盘或者传送给网络上的其他计算机,这个过程我们可以自己写代码去把一个java对象 ...
- CentOS6.8忘记root密码的解决办法(开始初始化也可以用)
在开机启动的时候按键盘上的“E”键会进入如下界面. 选择相应的内核,再次按“E”,出现下图,选择第二项,再次按“E”键 经过第二步,这个画面可以编辑,在信息的最后加“空格”,然后键入“single”( ...
- myEclipse svn 插件安装
MyEclipse6.0 安装svn插件 博客分类: 技术 只说一种在线安装流程: 1. 打开Myeclipse,在菜单栏中选择Help→Software Updates→Find and Ins ...
- PHP-006
Q:应用程序执行时的路径 "D:\*******\protected\runtime" 是无效的. 请确定它是一个可被 Web server process 写入资料的目录. A: ...
- weblogic11g重置控制密码
Reset the AdminServer Password in WebLogic 11g and 12c If you forget the AdminServer password for yo ...
- 教你一招解决浏览器兼容问题（PostCSS的使用）
我们在处理网页的时候,往往会遇到兼容性的问题.在这个问题上分为两个大的方向:屏幕自适应&浏览器兼容.而屏幕自使用的方法有许多,包括框架之类的,但是浏览器的兼容却没有一个号的框架.在我们日常处理 ...
- php第二例
参考: http://www.php.cn/code/3645.html 前言 由于navicat在linux平台不能很好的支持, PHP的学习转到windows平台. php IDE: PhpSto ...
- 十分钟理解Java中的动态代理
十分钟理解 Java 中的动态代理 一.概述 1. 什么是代理 我们大家都知道微商代理,简单地说就是代替厂家卖商品,厂家“委托”代理为其销售商品.关于微商代理,首先我们从他们那里买东西时通常不知道 ...
- 鼠标聚焦到Input输入框时，按回车键刷新页面原因及解决方法
参考地址:http://blog.csdn.net/xuezhongsong/article/details/6859037 方式1:全局控制回车,13-回车键,27-ESC,113-F2 docum ...