Vue(el、data、指令)
程序员文章站
2022-07-04 20:05:24
...
Vueday1
文档传送门
https://cn.vuejs.org
el:挂载点
Vue实例的作用范围:
- Vue会管理el选项命中的元素及其内部的后代元素。
- 可以使用其他的选择器，但是建议使用ID选择器。
是否可以设置其他的DOM元素
- 可以使用其他的双标签，不能使用html和body。
- el是用来设置Vue实例挂载(管理)的元素
data：数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时，遵守js的语法即可
<body>
<div id="app">
{{ message }}
<p>
{{ school.phone }}
</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue",
school:{
name:"lsq",
phone:"10086",
}
}
})
</script>
</body>
Vue指令
v-text
-
v-text指令的作用:设置标签的文本值(textContent)
-
默认写法会替换全部内容，使用==差值表达式{{}}==可以替换指定内容
-
内部支持写表达式
<body>
<div id="app">
<h2 v-text="message">嘻嘻</h2>
<h2>{{ message }}嘻嘻</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue"
}
})
</script>
</body>
效果:
v-html
-
指令作用：设置标签的innerHTML
-
内容中有html结构会被解析为标签
-
v-text指令无论什么内容只会解析为文本
-
解析文本使用v-text，需要解析html结构使用v-html
v-on
- 指令作用:为元素绑定事件
- 事件名不用写on
- 指令可以简写为[email protected]==
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt()" />
<input type="button" value="v-on简写" @click="doIt()" />
<input type="button" value="v-on双击" @dblclick="doIt()" />
<h2 @click="conCat()">{{ message }}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello"
},
methods:{
doIt:function(){
alert('Hello');
},
conCat:function(){
this.message += " World";
}
}
})
</script>
</body>
上一篇： JavaFX窗体设置无边框