vue项目中,在script中如何获取标签

发布网友发布时间：2022-04-23 20:07

共1个回答

热心网友时间：2022-04-12 01:02

1、使用Script标签引入vue的方法

<script src="https://unpkg.com/vue/dist/vue.js"></script>
1
1
也可以将vue.js文件下载至项目目录。调试环境建议用vue.js，生产环境建议用vue.min.js
2、组件必须有一个顶级容器，Vue的功能必须要在这此容器内。

<div id="myApp">
...
</div>
1
2
3
1
2
3
3、vue组件的创建。vue组件代码可以在当前html中的script标签中，也可单独存放到一个.js文件中，在html中用script标签来引用。

<script>
var comName=new Vue({
el:"#myApp,
data:{
json格式的数据，如
msg:"abc"
},
其他操作……
})
</script>
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
4、容器标签内容数据的绑定（声明式渲染）

<div id="myApp">
<p>{{msg}}</p>
</div>

1
2
3
4
1
2
3
4
5、容器标签属性数据的绑定（属性值渲染）

<div id="myApp">
<p v-bind:title="msg"></p>
</div>
1
2
3
1
2
3
其中，v-bind: 可简写为 :
6、表单标签值的双向绑定（双向数据绑定）

<div id="myApp">
<input v-model="msg"></p>
</div>
1
2
3
1
2
3
7、条件，常用于不同视图之间的切换

<template>
<div v-if="msg == 'abc'">
A
</div>
<div v-else>
、HTML DOM querySelector() 方法

　　按照以前jq方式， CSS 选择器来获取元素标签 [在mounted方法里面执行]

　　document.querySelector获取的是被选中元素的第一个元素；

　　document.querySelectorAll获取到所有被选中元素；

　　eg：document.querySelector("#demo");

　　　　document.querySelector(".demo");

　　　　document.querySelector("p");

　　　　document.querySelector("a, p")

　　　　document.querySelector("p.demo");

　　　　document.querySelector("a[target]");

2、vue的ref和$refs方法

　　ref是写在html里面的，相当于标签的索引，$refs 是所有注册过的ref的一个集合，然后通过$refs找到对应的ref，然后进行操作。

　　ref在dom标签上，则$refs是dom标签；ref在组件上，则$refs是子组件实例；

　　相同的ref时，到底取得哪一个时问题，所以ref优先级也是比较重要：

　　1、同一层级有相同的ref，最终通过$refs取得后面的元素（后>前）；

　　2、嵌套层级（父子关系）的标签，最终通过$refs取得父亲元素（父>子）；

　　使用方式：以下举例说明：

　　a、单纯获取当前组件的元素

　　　　<p ref="test" id="demo">你好</p>

　　　　在js里面用this.$refs.test就可以获取到p标签

　　　　等同于：document.getElementById('demo')，但是$refs会减少获取dom节点的消耗

　　b、当获取的元素的ref是变量

　　　　<p :ref="test">你好</p>

　　　　在js里面用this.$refs[this.test]就可以获取到p标签