前言：
听说这个Vue挺热门的， 我们公司前端貌似也是Vue，要做全栈Vue还是学习一下吧：
正文：
Vue：
1、官网：可自底向上逐层应用的、用来构建用户界面的渐进式框架；
2、当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的
基础：
ViewModel是Vue.js的核心，是一个作用于某HTML元素上的Vue实例;Vue容许使用者采用简洁的模板语法将数据渲染进DOM系统中
属性
一个Vue对象四个常用属性：el、data、methods、components
el：声明管理的边界，数据与谁绑定，目前看到的都是和id绑定
data:存储数据的属性（值），对象格式
methods：事件的方法，实现；
还有一个computed两者效果一样，但后者依赖缓存，缓存改变才重新获取值，而methods重新渲染时（如刷新界面）函数总重新调用，computed默认属性为getter【菜鸟教程】
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
components：组件
ps：还有一个filters过滤、类似装饰模式、修饰限制一下、不常用
结合官网的例子，大家感受一下：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
watch监听：响应数据变化、貌似会保存旧值(这个操作莫名感觉很6）【菜鸟教程】
使用：
1、html文件引用 ；建议下载到本地 以引用本地文件的方式使用
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
注意：
1、冒号、逗号后面要加一个空格
2、对象里用两个空格代替缩进，存放链接使用require、数据用单引号引起
{
url: require('./assets/images/img4.png'), }常用点：
1、文本插值绑定：{{}}，如上面的例子
2、双向绑定：v-model，angular中利用ngModel实现双向绑定，看菜鸟教程感觉这个取得是value，实际运用中验证吧
<div id="app">
<p>{{ message }}</p>//插值绑定，显示作用
<input v-model="message">//界面打开是显示data中的值，用户输入改变值时，上面的message也跟着改变
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
补充：有一个.lazy修饰符，这样就不是input同步的而是change事件中同步，好像是在鼠标离开或者失去焦点时改变
3、输出html代码：v-html=“*”
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>
常用指令：带v-的特殊属性
1、v-if:条件渲染指令，v-if='***'根据***返回bool值
初始化渲染条件为假，什么也不做直到第一次 条件为真开始渲染条件块，切换过程中确保条件块内事件监听器、子组件被适当销毁和重建，有比较高的切换开销、运行时条件改变很少推荐使用；
2、v-show：条件渲染，所指定的元素始终被渲染到HTML，但是不符合条件的会通过style属性 设为隐藏，有较高初始渲染开销、如需要频繁的切换推荐使用；
<div id="mjx">
<h1 v-if="something">马金兴</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
</div>
<script src="D:/js/vue.js"/>
<script>
var vuemjx = new Vue({
el: '#mjx',
data:{
something: true,#和上面v-if“”中同，注意空格
age: 28#符合上面的条件判断，Age：28显示，修改为23、不符合隐藏
}
})
</script>
3、v-else：跟在v-if或v-show后面,但是官网说v-show不支持v-else、这个用用就知道了
在2.1.0中新增v-else-if块
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
4、v-for：循环、数组渲染，比v-if优先级高；建议使用v-for时通过key（类似于id)
<div id="app-4">
<ol>
<li v-for="todo in todos">//in可以被of代替，更接近js迭代器语法
{{ todo.text }}的价格是：{{todo.price}}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' , price: '12' },
{ text: '学习 Vue', price: '12' },
{ text: '整个牛项目' , price: '12' }
]
}
})
5、v-bind：样式绑定，用法 v-bind:attribute=""，可缩写为“：”
<li v-for="n in pageCount"><!--修改class样式-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<script>
var vm = new Vue({
el: '#app',
data: {
activeNumber: 1,
pageCount: 4
}
})
</script>
缩写形式：<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>
6、v-on：监听dom事件，缩写为@【菜鸟教程】
<div id="app">
<p><input type="text" v-model="message"></p>
<p>
//click事件直接绑定一个方法;缩写为@click="greet"
<button v-on:click="greet">Greet</button>
</p>
<p>
<!--click事件使用内联语句-->
<button v-on:click="say('Hi')">Hi</button>
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function() {
// // 方法内 `this` 指向 vm
alert(this.message)
},
say: function(msg) {
alert(msg)
}
}
})
</script>
7、$event:事件对象，同js中的event，angular中也常常用到这个对象，作为参数
扩展：
1、过滤器|可串联（多个），感觉类似angular中的管道|
<p>{{ jiexige|uppercase }}</p>
//uppercase 大写、 lowercase 小写、 capitalize 首字母大写、currency 参数:"￥" 钱币
全局组件
<div id="app">
<runoob message="hello!"></runoob>//通过名字引用，传了个参数给runoob组件
</div>
<script>
// 注册
Vue.component('runoob', {
// 声明 props，传递数据的一个自定义属性
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
局部组件：父子组件
上面写了一个静态的prop，下面来一个动态的：【菜鸟教程】 这个和angular还是很相像的
<div id="app">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
// 注册
Vue.component('todo-item', {
// 声明 props，传递数据的一个自定义属性
props: ['todo'],//通过todo接收传过来的值，找todo不找item
// 同样也可以在 vm 实例中像 "this.todo.text" 这样使用
template: '<li>{{ todo.text }}</li>'
})
// 创建根实例
new Vue({
el: '#app',
data: {
sites: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
})
</script>
子组件将值传出去：自定义事件
$on(eventName) 监听事件、 $emit(eventName) 触发事件
自定义指令：
加注释的截图没有保存上，给个链接慢慢去悟吧
路由：通过不同的 URL 访问不同的内容
载入vue-router库：下载到本地比较好
到这里菜鸟教程就读完了，但是运行菜鸟提供的例子、打开完全看不懂，看来还是要看官网的，这篇量够了，下篇见咯
感谢分享：