vue 复习2

如何真机测试vue项目

)

(1) 将config目录中的index.js的host设置为 0.0.0.0

(2)将手机和项目所在的电脑处于同一网段下（即连接同一个wifi）

(3)用手机访问电脑中项目所处的ip和端口

例如：电脑的ip是192.168.43.36

如何查看电脑ip:在命令窗口（即cmd），输入ipconfig /all,找到对应ip

例如：http://192.168.43.36:8080/

如何在组件中使用less或 sass编写css呢

例如：less  

  第一步：安装Less
  
     npm install less less-loader
  第二步：在组件的style中添加  lang="less"，就可以使用less啦

    如果less忘记啦，没关系，看资料：http://www.cnblogs.com/smyhvae/p/8476602.html

Vue组件通讯（即组件传值）

1.父传子：主要通过props实现

 props:有两种接收形式

  第一种：用数组形式接收

    例如：props:['title'] 

    缺点：不能设置默认值，也不能设置接收值的类型


  第二种：用对象形式接收

   优点：能设置默认值，并且也能设置接收值的类型

2.子传父：主要通过$emit事件派发实现

 子组件：通过this.$emit(事件名,要传递的值)触发

 例如：

    methods:{
      go(i) {
          this.$emit('numEvent',i);
      }
   }
 父组件：通过@监听子组件派发的事件，及传递过来的值

 例如：
    //模板中代码
    <starCom @numEvent="getIndex">87
    //js代码：
    methods:{
            getIndex(index) {
                console.log('你点击的星星索引：',index)

                if(index!==undefined) {
                    this.content=this.ratings[index]
                }
              
            }
    }

3.兄弟之间（非父子）

第一种方式：通过bus来实现：即公共桥梁

   即：创建一个公共的空的vue

   然后分别在兄弟组件之间引入bus

   第一步：A组件中引入bus

   通过Bus.$emit(事件名,要传递的值)触发


第二种方式：通过vuex实现


svg:  svg-sprites