vue基本指令
1.{{}}插值语句，可以直接显示data中的数据
1 <template> 2 <div> 3 <a>{{num}}</a> 4 </div> 5 6 </template> 7 8 9 <script> 10 export default { 11 data() { 12 return{ 13 num: 1231456465465465465 14 } 15 }, 16 } 17 </script>
2.v-bind声明式渲染
语法糖： @
用法：v-bind: ***="data的数据对象名称"，缩写-> : ***="data的数据对象名称"
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。没有参数时，可以绑定到一个包含键值对的对象。
注意此时 class 和 style 绑定不支持数组和对象。
3.条件渲染：
1 <template> 2 <div> 3 <!-- 如果判定为真，执行当前标签的内容 --> 4 <div v-if = "isok==1"> 5 isok is 1! 6 </div> 7 <!-- 如果判断失败，判断v-else-if所在的标签，若真，执行 --> 8 <div v-else-if="isok==2"> 9 isok is 2! 10 </div> 11 <!-- 若假，执行v-else所在的标签 --> 12 <div v-else> 13 isok is not 1 and 2! 14 </div> 15 </div> 16 </template> 17 18 <script> 19 export default { 20 data(){ 21 return { 22 isok: 3, 23 } 24 } 25 } 26 </script>
4.v-on语法--语法糖@
用法： v-on: click="方法名"----缩写--> @click="方法名"
1 <template> 2 <div> 3 <router-view></router-view> 4 <button @click = "btn1">显示</button> 5 <button @click = "btn2">消失</button> 6 <div style="width: 20%;height:200px;border:1px black solid;background-color:red" v-if = "show"> 7 HI,GoodBoy 8 </div> 9 </div> 10 </template> 11 12 <script> 13 export default { 14 data() { 15 return{ 16 show: true, 17 } 18 }, 19 methods: { 20 btn1(){ 21 this.show = true 22 }, 23 24 btn2() { 25 this.show = false 26 } 27 } 28 29 } 30 </script>
5.v-show---控制是否显示
1 <template> 2 <div v-show="isShow" style="height:100px;weight:100px;background:yellow;border:1px solid black;color: red;"> 3 {{name2}} 4 </div> 5 </template> 6 ...... 7 export default{ 8 data(){ 9 return{ 10 isShow:true 11 } 12 } 13 }
6.v-if && v-show的区别
v-if: 通过控制dom节点的存在与否来控制显示或隐藏
v-show: 通过设置display元素来控制, block是默认显示，none是不显示。
7.v-html && v-text
前者可以正常显示html元素内容，但不可以触发事件，即假html
后者以字符串形式显示。
1 <template> 2 <div> 3 <p v-html="code" ></p> 4 <p v-text="code"></p> 5 </div> 6 </template> 7 ...... 8 export default { 9 data(){ 10 return{ 11 // code: '<button @click="btn">按钮</button>' 12 code: '<p>hello</p>' 13 } 14 },
8.v-for
注：遍历数组时，for中可存放两个自变量（值，下标）
遍历对象时，可存放三个（值，键，下标）
1 <template> 2 <div> 3 <ul> 4 <li v-for="value,key in object"> 5 {{key}}:{{value}} 6 </li> 7 </ul> 8 </div> 9 </template> 10 11 <script> 12 export default { 13 data() { 14 return { 15 object: { 16 Myname: 'coderwchh', 17 Myage: 10, 18 } 19 } 20 } 21 } 22 </script> 23 24 <style> 25 div { 26 font-size: 15px; 27 } 28 </style>
