Vue官方网站: https://cn.vuejs.org/
一、为什么学习Vue框架?
1.Vue框架以其简单易学并且渐进式的特点深受开发者喜爱 无论是中小型还是大型项目都可使用2.Vue框架来开发,在前端开发领域非常流行
二、搭建vue环境
vue环境的搭建有很多种:
1.使用cdn
2.下载javaScript文件,自行托管
3.使用npm安装
4.使用官方的cli来构建项目
我们初次学习,先使用自行下载js的方式。
三、主要介绍内容
1.Vue框架核心
2.MVVM模式
3.Vue起步
四、MVVM模式简介
4.1、Vue在设计上使用的MVVM(Model-View-ViewModel)模式
1.Model:负责数据存储
2.View:负责页面展示
3.ViewModel:负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示
4.2、优势
1.低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化时Model可以不变,当Model变化时View也可以不变
2.可重用性:可以把一些视图逻辑放在一个ViewModel里面,让多个View重用这段视图逻辑代码
3.独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计
五、VUE实例
1. hello world
代码:
<!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>
</head>
<body>
<div id="app">
{
{name}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app =new Vue({
el:"#app",//绑定一个元素
data(){
return{
name:'hello',
height:100,
love:[1,2,3],
}
}
})
</script>
</html>
效果:
六、指令(Directive)
6.1.指令:是特殊的带有 v-前缀的特性
6.2.常用:Vue指令 v-if指令、v-else指令、v-show指令、v-on指令、v-model指令、v-bind指令、v-for指令…
6.3.指令的作用 当表达式的值改变时,将某些行为应用到DOM上
6.4.v-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>
</head>
<body>
<div id="app">
{
{name}}
<h1 v-if="isif">显示了</h1>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
// 创建一个Vue实例
var app =new Vue({
el:"#app",//绑定一个元素
data(){
ret