1.前端环境准备
VScode(WebStorm也可以)
2.Vue框架介绍
3.Vue快速入门
3.1导入vue.js的scrip的脚本文件
<script src="https://unpkg.com/vue@next">< script>
3.2在页面中声明一个将要被vue所控制的DOM区域，即MVVM中的View
<div id="app"> {{message}} </div>
3.3创建vm实例对象
const hello = { // 指定数据源，既MVVM中的Model data: function() { return { message: 'Hello Vue!' } } } const app = Vue.createApp(hello) app.mount('#app') // 指定当前vue实例要控制页面的哪个区域
4.Vue的几个用法
1.基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!--1.导入vue的脚本文件--> <script src="https://unpkg.com/vue@3"></script> </head> <body> <!--2.声明要被vue所控制的DOM区域--> <div id="app"> {{message}} </div> <!--3.创建vue的实例对象--> <script> const hello = { //指定数据源，即MVVM中的Model data: function () { return { message: 'Hello Vue!' } } } const app = Vue.createApp(hello) app.mount('#app') </script> </body> </html>
测试：
2.内容渲染指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <p>姓名：{{username}} </p> <p>性别：{{gender}}</p> <!-- 渲染百度的链接--> <p>{{desc}}</p> <p v-html="desc"></p> </div> <script> const vm = { data: function () { return { username: 'zhangsan', gender: '男', desc: '<a href="https//www.baidu.com">百度</a>' } } } const app = Vue.createApp(vm) app.mount('#app') </script> </body> </html>
测试：
3.属性绑定指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <a :href="link">百度</a> <!-- <a v-bind:href ="link">vue</a> 绑定指令，一般省略v-bind --> <input type="text" :placeholder="inputValue"><!--inputValue：默认显示文本--> <img :src="imgSrc" :style="{ width : w }" alt=""> </div> <script> const vm = { data: function () { return { link: "http://www.baidu.com", //文本框的占位符内容 inputValue: '请输入内容', //图片的src地址 imgSrc: './images/demo.png', w: '100px' } } } const app = Vue.createApp(vm) app.mount('#app') </script> </body> </body> </html>
测试：
4.使用JavaScript表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <!-- vue 实例要控制的 DOM 区域 --> <div id="app"> <p>{{number + 1}}</p> <p>{{ok ?'True' :'False'}}</p> <!-- 拆分 倒序 拼接 --> <p>{{message.split('').reverse().join('')}}</p> <p :id="'list-' + id">xxx</p> <!-- 绑定了user对象 --> <p>{{user.name}}</p> </div> <script> const vm = { data: function () { return { number: 9, ok: false, message: 'ABC', id: 3, user: { name: 'zs', } } } } const app = Vue.createApp(vm) app.mount('#app') </script> </body> </html>
测试：
5.事件绑定指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3>count 的值为: {{count}}</h3> <!-- v-on或@ 用于件监听 --> <button v-on:click="addCount">+1</button> <button @click="count+=1">+1</button> </div> <script> const vm = { data: function () { return { count: 0, } }, methods: { // 点击按钮，让 count 自增 +1 addCount() { this.count += 1 }, }, } const app = Vue.createApp(vm) app.mount('#app') </script> </body> </html>
测试：
点击“+1“按钮，count的值可以+1
6.条件渲染指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <button @click="flag = !flag">Toggle Flag</button> <p v-if="flag">请求成功 --- 被 v-if 控制</p> <p v-show="flag">请求成功 --- 被 v-show 控制</p> </div> <script> const vm = { data: function () { return { flag: false, } } } const app = Vue.createApp(vm) app.mount('#app') </script> </body> </html>
测试：
不断点击“Toggle Flag“按钮，下面两行可以消失又出现
7.v-else和v-else-if指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <p v-if="num>0.5">随机数 > 0.5</p><!--num>5此标签才会显示--> <p v-else>随机数 ≤ 0.5"</p> <hr /> <p v-if="type==='A'">优秀</p> <p v-else-if="type==='B'">良好</p> <p v-else-if="type==='C'">一般</p> <p v-else>差</p> <div v-show="a"> 测试 </div> <button @click="a=!a">点击</button> </div> <script> const vm = { data: function () { return { //生成1以内的随机数 num: Math.random(), type: 'A', a: true } }, } const app = Vue.createApp(vm) app.mount('#app') </script> </body> </html>
测试：
不断点击“点击“按钮，”测试“可以消失又出现
8.列表渲染指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <ul> <!--自动创建多个标签--> <li v-for="(user,i) in userList">索引是: {{i}}，姓名是: {{user.name}}</li> </ul> </div> <script> const vm = { data: function () { return { userList: [//准备数据 { id: 1, name: '111' }, { id: 2, name: '222' }, { id: 3, name: '333' }, ], } }, } const app = Vue.createApp(vm) app.mount('#app') </script> </body> </html>
测试：
9.v-for中的key
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <!-- 添加用户的区域 --> <div> <!-- v-model="something" 双向绑定 页面数据发生变化也会影响name值--> <input type="text" v-model="name"> <button v-on:click=" addNewUser">添加</button> </div> <!-- 用户列表区域 --> <ul> <li v-for="(user, index) in userlist" :key="user.id"> <input type="checkbox" /> 姓名: {{user.name}} </li> </ul> </div> <script> const vm = { data: function () { return { //用户列表 userlist: [ { id: 1, name: '111' }, { id: 2, name: '222' } ], //输入的用户名 name: ' ', //下一个可用的 id 值 nextId: 3 } }, methods: { //点击添加按钮 addNewUser() { this.userlist.unshift({ id: this.nextId, name: this.name }) this.name = ' ' this.nextId++ } } } const app = Vue.createApp(vm) app.mount('#app') </script> </body> </html>
测试：
点击“添加“按钮后可以在前端添加姓名
