02、Vue-基础学习

一、模版指令

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

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

  

    {{ message }}
  

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

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

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

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

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

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

    

        // 遍历数组，取出每个元素
        

            {{item.text}}
        
    

• 事件绑定 v-on

    
    // 简写
    

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

    ![](imgSrc)
    ![](imgSrc)
    

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

// 当isActive为true时，这个div就会添加类名active；当isActive为false时，这个div就会移出类名active；

    {{message}}

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

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

    
{{ message }}
     // 双向数据绑定
    

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支持的不够好。

    {{ message }}

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

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

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

   // 计算属性，好处在于会自动根据totalPrice显示不同内容
   {{showStr}}

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提供的可以注册的钩子都在上图片的红色框标注:

• beforeCreate: 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
• created: 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
• beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted: el 被新创建的 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: '
Hello!
'
  });

  // 创建并挂载到 #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实例了。 类似于继承的方式。

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

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

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

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

   

        // 组件在注册之后，便可以在父实例的模块中以自定义元素
       
   

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

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

  // Hello.vue组件
    

    

    

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

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

  // App.vue中

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

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

  // 在App.vue中
  

  

• 组件间通信 --- 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!'传递给子组件
  


  // 绑定data属性值
  // 
 

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

  // app.vue 父组件

  // 自定义事件v-on: child-tell-me, 事件名为'child-tell-me'
  

  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连接方式

  2.npm 安装

  npm install vue-router
  
  

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

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

  const Foo = { template: '
  foo
  ' }
  const Bar = { template: '
  bar
  ' }
  
  

• 定义路由规则对象

  // 每个路由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');

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

      

          
          
          
          Go to Foo
          Go to Bar
      
      
      
      

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

七、视频学习

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

作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。