1、v-cloak：防止界面闪烁
获取变量值的指令：
插值表达式{{}}，可以在前后插入一些内容
v-text：会替换掉元素里的内容
v-html：可以渲染html界面
<style> [v-cloak] { display: none; } </style> </head> <body> <div id="box"> <div v-cloak>{{title}}</div> <div v-text='intro'>啦啦啦啦啦</div> <div v-html='center'>1234</div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm=new Vue({ el:'#box', data:{ title:'vue指令', intro:'v-text指令', center:'<h3>v-html指令</h3>' } })
2、v-bind：界面元素属性值的绑定
注意：1.括号里不加引号的都是我们data里的数据读取
2.如果想使用字符串需要加上引
3.里面可以写表达式
4.里面也可以调用定义好的方法，拿到的是方法的返回值
<div id="box"> <div v-bind:name='name'>标题</div> <input v-bind:type='type'> <input :type='type'> </div> <script> var vm=new Vue({ el:'#box', data:{ name:'标题', type:'text', } }) </script>
3、v-on：事件的绑定，简写@
<div id="box"> <h3>{{title}}</h3> <button v-on:click="click1 ('白胖胖',$event)">按钮1</button> <button @click="click2">按钮2</button> </div> <script> var vm = new Vue({ el: '#box', data: { title: '小企鹅', }, methods: { click1(title,e) { console.log(e); this.title = title; }, click2(e) { console.log(e); this.title = "圆滚滚"; } } }) </script>
4、v-model：数据双向绑定
注意：绑定的是表单控件
<div id="app"> <input type="text" v-model:value="value"> <button @click="click">按钮</button> </div> <script> var vm = new Vue({ el: '#app', data: { value: "数据双向绑定", }, methods: { click() { console.log(this.value); } } }) </script>