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>
测试:
点击“添加“按钮后可以在前端添加姓名