Vue框架快速上手
前端环境准备
编码工具：VSCode
依赖管理：NPM
项目构建：VueCli
Vue框架介绍
Vue框架概要
vue官方文档：https://cn.vuejs.org/guide
- Vue是一套用于构建用户界面的渐进式框架。
- Vue.js提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。
- 其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。
- 比早期的前端框架更适合多人协作开发。
MVVM模式
MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定。
Vue提供了MVVM风格的双向数据绑定，核心是MVVM中的VM，也就是ViewModel，ViewModel负责连接View和Model，保证视图和数据的一致性。
绑定过程由Vue来完成，可以理解为Vue实现了ViewModel的功能，并且屏蔽了DOM操作。
Vue快速入门
01.基本用法
- 导入vue.js的script脚本文件
<script src="https://unpkg.com/vue@3"></script>
- 在页面中声明一个将要被vue所控制的DOM区域，即MVVM中的View
<div id="app">
{
{message}}
</div>
- 创建vm实例对象（vue实例对象）
<script>
// 创建VM对象挂载到id="app"区域
createApp({
//指定数据源，即MVVM中的Model
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')//指定当前vue实例要控制页面的哪个区域
</script>
运行结果：
02.内容渲染指令
<body>
<div id="app">
<p>姓名：{
{username}}</p>
<p>性别：{
{gender}}</p>
<!-- 花括号遇到html的内容时候默认是字符串，不会当做标签进行渲染 -->
<p>{
{desc}}</p>
<p v-html="desc"></p>
</div>
<script>
const vm = {
data: function() {
return {
username: 'zhangsan',
gender: '男',
desc: '<a href="http://www.baidu.com">百度</a>'
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
运行结果：
03.属性绑定指令
<body>
<div id="app">
<!-- 只要带冒号，后面就是变量或者表达式 -->
<a :href="link">百度</a>
<input type="text" :placeholder="inputValue">
<img :src="imgSrc" :style="{width:w}" alt="">
</div>
<script>
const vm = {
data: function() {
return {
link: "http://www.baidu.com",
//文本框的占位符内容
inputValue: '请输入内容',
//图片的src地址
imgSrc: './images/astronaut.png',
w: '500px'
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
运行结果：
04.使用JavaScript表达式
<body>
<div id="app">
<p>{
{number+1}}</p>
<p>{
{ok ? 'True' : 'False'}}</p>
<!-- 字符串倒置 -->
<p>{
{message.split('').reverse().join('')}}</p>
<p :id="'list-'+id">xxxx</p>
<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>
运行结果：
05.事件绑定指令
<body>
<div id="app">
<h3>count的值为:{
{count}}</h3>
<!-- 两个按钮效果一样，都是+1 -->
<button v-on:click="addCount">+1</button>
<!-- v-on:等价@ -->
<button @click="count+=1">+1</button>
</div>
<script>
const vm = {
data: function() {
return {
count: 0,
}
},
methods: {
//点击按钮，让count自增+1
addCount() {
//this代表当前的vm对象
this.count += 1
},
},
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
运行结果：
06.条件渲染指令
<body>
<!-- 根据条件控制元素是否能够显示 -->
<div id="app">
<button @click="flag=!flag">Toggle Flag</button>
<!-- v-if和v-show区别：
网页渲染出来的源码只有一个p标签，v-if的值是false，标签不会被创建；
v-show值是false标签会被创建出来，没有显示的原因是通过css的方式进行隐藏 style="display:none"
如果标签需要频繁被切换使用v-show，性能更高
-->
<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>
运行结果：
点击“Toggle Flag”按钮
07. v-else和v-else-if指令
<body>
<div id="app">
<p v-if="num > 0.5">随机数 ＞ 0.5</p>
<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>
<script>
const vm = {
data: function(){
return {
// 生成 1 以内的随机数
num: Math.random(),
// 类型
type: 'A',
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
运行结果：
08.列表渲染指令
<body>
<div id="app">
<ul>
<!-- (user,i)元素和索引 -->
<!-- <li v-for="user in userList">索引是：{
{i}} ， 姓名是：{
{user.name}}</li> -->
<li v-for="(user,i) in userList">索引是：{
{i}} ， 姓名是：{
{user.name}}</li>
</ul>
</div>
<script>
const vm = {
data: function() {
return {
userList: [{
id: 1,
name: 'zhangsan'
}, {
id: 2,
name: 'lisi'
}, {
id: 3,
name: 'wangwu'
}, ],
}
},
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
运行结果：
09.v-for中的key
<body>
<div id="app">
<!-- 添加用户的区域 -->
<div>
<!-- 单向绑定：name改变，页面改变；页面改变，name不改变 -->
<!-- <input type="text" :value="name"> -->
<!-- 双向绑定：name改变，页面改变；页面改变，name改变 -->
<input type="text" v-model="name">
<button @click="addNewUser">添加</button>
</div>
<!-- 用户列表区域 -->
<ul>
<!-- key属性，为每个循环的标签加上唯一的索引 -->
<!-- 但是仍然存在问题：选中第一个用户后，添加一个用户，选中变成新添加的用户
解决：将数据库的组件查询出来，设置到key的值位置 -->
<!-- <li v-for="(user, index) in userlist" :key="index"> -->
<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: 'zhangsan'
}, {
id: 2,
name: 'lisi'
}],
//输入的用户名
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>
运行结果：
点击添加后
