前言：

    听说这个Vue挺热门的， 我们公司前端貌似也是Vue，要做全栈Vue还是学习一下吧：

正文：

Vue：

            1、官网：可自底向上逐层应用的、用来构建用户界面的渐进式框架；

             2、当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的

基础：        

        ViewModel是Vue.js的核心，是一个作用于某HTML元素上的Vue实例;Vue容许使用者采用简洁的模板语法将数据渲染进DOM系统中;

        强烈推荐始终使用kebab-case事件名：my-example、my-test、my-front、my-demo

属性

        一个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: {// 计算属性的 getterreversedMessage: 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事件中同步，看起来像是在鼠标离开或者失去焦点时改变；.number修饰符自动将用户输入转为数值类型，类似的还有，自行百度或Google，还有.trim

       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` 指向 vmalert(this.message)},say: function(msg) {alert(msg)}}})</script>

    7、$event:事件对象，同js中的event，angular中也常常用到这个对象，作为参数

扩展：

    1、过滤器|可串联（多个），感觉类似angular中的管道|

<p>{{ jiexige|uppercase }}</p>
//uppercase 大写、 lowercase 小写、 capitalize 首字母大写、currency 参数:"￥" 钱币

全局组件：通过Vue.component创建组件

<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>

关于props：推荐kebab-case命名法（短横线分隔）my-component-name

基础组件：常用组件的自动化全局注册

“自动化”这个词听起来就很高大上啊有木有？angular中还没有见到这种自动注册组件的功能，可能对angular认识还比较浅，不过Vue组件的思想和angular还是很像的；下面具体来看一下吧：

全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生，如可以在入口文件：src/main.js中导入

代码我就不复制了写的还是很明白的，传送门在此

局部组件：父子组件

    上面写了一个静态的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>

也可以通过JavaScript定义组件：

1、var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }1.1、components中使用时：
new Vue({el: '#app'components: {'component-a': ComponentA,'component-b': ComponentB}
})1.2、ComponentA 中用 ComponentB var ComponentA = {components: {'component-a': ComponentB},// ...
}
2、通过 import/require 使用
ComponentB.js 或 ComponentB.vue 文件中:
import ComponentA from './ComponentA'//导入
import ComponentC from './ComponentC'export default {components: {ComponentA,ComponentC},// ...
}

        子组件将值传出去：自定义事件

             $on(eventName) 监听事件、 $emit(eventName) 触发事件

自定义指令：

        加注释的截图没有保存上，给个链接慢慢去悟吧

路由：通过不同的 URL 访问不同的内容

    载入vue-router库：下载到本地比较好

    到这里菜鸟教程就读完了，但是运行菜鸟提供的例子、打开完全看不懂，看来还是要看官网的，这篇量够了，下篇见咯

感谢分享：

官网

菜鸟教程

Vue快速入门

Vue.js——60分钟快速入门