vue基础指令和基础属性
vue的指令
- v-text 或 {{}} 输出字符串（ {{}} 还可以做算术题）
语法格式：
<div id="app">
<div v-text="text">div>
<div>{{html}}div>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({// 声明vue实例
el: '#app',//选择作用域
data: {// 数据(变量)
text:"这是一个变量!",
},
}）
效果图
- v-html 不仅可以输出字符串，还可以输出标签。
语法格式：
<div id="app">
<div v-html="html">div>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({// 声明vue实例
el: '#app',//选择作用域
data: {// 数据(变量)
html:'bbbb',
},
})
</script>
效果图
- v-model 双向数据绑定,必须,只能是表单里面的标签，一般是input
<div id="app">
<input type="" name="" id="" value="" v-model="model" />
<div v-text="model">
div>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({// 声明vue实例
el: '#app',//选择作用域
data: {// 数据(变量)
model:0,
},
})
</script>
效果图
- v-if 判断 删除dom
<div id="app">
<div v-if="bool">4. v-if 判断div>
div>
v-if="" 引号里面，也可以写判断，只要最后得出来的值是布尔值就可以了
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({// 声明vue实例
el: '#app',//选择作用域
data: {// 数据(变量)
bool:true,
},
})
</script>
效果图
- v-show 可以控制css来显示隐藏dom元素
<div id="app">
<div v-show="bool">v-showdiv>
div>
v-show="" 和v-if一样 引号里面可以写判断，只要最后的值是布尔值就可以了
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({// 声明vue实例
el: '#app',//选择作用域
data: {// 数据(变量)
bool:true,
},
})
</script>
效果图
- v-else 必须和v-if同级且相邻
v-else是需要和v-if搭配使用的
<div id="app">
<div v-if="bool">ifdiv>
<div v-else>elsediv>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({// 声明vue实例
el: '#app',//选择作用域
data: {// 数据(变量)
bool:true,
},
})
</script>
效果图
当bool=true时
当bool=false时
- v-for 循环
<div id="app">
<div v-for="item in arr">{{item}}div>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({// 声明vue实例
el: '#app',//选择作用域
data: {// 数据(变量)
arr:[12,22,34],
},
})
</script>
效果图
- v-on 或 @ 绑定事件
v-on可以缩写成为@
所以v-on有两种绑定方式
<div id="app">
<button type="button" v-on:click="on">onbutton>
div>
<div id="app">
<button type="button" @click="on()">onbutton>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({// 声明vue实例
el: '#app',//选择作用域
methods:{
on(){
alert('sac');
},
}
})
</script>
效果图
- v-bind 或 : 绑定属性
v-bind可以缩写成为：
所以v-bind有两种语法格式
<-- 第一种-->
<div id="app">
<div v-bind:class="cla">安师大div>
div>
<-- 第二种-->
<div id="app">
<div :class="cla">安师大div>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({// 声明vue实例
el: '#app',//选择作用域
data: {// 数据(变量)
cla:'b',
},
})
</script>
效果图
课外小扩展
在上面我们只使用了3个属性
第一个 el – 选择元素,作用域
第二个 data – 数据,变量
第三个 methods – 事件