02、Vue-基础学习

一、模版指令

通过模版指令(写在html中的)，即是html和vue对象的粘合剂。

• 数据渲染 v-text、v-html、{{}}

  <div id="app">
    {{ message }}
  </div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

v-text更新元素的 textContent，v-html更新元素的 innerHTML，内容按普通 HTML 插入，不会作为 Vue 模板进行编译。如果想要title: 'TOMVC <sub>2.0</sub>'不以字符串形式显示，就可以使用v-html， <h2 v-html='title'></h2>

• 控制模块显示隐藏 v-if、v-show

  <div id="view">
    <p v-if='isShow'></p>
    <p v-show='isShow'></p>
</div>

new Vue({
    el: '#view',
    data: {
      isShow: true
    }
 });

v-if是直接不渲染该元素； v-show是通过display: none进行隐藏;

• 渲染循环列表 v-for
  模板引擎都会提供循环的支持。Vue也不例外，Vue是提供了一个v-for指令。基本的用法类似于foreach的用法。

    <ul class="view">
        // 遍历数组，取出每个元素
        <li v-for='item in list'>
            {{item.text}}
        </li>
    </ul>

<script>
    var app = new Vue({
        el: '.view',
        data: {
            list: [  // 数组
                {text: '01、HTML'},
                {text: '02、CSS'},
                {text: '03、JavaScript'}
            ]
        }
    });
</script>

• 事件绑定 v-on

<div id="view4">
    <input type="button" value="按钮" v-on:click='doThis' />
    // 简写
    <input type="button" value="按钮" @click='doThis' />
</div>

<script>
  new Vue({
    el: '#view4',
    methods: {
      doThis: function(){
        alert('hello');
      }
    }
});
</script>

• 属性绑定 v-bind
  Vue中不能直接使用{{ expression}} 语法进行绑定html的标签，而是用它特有的v-bind指令，语法<标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>。
  由于v-bind 使用非常频繁，所以Vue提供了简单的写法，可以去掉v-bind直接使用:即可。

<div id="view">
    ![](imgSrc)
    ![](imgSrc)
    <p :class='InfoClass'></p>
</div>

<script>
new Vue({
  el: '#view',
  data: {
    imgSrc: 'm_3_100.png',
    InfoClass: 'infoRed'
  }
});
</script>

• 样式绑定 v-bind
  对于普通的属性的绑定，只能用上面的讲的绑定属性的方式。而Vue专门加强了class和style的属性的绑定。可以有复杂的对象绑定、数组绑定样式和类。
  经常我们需要对样式进行切换，比如：div的显示和隐藏，某些标签active等。Vue提供的对象绑定样式的方式就很容做这些事情。

  <style>
      .view{
          width: 300px;
          height: 30px;
          border: 1px solid gray;
          line-height: 30px;
          text-align: center;
        }
       .active{  // 使能样式
          color: red;
        }
</style>

// 当isActive为true时，这个div就会添加类名active；当isActive为false时，这个div就会移出类名active；
<div class="view" :class='{active:isActive}'>
    {{message}}
</div>

   var app = new Vue({
      el: '.view', 
      data: {     
           message: 'hello Vue.',
           isActive: false 
       }
   });

• 双向数据绑定 v-model
  上面的例子基本都是单向的js对象向 HTML数据进行绑定，那HTML怎样向js进行反馈数据呢？
  Vue提供了一个新的指令：v-model进行双向数据的绑定，注意不是v-bind。

<div id="app">
    <p>{{ message }}</p>
     // 双向数据绑定
    <input v-model="message">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

二、Vue组件中重要选项

Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂载、销毁等过程进行js控制。

• data数据选项，代表vue对象的数据
  创建的Vue对象中的data属性就是用来绑定数据到HTML的，Vue框架会自动监视data里面的数据变化，自动更新数据到HTML标签上去。本质原理是：Vue会自动将data里面的数据进行递归抓换成getter和setter，然后就可以自动更新HTML标签了，当然用getter和setter所以老的浏览器Vue支持的不够好。

<div id="app">
    {{ message }}
</div>

var app = new Vue({
    el: '#app',
    data: {  // data数据选项
      message: 'Hello Vue!'
    }
 })

• methods方法选项，代表vue对象的方法
  方法中的 this 自动绑定为 Vue 实例。

<div id="view">
  <input type="button" value="按钮" @click='doThis' />
</div>

<script>
new Vue({
  el: '#view',
  methods: {  // methods方法选项
    doThis: function(){
      alert('hello');
    }
  }
});
</script>

