vue的指令
- 1.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:"这是一个变量!", }, }）
效果图
- 2.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:'<b>bbbb</b>', }, }) </script>
效果图
- 3.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>
效果图
- 4.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>
效果图
- 5.v-show 可以控制css来显示隐藏dom元素
<div id="app"> <div v-show="bool">v-show</div> </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>
效果图
- 6.v-else 必须和v-if同级且相邻
v-else是需要和v-if搭配使用的
<div id="app"> <div v-if="bool">if</div> <div v-else>else</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: {// 数据(变量) bool:true, }, }) </script>
效果图
当bool=true时
当bool=false时
- 7.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>
效果图
- 8.v-on 或 @ 绑定事件
v-on可以缩写成为@
所以v-on有两种绑定方式
<!-- 第一种--> <div id="app"> <button type="button" v-on:click="on">on</button> </div> <!-- 第二种--> <div id="app"> <button type="button" @click="on()">on</button> </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>
效果图
- 9.v-bind 或 : 绑定属性
v-bind可以缩写成为：
所以v-bind有两种语法格式
<style type="text/css"> .b{ color: aqua; } </style>
<-- 第一种--> <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 – 事件
