vue基本命令
<html> <head> <style> [v-cloak] { /* display: none; */ } </style> </head> <body> <div id="app"> <!--v-cloak解决插入表达式闪烁问题,加载完成后在显示--> <p v-cloak>+++{{msg}}</p> <!-- v-text: 1.默认v-text无闪烁问题 2.v-text会覆盖元素中原本的内容 --> <h4 v-text="msg">--</h4> <!--v-html直接渲染html元素--> <div v-html="msg2"></div> <!-- v-bing:是vue中提供的用于绑定属性的执行, v-bing:可以使用js表达式, v-bing可以被简写为: --> <input type="button" value="button" :title="myTitle + '222'" /> <!--v-on:事件绑定机制,可以绑定页面事件,缩写@--> <input type="button" value="button" :title="myTitle + '222'" v-on:click="show" @mouseover="show" /> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> let vm = new Vue({ el: '#app', data: { msg: '123', msg2: '<h1>dsadsads</h1>', myTitle: 'title' }, methods: {//定义所有可用的方法 show: function () { alert('hello') } } }) </script> </body> </html>
<!-- 使用.stop修饰符阻止事件冒泡,阻止所有事件冒泡 --> <div class="inner" @click="divHandler"> <input type="button" value="戳他" @click.stop="btnHandler" /> </div> <!--使用.prevent阻止默认行为--> <a href="https://baidu.com" @click.prevent="lickClick">百度</a> <!--使用.carpure实现捕获触发事件机制(从外向里执行)--> <div class="inner" @click.capture="divHandler"> <input type="button" value="戳他" @click="btnHandler" /> </div> <!--使用.self实现只有点击当前元素才会触发事件处理, .self只会阻止自己身上事件的冒泡,不会阻止其他冒泡 --> <div class="inner" @click.self="divHandler"> <input type="button" value="戳他" @click="btnHandler" /> </div> <!--使用.once实现只触发一次事件--> <a href="https://baidu.com" @click.once.prevent="lickClick">百度</a>
<html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <h4>{{msg}}</h4> <!--v-bing只能实现数据的单向绑定--> <!-- <input type="text" :value="msg" /> --> <!--使用v-model实现双向数据绑定,v-model只能运用在表单元素--> <input type="text" v-model="msg" /> </div> <script> let vm = new Vue({ el: "#app", data: { msg: '大家都是好学生' }, methods: {} }) </script> </body> </html>
<!--绑定class--> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style> .red{ color: red } .thin{ font-weight: 200; } .italic{ font-style:initial; } .active{ letter-spacing: 0.5em; } </style> </head> <body> <div id="app"> <!-- 样式绑定分为四种方式: 1.使用数组。 2.使用三元表达式。 3.使用对象。 4.直接在data中定义对象。 --> <!--传递数组,使用v-bing绑定--> <h1 :class="['thin','red','italic']">这是一个很大的h1</h1> <!--使用三元表达式绑定--> <h1 :class="['thin','red','italic',flag?'active':'']">这是一个很大的h1</h1> <!--在数组中使用对象来代替三元表达式--> <h1 :class="['thin','red','italic',{'active':flag}]">这是一个很大的h1</h1> <!--在为class使用v-bing绑定对象--> <h1 :class="classObj">这是一个很大的h1</h1> </div> <script> let vm=new Vue({ el:'#app', data:{ flag:true, //定义样式 classObj:{red:true,thin:true} }, methods:{} }) </script> </body> </html> <!--绑定style--> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <!-- 使用内联样式绑定三种方式: 1.直接通过v-bing设置对象。 2.直接在data中定义对象。 3.使用数组绑定对个对象。 --> <!--直接通过v-bing设置对象--> <h1 :style="{color:'red','font-weight':'200'}">这是一个h1</h1> <!--直接在data中定义对象--> <h1 :style="styleObj1">这是一个h1</h1> <!--使用数组绑定多个对象--> <h1 :style="[styleObj1,styleObj2]">这是一个h1</h1> </div> <script> let vm = new Vue({ el: '#app', data: { styleObj1: { color: 'red' }, styleObj2: { 'font-weight': '200' } }, methods: {} }) </script> </body> </html>
<html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <!--v-for循环指令--> <div id="app"> <!--v-for循环,参数为:值、索引--> <p v-for="(item,index) in list"> id:{{item.id}}-name:{{item.name}}-index:{{index}} </p> <!--v-for循环遍历对象,第一个参数value,第二个参数key,第三个参数index--> <p v-for="(value,key,index) in user"> value:{{value}}-key:{{key}}-index:{{index}} </p> <!--v-for迭代数字,v-for循环数字从1开始--> <p v-for="count in 10">{{count}}</p> </div> <script> let vm = new Vue({ el: '#app', data: { user: { id: 1, name: 'a', age: 20, gender: '男' }, list: [ { id: 1, name: 'a' }, { id: 2, name: 'b' } ] }, methods: {} }) </script> </body> </html> <!--v-for循环必须设置key--> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <!--v-for循环必须设置key--> <div id="app"> <div> <label>id: <input type="text" v-model="id" /> </label> <label> name: <input type="text" v-model="name"/> </label> <input type="button" value="添加" @click="add" /> </div> <!--在组件中使用v-for循环时需要指定key--> <p v-for="item in list" :key="item.id"> <input type="checkbox" /> {{item.id}}-{{item.name}} </p> </div> <script> let vm = new Vue({ el: '#app', data: { id: '', name: '', list: [ { id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' } ] }, methods: { add() { this.list.unshift({ id: this.id, name: this.name }) } } }) </script> </body> </html>
<html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <input type="button" value="toggle" @click="flag = !flag" /> <!--v-if每次都会删除或创建元素--> <h3 v-if="flag">v-if</h3> <!--v-show不会进行dom的删除操作,只会切换元素的display属性--> <h3 v-show="flag">v-show</h3> </div> <script> let vm = new Vue({ el: '#app', data: { flag: true }, methods: { } }) </script> </body> </html>