Vue
v-text
:设置标签的内容(textContent)
<div id="app">
<h2 v-text="message"></h2>
//默认写法会替换全部内容。
<h1>北京{{message}}</h1>
差值表达式{{}}可以替换指定内容。
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"你好!"
}
})
</script>
<div id="app">
<p v-html="content"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='http://www.baidu.com'>百度</a>"
}
})
</script>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt()" /> //事件名不需要写On
<input type="button" value="v-on简写" @click="doIt()" /> //指令可以简写为@
<h2 @click="changeFood()">{{ food }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: "#app",
data:{
food:"西红柿炒蛋"
},
methods: { //绑定的方法定义在methods属性中
doIt: function() {
alert("做It");
},
changeFood:function(){
this.food+="好好吃!" //方法内部通过 this 关键字可以访问定义在 data 中数据
}
},
})
</script>
- 原理是修改元素的display,实现显示隐藏
- 指令后面的内容,最终会被解释为布尔值
- 值为true元素显示 值为false元素隐藏
- 数据改变之后,对应元素的显示状态会同步更新
<div id="app">
<input type="button" value="切换事件 " @click="changIsShow()" />
<img v-show="isShow" src="./img/1.png" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vuse"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:true,
},
methods:{
changIsShow:function(){
this.isShow = !this.isShow;
},
})
</script>
- 本质是通过操纵dom元素来切换显示状态
- 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
- 频繁的切换用v-show(操纵样式)反之使用v-if (操纵dom树)前者的切换消耗小
<div id="app">
<input type="button" value="切换属性" @click="toggleIsShow()" />
<p v-if="isShow">我是一个P标签</p>
<h2 v-if="aaa>35">热</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
aaa:30
},
methods:{
toggleIsShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
- 完整的写法是 v-bild:属性名
- 简写的话可以直接省略v-bild 只保留 :属性名
<style>
.active{
border: 1px solid red;
}
</style>
<div id="app">
<img v-bind:src="imgSrc" />
<img :src="imgSrc" :title="imgTitle+'!!'":class="{active:isActive}" @click="isActive()"/>
// 对象方法{active:isActive} active是否生效取决于isActive的值
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"图片链接",
imgTitle:"你好",
isActive:false
},
methods:{
toggleisActive:function(){
this.isActive = !this.isActive
}
}
})
</script>
- 数组经常和v-for结合使用
- 语法是 (item,index)in 数据 // (个别数据 ,索引) in 数据
- item 和 index 可以结合其他指令一起使用
- 数组长度的更新会同步到页面上 是响应式的
v-on
事件绑定的方法可以写成函数形式,可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上**.修饰符**可以对事件进行限制
- .enter可以限制触发的按键为回车
- 事件修饰符有多种
- 绑定的数据会和表单元素值相关联
- 绑定的数据**<— —>**表单元素的值(相互的)