vue
一.
angular适合很大的项目mvvm，react干什么都行的组件式，vue是个轻量级mwwm适合中小型应用。
感觉react全家桶未来应该会走红，中小项目里vue会是不错的选择，angular在版本稳定下来之前还是先观望吧。。
顺便说下上手难度，vue不难（只要不是一上来就webpack，cli），angular1.x也不难（2.x没用过，感觉改的有点多，等版本相对稳定再说），react曲线感觉难一点点。
火大概是raect>angular>vue的，但angular在降温，react在继续上升，vue也在上升期。
官网： http://vuejs.org/ （可选中文版）
Api : https://cn.vuejs.org/v2/api/
相关网址：https://www.awesomes.cn/repo/yyx990803/vue
文章 ：http://www.wtoutiao.com/p/6e4lwMF.html
个人案例：http://web.jobbole.com/89976/
官网vue资料总结：
1.Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。
与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
另一方面，Vue 完全有能力驱
动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
vue 内部封装好的参数，函数：
相关网址： http://www.cnblogs.com/like-xcm/p/5956848.html
var vm = new Vue({
el: "选择器", 挂载到页面的那个元素里，即确定vue的作用范围 外部可通过vm.$el访问，得到的是一个原生dom元素，可进行对应操作
a: '', //自定义属性 外部可通过vm.$options访问
data: { }, //实例属性都在这里面，外部通过实例名,即vm.$data调用
computed: { }, //计算属性，也是实例属性，只是以方法的形式存在，并可以有逻辑运算的属性
method: { }, //实例方法都在这里
watch: { }, //对data和computed的属性进行监听，当属性有变化时自动触发，以方法的形式存在 外部通过$.watch调用
created: function(){ 实例已经创建 }
beforeCompile: function(){ 模块编译之前 }
compiled: function(){ 模块编译之后；即模板占位符被是内容替换}
ready: function(){ 模板插入到文档中了；相当于window.onload }
beforeDestroy: function(){ 对象销毁之前 }
destroyed: function(){ 对象销毁之后 }
});
注意：
①以上属性和方法，实例内部都通过this调用,外部则通过对应的实例方法访问
②在vue的生命周期过程中，它自身还提供了一系列的钩子函数供我们使用，进行自定义逻辑的注入
③以上4个方法在对象被实例化后即按顺序执行，以下2个方法需通过事件触发，并通过调用实例名.$destory()才执行
二.
代码： ①按照平常的html页面写（第一个例子引入jq，后面都不需要jq）
②同时引入 vue.js ，以及就专门的vue使用语法
（vue.js 地址： https://unpkg.com/vue/dist/vue.js）
1.第一个例子： hello vue
<body>
<div id="app">
{{ message }}
div>
<script src="../js/jquery-1.8.2.min.js">script>
<script src="../js/vue.js">script>
<script>
$(function(){
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
app;
console.log(app.$data);
})
script>
body>
console.log(app.$data); 
注意： ①在控制台更改message的值，页面中的值也会随着变化
② 只在第一次打印hellovue时：app 需要再 执行一次，页面才能显示输出message的值，
③输出 app message信息时，html页面内 {{message}} 要写在 el 所代表的 id 标签内部
三.
1.v-bind 指令： 控制台显示message信息已添加上新内容，但是没显示出来
指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性
<div id="app-2">
<span v-bind:title="message"> 在原有内容基础上添加新内容 span>
<p> {{message}}}p>
div>
<script src="../js/jquery-1.8.2.min.js">script>
<script src="../js/vue.js">script>
<script>
$(function(){
var app2 = new Vue({
el: '#app-2',
data: {
message: 'js新增内容 ' + new Date()
}
})
app2;
console.log(app2.message);
console.log(app2.$data);
})
script>
注意：
①console.log(app2.$data)
②console.log(app2.message);
四.
1.v-if
app3: seen:true 显示p标签内容
app3 seen: false 隐藏p标签内容
<div id="app-3">
<p v-if="seen">Now you see mep>
div>
<script src="../js/jquery-1.8.2.min.js">script>
<script src="../js/vue.js">script>
<script>
$(function(){
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
})
script>
注意： 这个例子演示了我们不仅可以绑定 DOM 文本到数据，
也可以绑定 DOM 结构到数据
1.v-for
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
li>
ol>
div>
<script src="../js/jquery-1.8.2.min.js">script>
<script src="../js/vue.js">script>
<script>
$(function(){
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
})
script>
输出： console.log(app4.todos.push({ text: 'New item' }))
发现： ul列表又添加了一行数据
五.
1.v-on : click=“函数（方法）名”
<div id="app-5">
<p>{{ message }}p>
<button v-on:click="reverseMessage">Reverse Messagebutton>
div>
<script src="../js/jquery-1.8.2.min.js">script>
<script src="../js/vue.js">script>
<script>
$(function(){
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js'
},
methods: {
reverseMessage: function () {
this.message = this.message.split(' ').reverse().join(' , ')
}
}
})
})
script>
触发事件前 
触发事件后
2.v-on : click=“函数（方法）名”
<div id="app">
<button v-on:click="counter += 1">增加 1button>
<button v-on:click="counter -= 1">减少 1button>
<p>这个按钮被点击了 {{ counter }} 次。p>
div>
<script src="../js/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data: {
counter: 0
}
})
script>
2.v-on : click=“函数（方法）名”
<button v-on:click="greet">Greetbutton>
var app = new Vue({
el: '#app',
data: {
counter: 0,
info: "hello world"
},
methods: {
greet: function(event){
alert(this.info)
}
}
})
注意：methods 有 s,不然会报错（greet not defined）
2.v-on :keyup.键名="函数名"
<input v-on:keyup.13="submit"/>
<input v-on:keyup.enter="submit"/>
methods: {
greet: function(event){
alert(this.info)
},
say: function(msg){
alert(msg);
},
warn: function (message, event) {
// 现在我们可以访问原生事件对象
console.log(event)
if (event) event.preventDefault()
alert(message)
},
submit: function(){
console.log("按键13触发")
}
}
全部的按键别名：
.enter.tab.delete(捕获 “删除” 和 “退格” 键).esc.space.up.down.left.right
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
六.
添加id，属性href,disabled等 - javascript语句判断 - 事件绑定 - 过滤器
1.v-model ： 输入框的内容改变，p标签的内容也随之改变。
<div id="app-6">
<p>{{ message }}p>
<input v-model="message">
div>
<script src="../js/jquery-1.8.2.min.js">script>
<script src="../js/vue.js">script>
<script>
$(function(){
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
})
script>
2.v-once ： 一次加载 后台数据改变页面显示内容也不再改变
<body>
<div class="app">
message: {{message}}
<p v-once>This will never change: {{ msg }}p>
div>
<script src="../js/vue.js">script>
<script>
var app = new Vue({
el: ".app",
data: {
message: "hello vue",
msg: "v-once 一次加载不再改变"
}
})
console.log(app)
script>
效果图如下：
3.v-html ： 添加一个html标签片段
v-html="data 数据变量名"
4.v-bind:id="data参数名" ： 添加id值
v-bind:disabled="data参数名" ： 添加disabled属性
<body>
<div class="app">
message: {{message}}
<p v-once>This will never change: {{ msg }}p>
<div v-html="rawHtml">div>
<div v-bind:id="dynamicId">v-bind:id 添加id值 div>
<button v-bind:disabled="someDynamicCondition1">Button: v-bind:disabled="false"button>
<button v-bind:disabled="someDynamicCondition2">Button: v-bind:disabled="true"button>
div>
<script src="../js/vue.js">script>
<script>
var app = new Vue({
el: ".app",
data: {
message: "hello vue",
msg: "v-once 一次加载不再改变",
rawHtml: "添加html标签片段",
dynamicId: "d1",
someDynamicCondition1: false,
someDynamicCondition2: true
}
})
console.log(app.$data)
script>
效果图如下：
5.使用javascrpt 表达式
表达式限制：每个绑定都只能包含单个表达式
<div class="app">
<p>number初始值为1： {{number+1}}p>
<p>ok状态：{{ ok ? 'YES' : 'NO' }}p>
<p>message字符处理,初始值abcd：{{ message.split('').reverse().join('-') }}p>
<div v-bind:id="'list-' + id">v-bind:id="'list-' + id"div>
div>
<script src="../js/vue.js">script>
<script>
var app = new Vue({
el: ".app",
data: {
number: 1,
ok: true,
message: "abcd",
id: "d1",
someDynamicCondition1: false,
someDynamicCondition2: true
}
})
console.log(app.$data)
script>
效果图如下：
注意： javascript 可以直接使用 Data,Math
<div class="app">
<p>number初始值为1： {{number+1}}p>
<p>ok状态：{{ ok ? 'YES' : 'NO' }}p>
<p>message字符处理,初始值abcd：{{ message.split('').reverse().join('-') }}p>
<div v-bind:id="'list-' + id">v-bind:id="'list-' + id"div>
<p>{{Math.PI}}p>
<p>{{new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds()}}p>
<p>{{time}}p>
div>
<script src="../js/vue.js">script>
<script>
var time = new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds();
var app = new Vue({
el: ".app",
data: {
number: 1,
ok: true,
message: "abcd",
id: "d1",
time: time,
someDynamicCondition1: false,
someDynamicCondition2: true
}
});
console.log(app.$data,Math.PI, time)
script>
6.v-bind:href="url" 链接
<a v-bind:href="url" v-bind:target="target">国融证券官网a>
url: "http://www.grzq.com/osoa/views/index.html",
target: "_blank"
注意： v-bind:href="url"
这里的url 不能直接写成跳转地址，不然会报错。
7.v-on:submit.prevent="函数名"
<form v-on:submit.prevent="onSubmit">
<button type="submit">提交button>
<span>{{iptstate}}span>
form>
var app = new Vue({
el: ".app",
data: {
number: 1,
ok: true,
message: "abcd",
id: "d1",
time: time,
url: "http://www.grzq.com/osoa/views/index.html",
target: "_blank",
iptstate: "",
onSubmit: function(e){
console.log("onSubmit表单提交");
this.iptstate = "onSubmit表单提交";
}
}
});
效果图如下：点击提交按钮触发函数
8.filter 过滤器
capitalize 已经被移除，需要的话得自己封装方法
七.自定义组件（标签）： todo-item
<body>
<div id="app-7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item">todo-item>
ol>
div>
<script src="../js/vue.js">script>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Whatever else humans are supposed to eat' }
]
}
})
script>
body>
八.
<script>
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 设置 属性 也会影响到 原始数据
vm.a = 2
data.a
console.log(vm.a,data.a) // 2 2
// 设置 原始数据 也会影响到 属性
data.a = 3
vm.a
console.log(vm.a,data.a) // 3 3
script>
注意：只有这些被代理的属性是响应的。
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
created这个钩子在实例被创建之后被调用
var vm = new Vue({
data: {
aa: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('aa is: ' + this.aa); // aa is: 1
}
})
九.
1.判断添加 class: active
isActive : true 添加active
false 不添加active
<body>
<div class="test">
<div v-bind:class="{ active: isActive1 }">div1div>
<div v-bind:class="{ active: isActive2 }">div2div>
div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
isActive1: true,
isActive2: false,
rawId: "ID1",
formatId: "id2"
}
})
script>
body>
2.添加多个class (只要为true,就会添加)
3.class 绑定在一个对象里
var myVue = new Vue({
el: ".test",
data: {
isActive1: true,
isActive2: false,
hasError: true,
rawId: "ID1",
formatId: "id2",
classObject: {
active: true,
'text-danger': true
}
}
})
4.class 包含在数组里
var myVue = new Vue({
el: ".test",
data: {
isActive1: true,
isActive2: false,
hasError: true,
rawId: "ID1",
formatId: "id2",
classObject: {
active: true,
'text-danger': true
},
activeClass: 'active',
errorClass: 'text-danger'
}
})
script>
5.class 三元表示
var myVue = new Vue({
el: ".test",
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
6.添加绑定 style 样式
<div class="test">
<div v-bind:style="styleObject">添加style样式对象div>
div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
styleObject: {
color: "#fff",
backgroundColor: "blue"
}
}
})
script>
7.多个style样式
<div v-bind:style="[baseStyles, otherStyles]">基本样式 + 其他样式div>
var myVue = new Vue({
el: ".test",
data: {
styleObject: {
color: "#fff",
backgroundColor: "blue"
},
baseStyles: {
color: "#fff",
backgroundColor: "blue"
},
otherStyles: {
border: "2px solid red",
margin: "10px"
}
}
})
8.css3 过渡效果
HTML>
<html>
<head>
<title>vue简单例子title>
<meta charset="UTF-8"/>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
style>
head>
<body>
<div id="app">
<button v-on:click="show = !show">
Toggle
button>
<transition name="fade">
<p v-if="show">hellop>
transition>
div>
<script src="../js/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
show: true
}
})
script>
body>
html>
十.
1.简单的条件渲染
<div class="test">
<h1 v-if="ok">Yesh1>
<h1 v-if="no">noh1>
<h1 v-else>其他h1>
div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
ok: true,
no: false
}
})
script>
2.条件组
v-if v-else-if v-else
2.js数组过滤
<li v-for="n in evenNumbers">{{ n }}li>
data: {
items: [
{message: 'Foo' },
{message: 'Bar' }
],
msg: [
{message: 'Foo' },
{message: 'Bar' }
],
arr: [1,2,3,46,6],
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
},
numbers: [ 1, 2, 3, 4, 5, 6 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
十一.
1.复选框： 根据选择 实时显示选中内容，
选中就在数组中添加内容，取消选中就在数组中删除数据
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jacklabel>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">Johnlabel>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mikelabel>
<br>
<span>Checked names: {{ checkedNames }}span>
div>
<script src="../js/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data: {
checkedNames: []
}
})
script>
注意： 单选框，下拉框 同样如此。
单选框：
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">Onelabel>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Twolabel>
<br>
<span>Picked: {{ picked }}span>
下拉框：
<select v-model="selected">
<option>Aoption>
<option>Boption>
<option>Coption>
select>
<span>Selected: {{ selected }}span>
默认选中的下拉框：
<select v-model="selected2">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
option>
select>
<span>Selected: {{ selected2 }}span>
data: {
checkedNames: [],
picked: [],
selected: [],
selected2: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
