<!--模板标签-->
<!--当前模板的页面 一个模板里面只能有一个子容器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 的domrefs.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>