目录
一、Vue核心知识1
1、初始Vue
2、模板语法
3、数据绑定
4、el与data的两种写法
5、MVVM模型
a、M:模型(Model) : 对应data中的数据
b、V:视图(View) : 模板
c、VM:视图模型(ViewModel) : Vue实例对象
note:
1、Data Bindings:通过vm实例将Model数据绑定到View页面上
2、Dom Listeners:通过vm实例让Dom Listeners 监听View页面上的变化,并及时将数据保存
到Model层
特点:
MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大优点
1. 低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同
的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
2. 可重用性。可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专
注于页面设计,使用Expression Blend可以很容易设计界面并生成xaml代码。
4. 可测试。界面素来是比较难于测试的,测试可以针对ViewModel来写
6、数据代理
a、回顾Object.defineProperty()方法
b、数据代理
c、vue中的数据代理
代理过程:
数据代理图:
7、事件处理
a、事件的基本使用
b、事件修饰符
c、键盘事件
8、计算属性
a、案例1
b、案例2
c、计算属性
d、计算属性简写
9、监视属性
a、天气案例
b、监视属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天气案例-监视属性</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
</body>
<!--
监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视!!
3.监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
-->
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue在启动时生成生产提示
const vm = new Vue({
el: '#root',
data(){
return {
isHot: true,
}
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
// watch:{
// isHot:{
// //immediate:true, // 初始化的时候让handle调用一下
// // handler什么时候调用?当isHot发生改变时
// handler(newValue,oldValue){
// console.log('isHot的值被改变了',newValue,oldValue);
// }
// }
// }
})
vm.$watch('isHot',{
//immediate:true, // 初始化的时候让handle调用一下
// handler什么时候调用?当isHot发生改变时
handler(newValue,oldValue){
console.log('isHot的值被改变了',newValue,oldValue);
}
})
</script>
</html>
c、深度监视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>深度监视</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
<hr/>
<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>
<button @click="numbers = {a:666,b:888}">彻底替换掉numbers</butt>
</div>
</body>
<!--
深度监视:
(1).Vue中的watch默认不监测对象内部值得改变 (一层)。
(2).配置deep:true可以监测对象内部值该笔那 (多层)。
备注:
(1).Vue自身可以检测对象内部值得变化,但Vue提供得watch默认不可以!
(2).使用watch时根据数据的具体结构,决定是否采用深度监视
-->
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue在启动时生成生产提示
const vm = new Vue({
el: '#root',
data(){
return {
isHot: true,
numbers:{
a:1,
b:2
}
}
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{
//immediate:true, // 初始化的时候让handle调用一下
// handler什么时候调用?当isHot发生改变时
handler(newValue,oldValue){
console.log('isHot的值被改变了',newValue,oldValue);
}
},
// 监视多级结构中某个属性的变化
'numbers.a':{
handler(newValue,oldValue){
console.log('numbers.a的值被改变了',newValue,oldValue);
}
},
// 监视多级结构中所有属性的变化
numbers:{
handler(newValue,oldValue){
deep:true
console.log('numbers的值被改变了',newValue,oldValue);
}
},
}
})
</script>
</html>
d、监视简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监视简写</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue在启动时生成生产提示
const vm = new Vue({
el: '#root',
data(){
return {
isHot: true,
}
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
// 正常写法
isHot:{
//immediate:true, // 初始化的时候让handle调用一下
// handler什么时候调用?当isHot发生改变时
handler(newValue,oldValue){
console.log('isHot的值被改变了',newValue,oldValue);
}
},
// 简写方式 (只有监视属性时,只配置了handler才能简写)
isHot(newValue,oldValue){
console.log('isHot的值被改变了',newValue,oldValue);
}
}
})
// 简写
vm.$watch('isHot',function(newValue,oldValue){
console.log('isHot的值被改变了',newValue,oldValue);
})
</script>
</html>
e、watch与computed对比
10、class 与 style绑定
a、class样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class样式绑定</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
/* .basic{}
.happy{}
.sad{}
.normal{}
.atguigu1{}
.atguigu2{}
.atguigu3{} */
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- 绑定class样式--字符串写法。 适用于:样式的类名不确定,需要动态指定 -->
<div class="basic" :class="mood" @click="changeRandomMood">{{name}}</div> <br/><br/>
<!-- 绑定class样式--数组写法。 适用于:要绑定的样式个数不确定,名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
<!-- 绑定class样式--对象写法。 适用于:要绑定的样式个数确定,名字也确定 但要动态决定用不用-->
<div class="basic" :class="classObj">{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue在启动时生成生产提示
const vm = new Vue({
el: '#root',
data(){
return {
name: '莫菲特',
mood: 'normal',
classArr: ['atguigu1','atguigu2','atguigu3'],
classObj: {
atguigu1:false,
atguigu2:true
}
}
},
methods:{
changeMood(){
this.mood = 'happy'
},
changeRandomMood(){
const arr = ['normal','sad','happy']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
}
})
</script>
</html>
b、style样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>style样式绑定</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
/* .basic{}
.happy{}
.sad{}
.normal{}
.atguigu1{}
.atguigu2{}
.atguigu3{} */
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- 采用style对象的方式 -->
<div class="basic" :style="styleObj">{{name}}</div><br/><br/>
<!-- 采用style数组的方式 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
</body>
<!--
绑定样式:
1.class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用
2.style样式
:style="{fontSize:xxx}" 其中xxx是动态值
:style="[a,b]"其中a、b是样式对象
-->
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue在启动时生成生产提示
const vm = new Vue({
el: '#root',
data(){
return {
name: '莫菲特',
mood: 'normal',
classArr: ['atguigu1','atguigu2','atguigu3'],
classObj: {
atguigu1:false,
atguigu2:true
},
styleObj: {
fontSize: '40px',
color: 'red'
},
styleArr: [
{
fontSize: '40px',
color: 'blue'
},
{
backgroundColor:'gray'
}
]
}
}
})
</script>
</html>
11.条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>当前n的值是:{{number}}</h2>
<button @click="number++">点我n+1</button>
<!-- 使用v-show做条件渲染 可以传属性及表达式 -->
<h2 v-show="isBoolean">欢迎来到{{address}}</h2>
<h2 v-show="!isBoolean">欢迎来到{{address}}</h2>
<!-- 使用v-if做条件渲染 -->
<h2 v-if="isBoolean">欢迎来到{{address02}}</h2>
<h2 v-if="!isBoolean">欢迎来到{{address02}}</h2>
<template v-if="isBoolean">
<h2>你好</h2>
<h2>詹姆斯</h2>
<h2>湖人</h2>
</template>
<!-- 该条件渲染中间不能夹杂其他输出或逻辑 否则其代码后的渲染会失效 -->
<h2 v-if="number === 1">韩宁</h2>
<h2 v-else-if="number === 2">蔡国亮</h2>
<h2 v-else-if="number === 3">王科学</h2>
<h2 v-else-if="number === 4">桑高杰</h2>
<h2 v-else>陈飞飞</h2>
</div>
</body>
<!--
条件渲染:
1.v-if
写法:
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除
注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被打断。
2.v-show
写法:v-show="表达式"
适用于:切换频率较高的场景
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
3.备注:使用v-if时,元素可能无法获取到,而使用v-show一定可以获取到
-->
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 vue在启动时生成生产提示
const vm = new Vue({
el: '#root',
data(){
return {
number: 0,
address: '洛杉矶',
address02: '丁刘集',
isBoolean: true
}
}
})
</script>
</html>