[Vue] 10 - FAQ Pages

总结01-09，并提供一些 code sample。将弱点列出来，逐个击破！

基础课程：vue.js 十一天课程 VUE入门加实战

 

  

 

一、Code Sample

演示：https://tigerchain.github.io/vue-lesson/

代码：https://github.com/TigerChain/vue-lesson.git

 

Vue 的指令

1. 1. Hello World
   2. v-on 事件 # 按钮
   3. v-if 和 v-for 指令 # 图标切换、json文件显示
   4. v-show 和 v-model 指令 # v-show的图标切换
   5. blog-demo # 包含 swal() 弹出层的用法

 

Vue porops 和 methods

1. 1. vue-props # class 绑定与class 对象绑定，props管理参数传递
   2. vue-method # 在data中也可以调用方法

 

Vue 的生命周期

1. 1. vue-lifecycle # beforeCreate --> created --> beforeMount --> mounted --> beforeUpdate --> updated --> beforeDestroy --> destroyed

 

rem demo

1. 1. mediaquery实例
   2. rem实例
   3. sass

 

路由功能

1. 1. has-router # hash路由，以及 自定义 new CustomRouter() by 传统写法。
      
   2. h5history-router # 传统”回退“写法。
   3. html-include-vue-router # Vue方式的写法，包括：Vue.extend()
   4. vue-cli-router-webapp # Vue 路由传参

 

vue 若干练手 Demo

1. 1. 吸顶效果
   2. 商品选中效果
   3. tab 选中效果
   4. vue 折叠效果
   5. vue 简易计算器
   6. vue 下拉框

 

  

二、自省总结

• 图标切换的两种方式：v-on 或 v-show 

      <div v-if="flag" >
        <div id="showDiv">
            我显示出来了
        </div>
      </div>
      <!-- 否则显示圆形的 div -->
      <div v-else>
        <div id="showBuleDiv"><span style="color:white">哈哈</span></div>
      </div>

  

• v-bind:value

<!-- :value="''" 和 v-model 同时出现会报错--> 

Goto: 【vue】input 中v-moel 和v-bind:value 的区别

 

• 在当下文件中直接定义“子组件”

子组件的引用。

<div id="app2">
    <!-- 如果要使用 props 来传递对象，就要使用 v-bind  -->
    <!-- 注意：在这里 age 在 props 中规定了要传入数字类型，这里传入 String 是为了演示效果，正式中使用要按照 age=100 来传入 -->
    <mycomponent
      message="你好"
      :mydata="{username:'tigerchain',age:28}"
      name-style="color:red"
      age="100"
      :clickme="show"
      />
</div>

<div></div>代表的内容如下：

 

子组件的 “嵌入式定义”：这里使用了template。

    // 定义一个组件
    var myComponent = Vue.extend({

      // 定义 props 就是一些默认值
      props: {
        message:"",
        mydata:{},
        //样式 ，如果这里使用驼峰标识 ，则在标签中使用就要使用 name-style 传递
        nameStyle:{},
        // 这里规定传递过来的数据必须是数字，否则后台会报警告
        age: Number,
        clickme:{
          type:Function
        }
      },

      data(){
        return {
          // 可以在数据里面将 props 值赋给 data 值，然后就可以修改这个值，但是原始的 props 中的值是修改不了的
          msg:this.message
        }
      },

      template: '<div>'+
                  '{{ message }}--{{msg}}'+
                  '<div>'+
                     '<span v-bind:style="nameStyle" @click="clickme()">{{ mydata.username}} {{this.age}}</span>'+
                     '<button @click="clickme(msg)">点击我</button>'+
                  '</div>'+
                ' </div>'
    })


    // 全局注册组件 组件的别名要是小写，否则会报错
    Vue.component('mycomponent', myComponent)

给button定义方法，放在了这里。

    var vm2 = new Vue({
      el:'#app2',
      methods: {
        show(msg) {
          // return () =>{
            if(msg){
              alert('带回调的参数是：'+msg)
            }else {
              alert('没有带参数回调')
            }

            // console.log(this,arguments)
          // }
        }
      }
    })

 

•  hash路由

#表示网页中的位置标识符。

总结的非常好：URL中的hash（井号）

 https://www.baidu.com#/login

 

这里的login，可以是template的名字。

var routerObj = new VueRouter ({
    routes: [
        { path: '/login', component: login }
    ]
})

下面这种是“非法的“，注释掉的第一个是正确的。

 

 

 

 

 

 

 

 

源码分析

---

来，送你一本免费的Vue源码解析！ -->《深入剖析Vue源码》

Vue源码分析(一) : new Vue () 做了什么