1、MVVM思想
M:即Model,模型,包括数据和一些基本操作
V:即View,视图,页面渲染结果
VM:即View-Model,模型与视图间的双向操作(无需开发人员干涉)
在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中,而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中
而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响的
4、Vue概念-Vue.js是什么?
Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或即有项目整合。另一方面,当与现代化的工具链以及各种类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。
安装Vue
使用node安装vue
1)初始化node npm init -y
2) 安装vue npm install vue
3、入门案例-Hello world
<body>
<div id="app">
<h1> {{name}},非常帅</h1>
</div>
<!-- <script src="./node_modules/vue/dist/vue.cjs.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
name: "张三"
}
});
</script>
</body>
Vue基本语法&插件安装
<body>
<div id="app">
<input type="text" v-model="num">
<button v-on:click="num++">点赞</button>
<button v-on:click="cancle">取消</button>
<h1> {{name}},非常帅,有{{num}}个人为他点赞</h1>
</div>
<!-- <script src="./node_modules/vue/dist/vue.cjs.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
//1、vue声明式渲染
let vm = new Vue({
el: "#app", //绑定元素
data: { //封装数据
name: "张三",
num: 1
},
methods: { //封装方法
cancle() {
this.num--;
},
hello(){
}
}
});
//2、双向绑定,模型变化,视图变化。反之亦然
//3、事件处理
//v-xx:指令
//1、创建vue实例,关联页面的模板,将自己的数据(data)渲染到关联的模板,响应式的
//2、指令来简化对dom的一些操作。
//3、声明方法来做更复杂的操作。methods里面可以封装方法。
</script>
</body>
插件安装
VScode
Vetur
Vue2 Snippets
Chrome
Vue-Devtools
5、指令
1)插值表达式
1.1花括号
{{表达式}}
1.2插值闪烁
使用{{}}方式在网速较慢时会出现问题,在数据未加载完成时,页面会显示出原始的`{{}}`,加载完毕后才显示正确的数据,我们称为插值闪烁
1) v-text和v-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>
</head>
<body>
<div id="app">
{{msg}}{{1+1}}{{hello()}}<br />
<span v-html="msg"></span>
<br />
<span v-text="msg"></span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "<h1>Hello</h1>"
},
methods: {
hello() {
return "World"
}
}
})
</script>
</body>
</html>
2)v-bind
<!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>
<!-- 给html标签的属性绑定 -->
<div id="app">
<a v-bind:href="link">gogogo</a>
<!-- class,style calss名:加上?-->
<span v-bind:class="{active:isActive,'text-danger':hasError}"
v-bind:style="{color: color1,fontSize: size}">你好</span>
<span :class="{active:isActive,'text-danger':hasError}" :style="{color: color1,fontSize: size}">你好</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: "#app",
data: {
link: "http://www.baidu.com",
isActive: true,
hasError: true,
color1: 'green',
size: '36px'
}
})
</script>
</body>
</html>
3)v-model
<!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">
精通的语言:
<input type="checkbox" v-model="language" value="Java">java<br />
<input type="checkbox" v-model="language" value="PHP">java<br />
<input type="checkbox" v-model="language" value="Python">java<br />
选中了{{language.join(",")}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
language: []
}
})
</script>
</body>
</html>
4) v-on
基本用法:
事件修饰符:
在事件处理程序中调用`event.preventDefault()`或`event.stopPropagation()`是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理DOM事件细节。
为了解决这个问题,Vue.js为`v-on`提供了事件修饰符。修饰符是由点开点的指令后缀来表示 的。
`.stop`:阻止事件冒泡到父元素
`.prevent`:阻止默认事件发生
`.capture`:使用事件捕获模式
`.self`:只有元素自身触发事件才执行。(冒泡或捕获的都不执行)
`.once`:只执行一次
<!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">
<!--事件中直接写js片段-->
<button v-on:click="num++">点赞</button>
<!-- 事件指定一个回调函数,必须是Vue实例中定义的函数 -->
<button v-on:click="cancle">取消</button>
<!-- -->
<h1>有{{num}}个赞</h1>
<!-- 事件修饰符 -->
<div style="border: 1px solid red;padding:20px;" v-on:click="hello">
大div
<div style="border: 1px solid blue;padding: 20px" @click.stop="hello">
小div<br />
<a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
</div>
</div>
<!-- 按键修饰符: -->
<input type="text" v-model="num" v-on:keyup.down="num-=2" v-on:keyup.up="num+=2" @click.ctrl="num=10"><br />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: "#app",
data: {
num: 1
},
methods: {
cancle() {
this.num--
},
hello() {
alert("点击 了");
}
}
})
</script>
</body>
</html>
5)v-for
<!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">
<ul>
<li v-for="(user,index) in users" v-if="user.gender == '女'">
当前索引{{index}}=====>
{{user.name}} ===> {{user.gender}} ====> {{user.age}}<br />
对象信息:
<span v-for="(v,k,index) in user">|||||{{v}}===key={{k}}=====index={{index}}</span>
<!-- 1、显示user信息: v-for="item in items" -->
<!-- 2、获取数组下标: v-for="(item,index) in items" -->
<!-- 3、遍历对象:
v-for="value in object"
v-for="(value,key)" in object
v-for="(value,key,index) in object"
-->
<!-- 4、遍历时加上:key来区分不同数据,提高vue渲染效率 -->
</li>
<ul>
<li v-for="(num,index) in nums" :key="index">{{num}}</li>
</ul>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
let app = new Vue({
el: "#app",
data: {
users: [{ name: '张三', gender: '男', age: 21 },
{ name: '李四', gender: '女', age: 22 },
{ name: '王五', gender: '男', age: 23 },
{ name: '赵六', gender: '女', age: 24 },
],
nums: [1, 2, 3, 4, 4]
}
})
</script>
</body>
</html>
6)v-if和v-show
<!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>
<!--
v-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染
v-show,当得到的结果为true,所在的元素才会被显示
-->
<div id="app">
<button v-on:click="show = !show">点我呀</button>
<!-- 1、使用v-if显示 -->
<h1 v-if="show">if=看到我。。。</h1>
<!-- 2、使用v-show显示 -->
<h1 v-show="show">show=看到我</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
let app = new Vue({
el: "#app",
data: {
show: true
}
})
</script>
</body>
</html>
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>
</head>
<body>
<div id="app">
<button v-on:click="random=Math.random()">点我呀</button>
<span>{{random}}</span>
<h1 v-if="random >= 0.75">
看到我了?!>=0.75
</h1>
<h1 v-else-if="random >= 0.5">
看到我了?!>=0.5
</h1>
<h1 v-else-if="random >= 0.2">
看到我了?!>=0.2
</h1>
<h1 v-else>
看到我了?!>0.2
</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
let app = new Vue({
el: "#app",
data: { random: 0.3 }
})
</script>
</body>
</html>
6、计算属性和侦听器
1)计算属性和侦听器
<!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">
<!-- 某些结果是基于之前数据实时计算出来的,我们可以利用计算属性来完成 -->
<ul>
<li>西游记;价格:{{xyjPrice}},数量:<input type="number" v-model="xyjNum"></li>
<li>水浒传;价格:{{shzPrice}},数量:<input type="number" v-model="shzNum"></li>
<li>总价:{{totalPrice}}</li>
</ul>
{{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
// watch可以让我们监控一个值的变化 ,从而做出相应的反应
new Vue({
el: "#app",
data: {
xyjPrice: 99.98,
shzPrice: 98.00,
xyjNum: 1,
shzNum: 1,
msg: ""
},
computed: {
totalPrice() {
return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum
}
},
watch: {
xyjNum: function (newVal, oldVal) {
//alert("newVal" + newVal + "====>oldVal" + oldVal)
if (newVal >= 3) {
this.msg = "库存超出限制",
this.xyjNum = 3
} else {
this.msg = ""
}
}
}
})
</script>
</body>
</html>
2)过滤器
<!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>
<!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方:双花括号插值和v-bind表达式 -->
<div id="app">
<ul>
<li v-for="user in userList">
{{user.id}} ==> {{user.name}}==>{{user.gender == 1 ? "男":"女"}} ===> {{user.gender | genderFilter}}
====> {{user.gender | genderFilter}}====> {{user.gender | gFilter}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
Vue.filter("gFilter", function (val) {
if (val == 1) {
return "男~~~";
} else {
return "女~~~";
}
})
let vm = new Vue({
el: "#app",
data: {
userList: [
{ id: 1, name: 'jacky', gender: 1 },
{ id: 2, name: 'peter', gender: 0 }
]
},
filters: {
genderFilter(val) {
if (val == 1) {
return "男";
} else {
return "女";
}
}
}
})
</script>
</body>
</html>
7、组件化
在vue里,所有实例都是组件
组件其实也是一个Vue实例,因此它在定义时也会接收:data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定,否则就无法利用了,因此没有el属性
但是组件渲染需要html模板,所以增加了template属性,值就是HTML模板
全局组件定义完毕,任何vue实例都可以直接在HTML中通过组件名称来使用组件了
data必须是一个函数,不再是一个对象
1)全局组件
2)组件的利用
3)局部组件
<!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">
<button @click="count++">我被点击了{{count}}次</button>
<counter></counter>
<counter></counter>
<counter></counter>
<br />
<button-counter></button-counter>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
//1、全局声明注册一个组件
Vue.component("counter", {
template: `<button @click="count++">我被点击了{{count}}次</button>`,
data() {
return {
count: 1
}
}
});
//2、局部声明一个组件
const buttonCounter = {
template: `<button @click="count++">我被点击了{{count}}次</button>`,
data() {
return {
count: 1
}
}
};
new Vue({
el: "#app",
data: {
count: 1
},
components: {
'button-counter': buttonCounter
}
})
</script>
</body>
</html>
8、生命周期构子函数
1、生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程:创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
生命周期
<!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">
<span id="num">{{num}}</span>
<button @click="num++">赞!</button>
<h2>{{name}},有{{num}}个人点赞</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
let app = new Vue({
el: "#app",
data: {
name: "张三",
num: 100
},
methods: {
show() {
return this.name;
},
add() {
this.num++;
}
},
beforeCreate() {
console.log("===============beforeCreate创建前===============");
console.log("数据模型未加载:" + this.name, this.num);
console.log("方法未加载:" + this.show());
console.log("html模型未加载:" + document.getElementById("num"));
},
created: function () {
console.log("===============created创建===============");
console.log("数据模型已加载:" + this.name, this.num);
console.log("方法已加载:" + this.show());
console.log("html模型已加载:" + document.getElementById("num"));
console.log("html模型未渲染:" + document.getElementById("num").innerText);
},
beforeMount() {
console.log("===============beforeMount挂载前===============");
console.log("html模板未渲染:" + document.getElementById("num").innerText);
},
mounted() {
console.log("===============mounted挂载===============");
console.log("html模板已渲染:" + document.getElementById("num".innerText))
},
beforeUpdate() {
console.log("===============beforeUpdate更新前===============");
console.log("数据模板已更新:" + this.num);
console.log("html模板未更新:" + document.getElementById("num").innerText);
},
updated() {
console.log("===============updated更新===============");
console.log("数据模板已更新:" + this.num);
console.log("html模板已更新:" + document.getElementById("num").innerText);
}
})
</script>
</body>
</html>
9、vue模块化开发
1、全局安装
创建vue-demo文件夹,在文件夹下进入终端,输入
npm install sebpack -g
2、全局安装vue脚手架
npm install -g @vue/cli-init
3、初始化vue项目
vue init webpack appname:vue脚手架使用 webpack模板初始化一个appname项目
4、启动vue项目
在项目根目录下,终端输入npm run dev
目录
components:组件存放目录
src:vue页面文件存放目录
router:路由文件存放目录
package.json 依赖
index.html:首页
router ----> App.vue 全局
router ----> main.js 导入组件的地方
了解使用组件,在components中创建一个Hello.vue组件,在router --> index.js中
导入组件 import Hello from '@/components/Hello'
添加路由 在routes中添加
{
path: '/hello',
name: 'Hello',
component: Hello
}
在App.vue添加动态路由
<router-link to="/hello">去Hello</router-link>
<router-link to="/">去首页</router-link>
10、Element-ui快速上手
Vue整合element-ui
安装,在项目根目录下, npm i element-ui
完整引入,在main.js中添加
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 设备为全局
Vue.use(ElementUI);
测试:
在Hello.vue文件中添加
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
添加Container布局容器
在App.vue的代码中,在element-ui官网中找到Element-ui的Container的内容,然后复制粘贴到App.vue文件中
将选项一修改为用户列表,选项二修改为Hello
将<el-main>里的内容注释掉,添加<router-view></touter-view>
在components中创建MyTable.vue文件,然后输入vue回车
将上面注释掉的内容添加到MyTable.vue中
将vue.vue里的data数据添加到MyTable.vue中
在index.js中添加MyTable.vue导入信息并添加路径信息
这里有个坑,需要将MyTable的script的sass去掉
在Vue.vue里配置路由跳转
在el-menu里添加 router="true" ,将跳转模式切换成路由
在用户列表的Index的值修改为/table
在Hello列表的Index的值修改为/hello