Vue中操作dom的方法
1、 this.$refs.* 拿到虚拟Dom,可以进行真实dom的一切操作1）在标签中添加ref="*"2）在方法中用this.$refs.*拿到这个元素，跟document.getElementById('*')一样。 2、自定义指令中，el就是当前环境下的Dom元素 el.style.color = "yellow"; console.log(el
1、 this.$refs.* 拿到虚拟Dom,可以进行真实dom的一切操作
1）在标签中添加ref="*"
2）在方法中用this.$refs.*拿到这个元素，跟document.getElementById('*')一样。
2、自定义指令中，el就是当前环境下的Dom元素
el.style.color = "yellow";
console.log(el.tagName);//均可执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义指令</title>
<script src="js/vue.js" type="text/javascript"></script>
<style type="text/css">
.app{
width:300px;
height: 300px;
border: 1px solid #00ff00;
}
/* .app .child{
position: relative;
top:320px;
width:330px;
height: 300px;
border: 2px solid red;
}*/
</style>
</head>
<body>
<div class="app">
<div v-color="colors[1].color1" name="tc">oooooo</div>
<my-card v-bind:obj="colors" name="zy">
<!-- <div class="child" v-demo:foo.a.b="color2">lalala</div> -->
</my-card>
</div>
<script>
/*钩子函数：
bind、inserted、update、componentUpdated、unbind
钩子函数的参数：
el、binding、vnode、oldVnode
*/
Vue.directive('color', function (el, binding) {
console.log("%%%%拿到当前域的真实dom%%%%");
console.log(el);
el.style.color = "yellow";
console.log(el.tagName);
console.log("%%%%查看自定义指令v-color本身的一些属性%%%%");
el.style.backgroundColor = binding.value;
console.log(binding.name+","+binding.value+","+binding.expression+","+binding.arg);
})
Vue.component("my-card",{
template:'<div ref="card" v-on:click="toclick" v-color="obj[0].color0">12345678</div>',
props:['obj'],
methods:{
toclick: function(){
console.log("%%%%拿到props数据%%%%%");
console.log(this.obj[0].color0);
console.log("%%%%拿到虚拟dom%%%%");
console.log(this.$refs.card);
console.log("%%%%拿到非prop传入的name的属性值%%%%%");
console.log(this.$refs.card.getAttribute('name'));
}
}
})
// Vue.directive('demo',{
// bind: function(el,binding,vnode){
// el.innerHTML =
// 'name: ' + binding.name + '<br/>' +
// 'value: ' + binding.value + '<br/>' +
// 'expression: ' + binding.expression + '<br/>' +
// 'arg: ' + binding.arg + '<br/>' +
// 'modifiers: ' + binding.modifiers + '<br/>' +
// 'vnode keys: ' + Object.keys(vnode).join(', ');
// console.log("原来的vnode");
// console.log(vnode);
// },
// update: function(el,binding,vnode){
// el.style.backgroundColor = binding.value;
// console.log("更新的vnode"+vnode);
// console.log("背景色："+binding.value);
// }
// })
new Vue({
el: ".app",
data: {
colors:[
{color0:'#0000ff'},
{color1:'#00ff00'}
]
}
})
</script>
</body>
</html>
3、使用vue点击li，获取当前点击li父辈元素的属性值
<div class="content">
<!-- change方法, 数值改变触发 -->
<select v-on:change="getData()" name="" id="dataSelect">
<option value="" v-bind:name="index" v-for="(value, index) in items">{{value.date}}</option>
</select>
<!-- 为name属性添加当前索引值 -->
<ul v-on:click="toFlow($event)" v-bind:name="i" class="flowData" v-for="(flow, i) in flows">
<li class="li1">
{{flow.name.fullName}}<br>
{{flow.name.time}}
</li>
<li class="li2">
{{flow.val1}}
</li>
<li class="li3">
{{flow.val2}}
</li>
<li class="li4">
{{flow.val3}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
user: {},
items: [],
flows: []
},
methods: {
// 根据option数值替换数据
getData: function() {
var optionIndex = $('#dataSelect option:selected').attr("name"); //选中的值
vm.flows = vm.items[optionIndex].flowsMonth;
},
toFlow: function(event) {
// 点击li获取当前li父辈ul的name属性值
var flowIndex = event.target.parentNode.getAttribute("name");
var flow = (vm.flows[flowIndex]);
$.ajax({
url: 'php/test.php',
type: 'POST',
dataType: "json",
data: {
flow: flow
},
success: function(data) {
console.log(data);
}
})
}
}
})
$(function(){
$.ajax({
url: 'json/items.json',
type: 'GET',
dataType: "json",
success: function(data) {
vm.user = data.user;
vm.items = data.flows;
// 初始数据
vm.flows = vm.items[0].flowsMonth;
}
})
})
</script>
{
"flows": [
{
"date": "2017年5月",
"flowsMonth": [
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "200",
"val2": "1.3",
"val3": "2300"
},
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "1",
"val2": "2",
"val3": "3"
},
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "1",
"val2": "2",
"val3": "3"
}
]
},
{
"date": "2017年6月",
"flowsMonth": [
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "200",
"val2": "1.3",
"val3": "2300"
},
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "1",
"val2": "22",
"val3": "33"
},
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "12",
"val2": "32",
"val3": "13"
}
]
}
,
{
"date": "2017年8月",
"flowsMonth": [
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "200",
"val2": "1.3",
"val3": "2300"
},
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "61",
"val2": "542",
"val3": "63"
},
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "51",
"val2": "22",
"val3": "34"
}
]
}
]
}
- vue怎么点击获取当前元素
vue中有两种方法获取到当前元素
var el = event.target; //当前元素，可修改（能够用此方法获取到他的子元素，不能获取他本身的内容）
var el = event.currentTarget;//当前元素，不可修改（能够用此方法获取到他的子元素及能获取他本身的内容）
<div id="example-2"> <!-- `onsomething` 是在下面定义的方法名 --> <button v-on:click='onsomething'>复杂的click<span>哈哈</span></button> </div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
onsomething:function(event){ // `event` 是原生 DOM 事件
alert('hello' + this.name +'!' ); // `this` 在方法里指向当前 Vue 实例
var el = event.currentTarget;//复杂的click哈哈
//var el = event.target;//哈哈
alert(el.innerText);
}
}
})
// 也可以用 JavaScript 直接调用方法
//example2.greet() // => 'Hello Vue.js!'
---------------------
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献8条内容
所有评论(0)