前端环境的准备-Vue框架介绍-Vue快速入门
官网链接:https://cn.vuejs.org/MVVM模式:创建一个新文件夹拖拽到VSCode里,就会打开一个新的项目并存放在新文件夹中新建文本文件保存文件并给文件命名和指定文件格式HTML输入,生成HTML代码
·
Vue框架快速入门
前端环境的准备-Vue框架介绍-Vue快速入门
官网链接:https://cn.vuejs.org/
1. 前端环境的准备
- 1 编码工具:VSCode
- 2 依赖管理:NPM
- 3 项目构建:VueCli
2. Vue框架介绍
- Vue(读音/vju:/,类似于view)是一套用于
构建用户界面
的渐进式框架。- Vue.js提供了
MVVM
数据绑定和一个可组合的组件系统,具有简单、灵活的API。- 其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。
Vue.js是一款流行的
JavaScript
前端框架,目的是简化Web
开发。Vue所关注的核心是MVC模式中的视图层
,同时,它也能方便地获取数据更新
,实现视图与模型
的交互。
MVVM模式:
- MVVM是Model-View-
ViewModel
的缩写,它是一种基于前端开发的架构模式,其核心是提供对View和ViewModel的双向数据绑定。- Vue提供了MVVM风格的
双向数据绑定
,核心是MVVM中的VM,也就是
ViewModel,ViewModel负责连接View和Model,保证视图和数据的一致性。
3. Vue快速入门
创建一个新文件夹拖拽到VSCode里,就会打开一个新的项目并存放在新文件夹中
Ctrl+N
新建文本文件
Ctrl+S
保存文件并给文件命名和指定文件格式
HTML输入英文!回车
,生成HTML代码
3.1 基本用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue 的script脚本文件 -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
<div id="app">
{{message}}
</div>
<!-- 3.创建vue的实例对象 -->
<script>
const hello = {
//指定数据源,既MVVM中的Model
data() {
return {
message: 'Hello Vue!'
}
}
}
const app = Vue.createApp(hello)
app.mount('#app') //指定当前vue实例要控制页面的哪个区域
</script>
</body>
</html>
3.2 内容渲染指令.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue 的script脚本文件 -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
<div id="app">
<p>姓名:{{username}}</p>
<p>性别:{{gender}}</p>
<p>{{desc}}</p>
<p v-html="desc"></p> //指令将字符串以HTML格式渲染
</div>
<!-- 3.创建vue的实例对象 -->
<script>
const vm = {
//指定数据源,既MVVM中的Model
data() {
return {
username:'zhangsan',
gender:'男',
desc: '<a href="http://www.baidu.com">百度</a>'
}
}
}
const app = Vue.createApp(vm)
app.mount('#app') //指定当前vue实例要控制页面的哪个区域
</script>
</body>
</html>
3.3 属性绑定指令.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue 的script脚本文件 -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
<div id="app">
<a :href="link">百度</a>
<input type="text" :placeholder="inputValue">
<img :src="imgSrc" :style="{widh:w}" alt="">
</div>
<!-- 3.创建vue的实例对象 -->
<script>
const vm = {
//指定数据源,既MVVM中的Model
data() {
return {
link:"http://www.baidu.com",
inputValue:'请输入内容',
imgSrc: './images/demo.jpg',
w:'500px'
}
}
}
const app = Vue.createApp(vm)
app.mount('#app') //指定当前vue实例要控制页面的哪个区域
</script>
</body>
</html>
3.4 使用JavaScript表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue 的script脚本文件 -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
<div id="app">
<p>{{number + 1}}</p>
<p>{{OK ? 'True' : 'False'}}</p>
<p>{{message.split('').reverse().join('')}}</p>
<p :id="'list-' + id">xxx</p>
<p>{{user.name}}</p>
</div>
<!-- 3.创建vue的实例对象 -->
<script>
const vm = {
//指定数据源,既MVVM中的Model
data() {
return {
number: 9,
ok: false,
message: 'ABC',
id: 3,
user: {
name: 'zs',
}
}
}
}
const app = Vue.createApp(vm)
app.mount('#app') //指定当前vue实例要控制页面的哪个区域
</script>
</body>
</html>
3.5 事件绑定指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue 的script脚本文件 -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
<div id="app">
<h3>count 的值为:{{count}}</h3>
<button v-on:click="addCount">+1</button> <!-- 方式1 -->
<button @click="count+=1">+1</button> <!-- 方式2 -->
</div>
<!-- 3.创建vue的实例对象 -->
<script>
const vm = {
//指定数据源,既MVVM中的Model
data() {
return {
count: 0,
}
},
methods:{
//点击按钮,让count自增+1
addCount() {
this.count +=1
},
}
}
const app = Vue.createApp(vm)
app.mount('#app') //指定当前vue实例要控制页面的哪个区域
</script>
</body>
</html>
3.6 条件渲染指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue 的script脚本文件 -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
<div id="app">
<button @click="flag =!flag">Toggle Flag</button>
<p v-if="flag"> 请求成功 ---- 被v-if控制</p> <!--为false不创建 -->
<p v-show="flag">请求成功----被v-show控制</p> <!--false也会创建 css把值隐藏了(标签频繁的被切换使用v-show性能更高一些)-->
</div>
<!-- 3.创建vue的实例对象 -->
<script>
const vm = {
//指定数据源,既MVVM中的Model
data() {
return {
flag: false,
}
}
}
const app = Vue.createApp(vm)
app.mount('#app') //指定当前vue实例要控制页面的哪个区域
</script>
</body>
</html>
3.7 v-else和v-else-if 指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue 的script脚本文件 -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
<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 v-show="a">
测试
</div>
<button @click="a=!a">点击</button>
</div>
<!-- 3.创建vue的实例对象 -->
<script>
const vm = {
//指定数据源,既MVVM中的Model
data() {
return {
num: Math.random(),
type: 'A',
a: true,
}
}
}
const app = Vue.createApp(vm)
app.mount('#app') //指定当前vue实例要控制页面的哪个区域
</script>
</body>
</html>
3.8 列表渲染指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue 的script脚本文件 -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
<div id="app">
<ul>
<li v-for="(user,i) in userList">索引是:{{i}}, 姓名是:{{user.name}}</li>
</ul>
</div>
<!-- 3.创建vue的实例对象 -->
<script>
const vm = {
//指定数据源,既MVVM中的Model
data() {
return {
userList:[
{id: 1, name:'zhangsan'},
{id: 2, name:'lisi'},
{id: 3, name:'wangwu'},
]
}
}
}
const app = Vue.createApp(vm)
app.mount('#app') //指定当前vue实例要控制页面的哪个区域
</script>
</body>
</html>
3.9 v-for中的key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入vue 的script脚本文件 -->
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
<div id="app">
<!-- 添加用户的区域 -->
<div>
<!-- v-model页面上的值发生变化时也会影响内部的值(双向绑定) -->
<input type="text" v-model="name">
<button @click="addNewUser">添加</button>
</div>
<!-- 用户列表区域 -->
<ul>
<li v-for="(user, index) in userlist" :key="user.id" >
<input type="checkbox" />
姓名:{{user.name}}
</li>
</ul>
</div>
<!-- 3.创建vue的实例对象 -->
<script>
const vm = {
//指定数据源,既MVVM中的Model
data() {
return {
userlist:[
{id: 1, name:'zhangsan'},
{id: 2, name:'lisi'},
{id: 3, name:'wangwu'}
],
//输入的姓名
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') //指定当前vue实例要控制页面的哪个区域
</script>
</body>
</html>
更多推荐
已为社区贡献3条内容
所有评论(0)