Vue.js学习-单页面组件创建、属性初识

1.组件创建

   1）在html中使用vue时，使用new Vue

   2）在.vue文件中使用export default

   3）两者的区别可以参考：https://www.cnblogs.com/ppJuan/p/7151000.html

2.组件中各个属性的声明和使用（未标注使用方式的情况下，通用）

    1）name：指代这个页面的名称；export default使用

name: 'HelloWorld',

    2）el：当前组件的作用域；new Vue使用

  <div id="app">
    <router-view/>
  </div>



el: '#app',

     3）data：声明数据

data () {
    return {
      msg: 'this is true',
      msgResult: 'this is chage count:',
      flag:false,
      msg1: 'this is false',
      count:0,
      listData:[1,1,1,1],
      toChildParam:44444
    }
  }

     数据在页面中使用的方式：

     a.单向展示：直接两个花括号、v-bind:(可以简化为一个冒号)

 <div v-if="flag == true">  
      {{msg}}
      <input type="text" placeholder="单向显示数据" :value="msg" />
 </div>

    b.双向绑定：可以通过修改页面中输入的值，改变变量的值；使用v-model

<input type="text" placeholder="双向显示数据" v-model="msg" />

   c.条件渲染：通过v-if控制元素的显示和隐藏；需要注意的是v-if与v-show 的区别

<div v-if="flag == true">  
      {{msg}}      
</div>
<div v-else>  
      {{msg1}}
</div>

    d.列表渲染：

<ul>
      <li v-for="(item,index) in listData" :key="index">{{item}}-{{index}}</li>
</ul>

    4）methods：函数的声明       

<button @click="testFunc">提交</button>

testFunc:function(){    
        this.flag = !this.flag;      
    },

    需要注意，在父元素和子元素同时使用了事件，vue提供了修饰符来使业务能够做更好的表达。下面的实例是一个父元素和子元素同时拥有点击事件，实现某个子元素在点击的时候，父元素不触发。

<ul @click="testFunc">
      <li v-for="(item,index) in listData" :key="index" 
           @click.stop="testElementFunc(item,index)">{{item}}-{{index}}</li>
</ul>

      5）computed：计算属性，不需要将过多的逻辑放在页面中；下面是一个显示所有子元素点击总数的实例（每个子元素都存在被点击之后，自身被点击数目加一）：

  总计：<span>{{totalNum}}</span>


computed:{
    totalNum:function(){
      var total = 0;
      for(var i = 0;i < this.listData.length;i++){
        total += this.listData[i];
      }
      return total;
    }
 },

    6）watch：观察者，在某元素在发生变化的时候，可以做一些预定好的事情。下面是一个记录某状态值变化次数的监听：

  watch:{
    flag:function(){
      this.count++;
      this.msgResult = "this is chage count:"+this.count;
    }
  },

    7）components：自定义组件，开发者可以将其他组件嵌入当前页面

<hello4 :giveson="toChildParam" @getSonData="getSonData">
      <div>dhjksjdjsddjdj</div>
</hello4> 


import hello4 from "./Hello4";

 components:{
    hello4
  }