基本指令
数据展示
<body> <div id="app"> <h1>{{msg}}</h1> <p>{{message}}</p> </div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 const vm = new Vue({ el: '#app', data: { message: 'Hello, haha', msg: 'hhhhhh' } });</script></body>v-model
<body> <div id="app"> <h1>{{msg}}</h1> <input type="text" v-model="msg"> </div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { msg: 'hhhhhh' } });</script></body>- v-once
v-if
<body><div id="app"> <p v-if="show">出现!</p> <p v-if="hide">不出现!</p> <p v-if="height > 1.5">你的身高:{{height}}</p> <p v-if="0">hhhh</p></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { show: true, hide: false, height: 1.58 } });</script></body>v-show
<body><div id="app"> <p v-show="show">出现!</p> <p v-show="hide">不出现!</p> <p v-show="height > 1.5">小明的身高:{{height}}</p> <p v-show="0">hhhh</p></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { show: true, hide: false, height: 1.58 } });</script></body>v-else
<body><div id="app"> <div v-if="num > 0.5"> {{num}},大于0.5 </div> <div v-else> {{num}},小于0.5 </div></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { num: Math.random() } });</script></body>v-else-if
<body><div id="app"> <p>输入的成绩对应的等级:</p> <input type="text" v-model="score"> <div> <p v-if="score >= 90">优秀</p> <p v-else-if="score >= 80">良好</p> <p v-else-if="score >= 60">及格</p> <p v-else>不及格</p> </div></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { score: 90 // 优秀 良好 及格 不及格 } });</script></body>v-for
<body><div id="app"> <p v-for="(score, index) in scores"> 索引: {{index }} , 分数: {{score}} </p> <div v-for="(d, key) in dog"> {{key + ':' + d}} </div> <span v-for="count in 100">{{count}}</span> <p v-for="(p, index) in phone"> {{p}} </p></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { scores: [100, 90, 70, 60, 5], dog: {name: 'haha', age: 2, width: 1.44, weight: '100斤'}, phone: '11111111111', str: 'ww' } });</script></body><body><div id="app"> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr v-for="(p, index) in persons"> <td>{{p.name}}</td> <td>{{p.age}}</td> <td>{{p.sex}}</td> </tr> </tbody> </table></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { persons: [ {name: '张三', age: 18, sex: '男'}, {name: '李四', age: 28, sex: '女'}, {name: '张三', age: 18, sex: '男'}, {name: '王五', age: 38, sex: '女'} ] } });</script></body>v-text+v-html
<body><div id="app"> <p>{{msg}}哈哈哈哈</p> <p>{{html}}</p> <p v-text="msg">呵呵呵呵</p> <div v-html="html"> 哈哈哈 <input type="color"> </div></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { msg: '撩课学院', html: '<input type="date"><input type="color">' } });</script></body>v-bind
<body><div id="app"> <img v-bind:src="imgSrc" v-bind:alt="alt"> <img :src="imgSrc1" :alt="alt"></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { imgSrc: 'img/img_01.jpg', imgSrc1: 'img/img_02.jpg', alt: '哈哈哈' } });</script></body>v-on
<body><div id="app"> <p>{{msg}}</p> <button v-on:click="msg = '哈哈哈哈哈'">改变内容</button> <button @click="msg = '啦啦啦啦啦'">改变内容</button> <button @click="changeContent()">改变内容</button></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { msg: '有点累' }, methods: { changeContent() { this.msg = '感冒真是太难受了'; } } });</script></body>class
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .box1{ width: 300px; height: 40px; border: 1px solid orange; } .box2{ font-size: 30px; } .box3{ background-color: deepskyblue; } </style></head><body><!--class 1. 直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定; 2. 在数组中使用表达式; 3. 在数组中使用 对象来代替三元表达式，提高代码的可读性;
代码演示 --> <div id="app"> <p class="box1 box2">众里寻他千百度...</p> <p :class="['box1', 'box2']">众里寻他千百度...</p> <p :class="['box1', 'box2', isShow ? 'box3': '']">众里寻他千百度...</p> <p :class="[{'box1': isShow}]">众里寻他千百度...</p> <p :class="classObj">众里寻他千百度...</p> </div> <script src="js/vue.js"></script> <script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { isShow: true, classObj: {'box1': false, 'box2': false, 'box3': true} } }); </script> </body> </html> ``` 13. style```html<body><!--style 1. 直接在元素上通过 `:style` 的形式，书写样式对象 2. 将样式对象，定义到 `data` 中，并直接引用到 `:style` 中 3. 在 `:style` 中通过数组，引用多个 `data` 上的样式对象--><div id="app"> <p style="font-size: 18px; background-color: red;">众里寻他千百度...</p> <p :style="style1">众里寻他千百度...</p> <p :style="[style1, style2]">众里寻他千百度...</p></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { style1: {color: 'green', fontSize: '40px'}, style2: {fontStyle: 'italic'} } });</script></body>```## 修饰符1. v-model (1) 、.lazy 在默认情况下，`v-model` 在每次 `input` 事件触发后将输入框的值与数据进行同步。使用`lazy` 修饰符，转变为使用 `change`事件进行同步。 <!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" > (2)、.number 该修饰符用来将输入内容自动转换成数值。 <input v-model.number="age" type="number"> (3)、.trim 过滤用户输入的首尾空白字符。 <input v-model.trim="msg">2. v-on - `.stop` - `.prevent` - `.capture` - `.self` - `.once` - `.passive` ```html <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> ```3. 键值修饰符 - `.enter` - `.tab` - `.delete` (捕获“删除”和“退格”键) - `.esc` - `.space` - `.up` - `.down` - `.left` - `.right`## 过滤器```html<body><div id="app"> <p>{{money}}</p> <p>{{money | moneyFormat(money)}}</p></div><div id="app1"> <p>{{money}}</p> <p>{{money | moneyFormat(money)}}</p></div><script src="js/vue.js"></script><script> // 0. 定义全局过滤器 Vue.filter('moneyFormat', (money)=>{ return '¥' + money.toFixed(2) ; }); // 1. 创建Vue的实例 new Vue({ el: '#app', data: { money: 189323323222.9892 }, filters: { // 局部过滤器 moneyFormat(money){ return '$' + money.toFixed(2) ; } } }); new Vue({ el: '#app1', data: { money: 4567821.9892 } });</script></body>```计算属性
<body><div id="app"> <p>初始值: {{name}}</p> <p>翻转: {{name.split('').reverse().join('')}}</p> <p>方法: {{reverseStr()}}</p> <p>计算属性: {{reverse}}</p></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { name: 'Rose Jack' }, methods:{ reverseStr(){ return this.name.split('').reverse().join('') } }, computed: { // 计算选项 reverse: { get() { return this.name.split('').reverse().join(''); } } } });</script></body>setter
<body><div id="app"> <p>{{fullName}}</p> <button @click="deal()">调用计算属性中的setter方法</button></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { firstName: 'zhang', lastName: 'xing' }, methods:{ deal(){ this.fullName = 'wang cai'; } }, computed: { // 计算选项 fullName: { get(){ return this.firstName + ' ' + this.lastName; }, set(str){ let nameArr = str.split(' '); this.firstName = nameArr[0]; this.lastName = nameArr[1]; } } } });</script></body>生命周期
<body><div id="app"></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', beforeCreate(){ console.log('beforeCreate()'); }, data: { }, methods: { }, created(){ console.log('created()'); }, beforeMount(){ console.log('beforeMount()'); }, mounted(){ // 结束创建期间的生命周期函数 console.log('mounted()'); }, beforeUpdate(){ console.log(beforeUpdate()); }, updated(){ console.log(updated()); }, beforeDestroy(){ console.log(beforeDestroy()); }, destroyed(){ console.log(destroyed()); } });</script></body>组件
全局组件
一、<body><div id="app"> <my-date></my-date> <my-date></my-date></div><div id="app1"> <my-date></my-date> <my-date></my-date></div><script src="js/vue.js"></script><script> // 1. 组件构造器 let Profile = Vue.extend({ // 模板选项 template: ` <div> <input type="date"> <p>今天下雪了!</p> </div> ` }); // 2. 注册全局组件 Vue.component('my-date', Profile); // 1. 创建Vue的实例 new Vue({ el: '#app', data: { msg: '撩课学院' } }); new Vue({ el: '#app1' })</script></body>二、<body><div id="app"> <my-date></my-date> <my-date></my-date></div><div id="app1"> <my-date></my-date></div><script src="js/vue.js"></script><script> // 0. 注册全局组件 Vue.component('my-date', { template: ` <div> <input type="date"> <p>今天下雪了!</p> </div> ` }); // 1. 创建Vue的实例 new Vue({ el: '#app', data: { msg: '撩课学院' } }); new Vue({ el: '#app1', });</script></body>局部组件
<body><div id="app"> <my-date></my-date></div><div id="app1"> <my-color></my-color> <my-color></my-color></div><script src="js/vue.js"></script><script> // 1. 组件构造器 let Profile = Vue.extend({ // 模板选项 template: ` <div> <input type="date"> <p>今天下雪了!</p> </div> ` }); let Profile1 = Vue.extend({ // 模板选项 template: ` <div> <input type="color"> <p>我是色板!</p> </div> ` }); // 1. 创建Vue的实例 new Vue({ el: '#app', data: { msg: '撩课学院' }, components: { 'my-date': Profile } }); new Vue({ el: '#app1', components: { 'my-color': Profile1 } })</script></body>二、<body><div id="app"> <my-date></my-date> <my-color></my-color></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { msg: '撩课学院' }, components: { 'my-date': { template: ` <div> <input type="date"> <p>今天下雪了!</p> </div> ` }, 'my-color': { template: ` <div> <input type="color"> <p>我是色板!</p> </div> ` }, } });</script></body>父子组件
<body><div id="app"> <parent></parent> <child></child></div><script src="js/vue.js"></script><script> // 1. 子组件构造器 let Child1 = Vue.extend({ template: `<img src="img/img_01.jpg" width="200">` }); Vue.component('child', Child1); let Child2 = Vue.extend({ template: `<h4>我认为自己很美!</h4>` }); // 2. 父组件构造器 Vue.component('parent', { components: { 'my-child1': Child1, 'my-child2': Child2, }, template: ` <div> <h1>这是高手!</h1> <my-child1></my-child1> <my-child2></my-child2> </div> ` }); // 1. 创建Vue的实例 new Vue({ el: '#app', data: { msg: '撩课学院' } });</script></body>template
<body><div id="app"> <lk_div></lk_div></div><template id="lk_div"> <div> <h1>哈哈哈哈</h1> <input type="date"> <img src="img/img_02.jpg" alt="" width="200"> </div></template><script src="js/vue.js"></script><script> Vue.component('lk_div', { template: '#lk_div' }); // 1. 创建Vue的实例 new Vue({ el: '#app', data: { msg: '撩课学院' } });</script></body>数据传递 data
<body><div id="app"> <lk-div></lk-div></div><template id="lk_div"> <div> <h1>{{msg}}</h1> <input type="date"> <img src="img/img_02.jpg" alt="" width="200"> </div></template><script src="js/vue.js"></script><script> Vue.component('lk-div', { template: '#lk_div', /* data:{ msg: '我是MT' }*/ data(){ return { msg: '我是MT' } } }); // 1. 创建Vue的实例 new Vue({ el: '#app', data: { } });</script></body>data属性为什么是函数的形式？
这样每一个实例的data属性都是独立的，不会相互影响了。
<body><div id="app"> <my-btn></my-btn> <my-btn></my-btn> <my-btn></my-btn> <my-btn></my-btn> <my-btn></my-btn> <my-btn></my-btn> <my-btn></my-btn></div><template id="my_btn"> <button @click="counter += 1">点击的次数: {{counter}}</button></template><script src="js/vue.js"></script><script> let data = { counter: 0 }; Vue.component('my-btn', { template: '#my_btn', data(){ return { counter: 0 } } }); // 1. 创建Vue的实例 new Vue({ el: '#app' });</script></body>组件通信
<body><div id="app"> <my-div msg="今天下雪了" imgsrc="img/img_02.jpg"></my-div></div><template id="my_div"> <div> <h1>{{msg}}</h1> <img :src="imgsrc" alt="" width="200"> </div></template><script src="js/vue.js"></script><script> // 0. 创建组件 Vue.component('my-div', { template: '#my_div', props: ['msg', 'imgsrc'] }); // 1. 创建Vue的实例 new Vue({ el: '#app', data: { msg: '撩课学院' } });</script></body>// 多层通信<body><div id="app"> <my-parent :imgtitle="title" :imgsrc="img"></my-parent></div><template id="my_img"> <img :src="imgsrc" width="200"></template><template id="my_title"> <h2>{{title}}</h2></template><template id="my_parent"> <div> <child1 :imgsrc="imgsrc"></child1> <child2 :title="imgtitle"></child2> </div></template><script src="js/vue.js"></script><script> // 0. 子组件的实例 let Child1 = Vue.extend({ template: '#my_img', props: ['imgsrc'] }); let Child2 = Vue.extend({ template: '#my_title', props: ['title'] }); // 父组件 Vue.component('my-parent', { props: ['imgtitle', 'imgsrc'], components: { 'child1': Child1, 'child2': Child2 }, template: '#my_parent' }); // 1. 创建Vue的实例 new Vue({ el: '#app', data: { title: '我是不是很漂亮', img: 'img/img_01.jpg' } });</script></body>动画
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
transition：
v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入;
v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了
v-enter-active 【入场动画的时间段】
v-leave-active 【离场动画的时间段】
简单示例：
<html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 200px; height: 200px; background-color: red; } .fade-enter, .fade-leave-to{ opacity: 0; transform: translateX(200px); } .fade-enter-active, .fade-leave-active{ transition: all 1s ease-in-out; } </style></head><body><div id="app"> <button @click="show = !show">切换</button> <transition name="fade"> <div class="box" v-if="show">撩课学院</div> </transition></div><script src="js/vue.js"></script><script> // 1. 创建Vue的实例 new Vue({ el: '#app', data: { show: false } });</script><script> // Provides transition support for a single element/component import Transition from "../../../Day1/资料/vue-dev/vue-dev/src/platforms/web/runtime/components/transition"; export default { components: {Transition} }</script></body></html>