• computed计算属性
  在做数据的绑定的时候,数据要进行处理之后才能展示到html页面上，虽然vue提供了非常好的表达式绑定的方法，但是只能应对低强度的需求，另外放入太多的逻辑会让模板过重且难以维护。而计算属性，即属性可以是一个方法。
  所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了，在计算属性中定义的函数里面可以直接使用指向了vue实例的this。

<div class="view">
   // 计算属性，好处在于会自动根据totalPrice显示不同内容
   {{showStr}}
</div>

var app = new Vue({
  el: '.view', 
  data: {
    totalPrice: 18
  },
  computed: {  // Vue对象的computed属性
    // 计算属性，但该属性是一个方法
    showStr: function(){  
       // this指向vue实例 
      if(this.totalPrice < 20){
        return '金额小于20，没有优惠喔!'
      } else {
        return '金额大于20，免配送费!'
      }
    }
  }
 });

• watch监听选项，设置了对象的监听方法
  一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

  var view2 = new Vue({
    el: '#view2',
    data: {
      a: 1
    },
    methods: {
      doSomething: function(){
        this.a++;
      }
    },
    watch: {
      a: function(newvalue, oldvalue){
        console.log(newvalue, oldvalue);
      }
    }
 });

三、Vue实例的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

Vue实例生命周期.png

Vue提供的可以注册的钩子都在上图片的红色框标注:

• beforeCreate: 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
• created: 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
• beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
• beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
• updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
• beforeDestroy: 实例销毁之前调用，在这一步，实例仍然完全可用。
• destroyed: Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

四、Vue的全局API

• Vue.nextTick
  在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。即保证操作的DOM已经渲染。

Vue.nextTick(function () {
    // DOM 更新完成，可以操作
})

• Vue.set
  设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

  Vue.set( object, key, value )

• Vue.use
  加载插件

// 导入VueRouter
import VueRouter from 'vue-router';
// 加载插件(全局注册一样)  
Vue.use(VueRouter);

• Vue. mount
  如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用Vue. mount 手动地挂载一个未挂载的实例。

  var MyComponent = Vue.extend({
      template: '<div>Hello!</div>'
  });

  // 创建并挂载到 #app (会替换 #app)
  new MyComponent().$mount('#app')
  // 同上
  new MyComponent({ el: '#app' })

五、组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。

• 如何划分组件

  - 功能模块: select、pagenation...
  - 页面区域划分: header、footer、sidebar...

• 全局扩展方法Vue.extend
  Vue提供了一个全局的API，Vue.extend可以帮助我们对Vue实例进行扩展，扩展完了之后，就可以用此扩展对象创建新的Vue实例了。 类似于继承的方式。

<script>
// 创建构造器
var Profile = Vue.extend({
    // 新的对象的模板，所有子实例都会拥有此模板
    template: '<p>{{firstName}}  {{lastName}}</p>',
     // 创建的Vue实例时，data可以是Object 也可以是Function，但是在扩展的时候，data必须是一个函数，而且要返回值
    data: function () {  
        return {            
          firstName: '张三',
          lastName: '张二蛋',
       }  
    }
  });

  // 创建 Profile 实例，并挂载到一个元素上
  new Profile().$mount('#mount-point')
  // 或者下面这种写法
  new Profile({
    el: '#mount-point'
  });
</script>

• 创建一个组件并注册使用
  Vue提供了一个全局注册组件的方法：Vue.component。
  使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素

<div id="view">
    <!--组件直接跟普通的标签一样的使用-->
    <my-title></my-title>
</div>

// 注册一个组件
Vue.component('my-title', {
    // 模板选项设置当前组件，最终输出的html模板。注意：有且只有一个根元素。
    template: '<div>A custom component!</div>'
})

  // 创建根实例
  new Vue({
     el: '#view'
  })

• 局部注册组件
  不必在全局注册每个组件，有时需要注册一个局部模块。

   <div class="view">
        // 组件在注册之后，便可以在父实例的模块中以自定义元素
       <my-components></my-components>
   </div>

<script>
    var Child = {
        template: '<div>A custom component!</div>'
    }

    //  创建一个Vue实例
    var app = new Vue({
        el: '.view',
        components: {  // 局部注册组件(如果没有局部注册是不能使用的)
            'my-components' : Child
        }
    });
</script>

• data必须是函数
  通过 Vue 构造器传入的各种选项大多数都可以在组件里用。data 是一个例外，它必须是函数。

   <div class="view">
       <my-title></my-title>
   </div>

<script>
    // 注册一个全局组件
    Vue.component('my-title', {
        template: '<h1> {{title}} </h1>',
        data: function(){
            return {
                title: 'hello Vue!'
            }
        }
    });

    //  创建一个Vue实例
    var app = new Vue({
        el: '.view'
    });
</script>

