Vue 数据绑定与事件的处理

<!--模板标签-->
<!--当前模板的页面 一个模板里面只能有一个子容器div
    数据绑定
    属性绑定 v-bind指令也可以简写 方式是v-bind title=""
    循环数据的渲染
-->
<template>
  <div id="app">
    <div>{{msg}}</div>
    <div>{{arr}}</div>
    <div>{{obj.name}}</div>
    <!--绑定为元素的文本值-->
    <div v-text="innerText"></div>
    <!--绑定为元素的Html值-->
    <div v-html="innerHtml"></div>
    <button v-bind:title="title">按钮1</button>
    <button :class="className">按钮2</button>
    <!--循环渲染数组类型的数据 v-for循环哪个元素给谁写-->
    <ul>
      <li v-for="(item,index) in object" :key="index">
        <b>索引：{{index}}</b>
        <b>名称：{{item.name}}</b>
        <b>性别: {{item.sex}}</b>
        <b>年纪：{{item.age}}</b>
        <b>爱好：<span v-for="(hob,cindex) in object.hobby" :key="cindex">
          {{cindex+1+"."+hob}}
          </span>
        </b>
      </li>
    </ul>
    <div :class="defaultstyle"></div>
    <!--绑定多个类名称-->
    <div :class="{'add':true,'addcolor':isadd,'changecolor':!isadd}"></div>
    <div :style="{'width':sw+'px','height':sh+'px','background-color':'pink'}"></div>
    <!--vue数据双向 vue里面的数据双向原则 model层数据发生变化 view相应改变 反之亦然 mvvm模式
    MVC三层结构 model view  Control控制层

    vue事件 v-on:type="" 简写 @type=""
    -->
    <!--操作元素的事件-->
    <button v-on:click="clickbtn">按钮1</button>
    <button @click="clickbtn2">按钮2</button>
    <!--处理事件的冒泡 常规代码出现事件的冒泡行为
    @click.stop="" 阻止事件的冒泡 event.stopPropagation
    @click。prevent="" 阻止事件的默认行为 event.preventDefault
    @click.self="" 点击自身的时候触发事件 e.target===e.currentTarget
    @click.once="" 让事件触发一次
    @click.passive="" 事件永远不调用默认行为
    @click.capture="" 事件的捕获 由外向内
    -->
    <div class="menu" @click="pipeclick">
      <button @click.stop="pipeclick">冒泡</button>
    </div>
    <!--当前事件this 指针问题-->
    <button @click="getthis">事件里面的this</button>
    <!--事件的执行参数-->
    <button @click="getevent">事件里面的event</button>
    <!--事件的委托-->
    <ul @click="navmethod">
      <li>我是第1个</li>
      <li>我是第2个</li>
      <li>我是第3个</li>
    </ul>
    <!--修饰符self 目标dom绑定了dom才会触发-->
    <ul @click="fun">
      <li @click.self.stop="fun">我是里面的li</li>
    </ul>
    <!--事件的捕获 1231-->
    <div class="b1" @click="funmeth">
      <div class="b2" @click.stop="funmeth">
        <div class="b3" @click.stop="funmeth">
        </div>
      </div>
    </div>
    <!--once 只是执行一次-->
    <button @cilck.once="getchange">once</button>
    <!--$event-->
    <button @click="getfun($event)">事件的this</button>
    <!--事件里面的双向数据原则
    数据双向绑定指令 v-model="" 一般写在表单元素上
    -->
    <input type="text" @change="getData" v-model="username">
    <input type="text" @change="getData" :value="username"><!--这是一种单向数据绑定-->
    <!--里面通过ref属性获取dom 元素节点 获取的dom 元素是虚拟dom()
    虚拟dom 的作用 提高浏览器的性能
    真实的dom 操作dom 直接影响界面
    虚拟的dom 操作完成之后 一次性渲染-->
    <button @click="getDom">获取dom元素操作</button>
    <!--通过ref-->
    <div ref="refele"></div>
  </div>
  <!--数据-->
</template>
<script>
import $ from 'jquery';
//当前模板的js
//name指的是当前组件的名称
//data函数里面带返回值 指的是当前组件的数据源
export default {
  name: "app",
  data(){
    return {
      //写数据按照属性和值的方式去写
      msg:"我是vue中App组件",
      arr:[1,2,3,4],
      obj:{
        name:"张三",
        sex:"男"
      },
      title:"我是按钮",
      className:"addbtn",
      innerText:"我是文本",
      innerHtml:"<b>我是加粗的</b>",
      object:[
        {name:"张三1",
         sex:"男",
         age:20,
         hobby:['篮球','足球']
        }, 
        {name:"张三2",
         sex:"男",
         age:20,
         hobby:['篮球','足球']
        },
        {name:"张三3",
         sex:"男",
         age:20,
         hobby:['篮球','足球']
        }
      ],
      defaultstyle:"block",
      isadd:true,
      num:0,
      username:"maodou",
      sw:20,
      sh:20
    }
  },
  methods:{
    //事件调用的方法
    clickbtn(){
      console.log("点击我");
    },
    clickbtn2(){
      console.log("点击我2");
    },
    pipeclick(){
      console.log("冒泡");
    },
    getthis(){
      //事件里面的this指的是当前vue component里的组件
      console.log(this);
    },
    getevent(e){
      //事件里面的e event和之前js里面的event是一致的
      console.log(e);
      //下面两个指的是点击的目标元素
      console.log(e.target);
      console.log(e.srcelement);
    },
    navmethod(e){
      //事件的委托只有点到li上才能执行
      let node=e.target;
      if(node.nodename.toLowerCase()=="li"){
        console.log(node);
      }
    },
    fun(e){
      console.log(e.target);
    },
    funmeth(){
      ++this.num;
      console.log(this.num);
    },
    getchange(){
      console.log(1);
    },
    getfun(element){
      //$event替换当前的对象 这样指的是当前的按钮 直接写e参数currentTarget是没有参数的
      console.log(element.currentTarget);//this指向当前的组件
    },
    getData(){
      //输出mdel的变量值
      console.log(this.username);     
    },
    getDom(){
      //获取的dom this.$refs.名称
      let refs=this.$refs.refele;
      //返回的是原生js 的dom
      refs.innerHtml="<b>获取dom</b>"
      console.log("获取的dom"+refs);
      //vue 如何使用jquery代码
      //1安装jquery 代码 cnpm install jquery --save-dev 安装到配置文件的devdependencies
      //安装jquery --save 安装到devdependencies
      //哪个组件使用 给哪个组件使用
      console.log($(refs));
      $(refs).css({
        width:300,
        height:300,
        border:"1px solid red"
      });
    }
  }
}; //模板代码的js区域
</script>
<style>
/**写模板的css */
.block{
  width:100px;
  height:100px;
  border:soild 1px red;
}
.add{
  width:50px;
  height:50px;
}
.addcolor{
  background-color:red;
}
.changecolor{
  background-color:rosybrown;
}
.menu{
  width: 200px;
  height:200px;
  background-color: blue;
}
.b1{
  width:300px;
  height:300px;
  border:solid 1px red;
}
.b2{
  width:200px;
  height:200px;
  border:solid 1px green;
}
.b3{
  width:100px;
  height:100px;
  border:solid 1px yellow;
}
</style>