目录
一、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>
1212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