• 单文件组件的使用方式介绍 【项目开发都会是一个文件对应一个组件】
  通过上面我们定义组件的方式，就已经感觉很不爽了，尤其是模板的定义，而且样式怎么处理也没有很好的进行规整。 Vue可以通过Webpack等第三方工具实现单文件的开发的方式。

  // Hello.vue组件
    <template>
        <h3>
            标题: {{str}}
        </h3>
    </template>
    
    <script>
        export default {
            data: function(){
                return {
                    str: 'hello Vue!'
                }
            }
        }
    </script>
    
    <style>
        h3{
            text-align: center;
        }
    </style>

<script>
  // App.vue组件中使用Hello.vue组件
  // 导入Hello组件
  import Hello from './components/Hello';
  export default {
    // ...
    components: {  // 局部注册组件
      Hello
    }
  }
</script>

<template>
   // 使用自定义元素(Hello组件)
  <hello></hello>
</template>

通过vue-cli脚手架构造项目

• 组件间调用 --- components
  如果要使用某个组件，单纯通过import导入是不行的，还需要通过components进行注册才能使用。

  // App.vue中

  // 导入组件
  import Header from './header'  
  import Footer from './footer'  

  new Vue({
    // 组件需要注册之后才能使用
    components:{
      Header, Footer
    }
  })

  // 在App.vue中
  <header></header>
  <footer></footer>

• 组件间通信 --- props (父组件给子组件传参)
  组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。

  // header.vue 子组件
  new Vue({
    props: ['message'],  // 不同组件中的数据操作()
    methods: {
      doThis: function(){  // 子组件获取到父组件传递的参数this.message
        console.log(this.message);
      }
    }
  })

  // props可以其他写法
props:{
    seller:{  // 即是设置接收参数的数据类型
      type: Object,  // 参数的类型
      // default 是设置默认值的
    }
 }

  // app.vue 父组件
  // 将字符串内容'hello world!'传递给子组件
  <header message='hello world!'></header>

  // 绑定data属性值
  // <header :message='title'></header> 

• 组件间通信 --- 自定义事件(子组件给父组件传参)

  // app.vue 父组件
  
  // 自定义事件v-on: child-tell-me, 事件名为'child-tell-me'
  <component-b v-on:child-tell-me='getMsg'></component-b>

  new Vue({
    // ...
    methods: {
      // 'child-tell-me'对应触发的方法，即父组件获取子组件传递的参数msg
      getMsg: function(msg){  
        console.log(msg)
      }
    }
})

  // footer.vue 子组件
    new Vue({
    // ...
    methods: {
      // 在sendMsg方法中，即触发'child-tell-me'方法，并传递参数
      sendMsg: function(msg){  
        this.$emit('child-tell-me', '你收到我发送的消息了吗?【componentB】')
      }
    }
})

六、Vue路由

对于前端来说，其实浏览器配合超级连接就很好的实现了路由功能。但是对于单页面应用来说，浏览器和超级连接的跳转方式已经不能适用， 所以各大框架纷纷给出了单页面应用的解决路由跳转的方案。
Vue框架的兼容性非常好，可以很好的跟其他第三方的路由框架进行结合。当然官方也给出了路由的方案：vue-router; 建议还是用官方的最好，使用量也是最大，相对来说Vue框架的升级路由组件升级也会及时跟上，所以为了以后的维护和升级方便还是使用Vue自家的东西最好。

• vue-router的安装使用
  1.CDN连接方式

  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  

  2.npm 安装

  npm install vue-router
  

• vue-router 入门
  1.引入vue和vue-router(如果配合npm和webpack的话可以直接作为一个模块导入即可)

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  

  2.定义路由跳转的组件(或导入组件)

  const Foo = { template: '<div>foo</div>' }
  const Bar = { template: '<div>bar</div>' }
  

• 定义路由规则对象

  // 每个路由path应该映射一个组件
    const routes = [
        {path: '/foo', component: Foo},
        {path: '/Bar', component: Bar}
    ];

• 创建路由器对象

    // 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({  
        routes   // （缩写）相当于 routes: routes，es6的新语法
    });

• 创建和挂载根实例

    const app = new Vue({
        router
    }).$mount('#app');

• 模板中编写路由跳转链接

<div id="app">
      <p>
          <!-- 使用 router-link 组件来导航. -->
          <!-- 通过传入 `to` 属性指定链接. -->
          <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
          <router-link to="/foo">Go to Foo</router-link>
          <router-link to="/bar">Go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
</div>

注意: vue-router@2.x 只适用于 Vue 2.x 版本。 vue-router@1.x 对应于Vue1.x版本。
用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

七、视频学习

如果想要对Vue做进一步的学习，可以查看视频课程，后续还会有vue进阶的实战视频喔！
vue入门基础