- 欢迎关注我的公众号
- Vue.js 是最火的一个前端框架，React最流行，都可以开发网站和手机App的开发，Vue需要借助Weex
- 前端三大主流的框架，Vue Angular React
- Vue是一套构建用户界面的框架，只关注视图层，非常易于上手和第三方库和其他项目整合
- 框架：是一套完整的解决的方案，对项目侵入性比较大，项目如果需要更换框架，则需要重构这个项目
- 库：是一个小功能，对项目的侵入性比较小，想换就换
- MVC 是后端的分层开发的概念，MVVM是前端的概念，主要是关注视图层的分离，MVVM把前端的视图层，分为了三个部分 Model View VM ViewModel
#### 第一个Demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导入Vue-->
<script src="./lib/vue.min.js"></script>
</head>
<body>
<!-- Vue控制的元素区域 vue -->
<div id="app">
<p>{{ msg }}</p>
</div>
<!-- vue的实力 -->
<script>
// new Vue 就是我们MVVM的VM
var vm=new Vue({
el:'#app',
// 这里就是MVVM 就是M 保存页面的数据的
data :{ //
msg:'我是shiming'
}
})
</script>
</body>
</html>
#### 第二个Demo
- 使用 v-cloak 能够解决 插值表达式闪烁的问题
- v-text是默认没有闪烁的问题的
- v-text会覆盖元素中原本的内容，但是插值表达式只会替换占位符，不会把整个元素清空
- v-html 可以渲染出内容中所带的标签的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
<p v-cloak >-------------{{ msg }}------</p>
<!-- v-text 和v-cloak作用差不多 -->
<h4 v-text="msg">========</h4>
<!-- v-text是默认没有闪烁的问题的 -->
<!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换占位符，不会把整个元素清空 -->
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<!-- 这个就可以渲染出来哦 -->
<div v-html="msg2"></div>
</div>
<script src="./lib/vue.min.js"></script>
<script>
var vm=new Vue({
el:'#app',
data :{
msg:"123" ,
msg2:"<h1>我是仕明 我爱学习 </h1>"
}
})
</script>
</body>
</html>
第三个Demo
- 如何定义一个Vue的代码结构 如何定义插值表达式 和 v-text v-cloak
- v-html
- v-bind 缩写 :
- v-on 时间绑定机制 缩写 @
1 | <!DOCTYPE html> |
#### 第四个Demo
.prevent 阻止默认的行为 阻止标签到处跑
capture 先把事件传递给div 然后在给到btn 事件传递变了一个方向
/stop事件不能給div傳遞事件
once 事件只触发一次
stop和self的区别
self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡行为 但是stop就可以完全的阻止
1 | <!DOCTYPE html> |
v-model 的数据双向绑定
- 在浏览器的 console里面输入 window.vm 就可以找到我们代码中赋值，当然我们也可以 vm.msg 获取我们代码里面赋值 ,我们也可以改变页面的msg的值 vm.msg=”new”; 刷新一下 页面就改变额
- v-model 可以实现表单元素和model 中数据的双向绑定，注意v-model只能运用在表单元素中 input（address email text radio） select checkbox textarea
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
</head>
<body>
<div id="app">
<h4>{{msg}}</h4>
<!-- 一个输入框 100%的宽度 但是 v-bind只能实现 数据的单项绑定 从m自动绑定到V
无法实现数据的双向绑定
-->
<input type="text" v-bind:value="msg" style="width: 100%;">
<!-- 这个是个输入框，但输入的时候呢，页面上的值也会变，这就可以实现数据的双向绑定了 -->
<input type="text" v-model:value="msg" style="width: 100%;">
</div>
<script>
// 这个vm会加载到浏览器的内存中区
var vm=new Vue({
el:"#app",
data:{
msg:"shiming tongxue"
}
})
</script>
</body>
</html>
<!-- 在浏览器的 console里面输入 window.vm 就可以找到我们代码中赋值，
当然我们也可以 vm.msg 获取我们代码里面赋值
我们也可以改变页面的msg的值
vm.msg="new"; 刷新一下 页面就改变额
-->
<!-- v-model 可以实现表单元素和model 中数据的双向绑定，注意v-model只能运用在表单元素中
input（address email text radio） select checkbox textarea -->
实现的计算器
var codeStr="parseInt(this.n1)"+this.opt+"parseInt(this.n2)"this.result=eval(codeStr)在项目中不要经常用这个方案，这是投机取巧的方式
1 | <!DOCTYPE html> |
Vue中使用样式
1 | <!DOCTYPE html> |
#### Vue使用Style1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1 :style="{color:'red','font-weight':'200'}">我是你的爸爸</h1>
<h1 :style="styleObj">我是你的爸爸</h1>
<h1 :style="styleObj2">我是你的爸爸</h1>
<!-- 绑定两个对象，我曹牛逼哦 -->
<h1 :style="[styleObj2,styleObj]">我是你的爸爸</h1>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
styleObj:{color:'red','font-weight':'200'} ,
styleObj2:{'font-style':'italic'}
}
})
</script>
</body>
</html>
#### 这就就是绑定key 有个疑问？？？现在最新版本的key可以使用对象了啊
- 原来的2.4.0的时候 只能使用 number或者string key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值 在组件中循环的时候，v-for 必须指定key值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
</head>
<body>
<div id="app">
<div>
<label>
ID:<input type="text" v-model="id">
</label>
<label>
Name:<input type="text" v-model="name">
</label>
</div>
<input type="button" value='添加' @click="add">
<!-- <p v-for="item in list" >
<input type="checkbox">
{{item.id}} ---{{item.name}}
</p> -->
<!-- 这就就是绑定key 有个疑问？？？现在最新版本的key可以使用对象了啊
原来的2.4.0的时候 只能使用 number或者string key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值 -->
<!-- 在组件中循环的时候，v-for 必须指定key值 -->
<p v-for="item in list" :key="item" >
<input type="checkbox">
{{item.id}} ---{{item.name}}
</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
id:"",
name:"",
list:[
{id:1,name:"shiming"},
{id:2,name:"shimingai"},
]
},
methods:{
add(){
// 添加 这种方式没有问题
// this.list.push({id:this.id,name:this.name})
// 这种添加的方式 就有问题了 哈哈 难受哦 原因就是没有key 没有指定那一项被选中了
this.list.unshift({id:this.id,name:this.name})
}
}
})
</script>
</body>
</html>
v-show 和v-if的区别
- v-show 频换的切换
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 不能有空格啊 "button " -->
<input type="button" value="点我" @click="toggle">
<input type="button" value="点我" @click="flag=!flag">
<!-- 就相对于安卓中 gone 控件 都会重新创建和删除 消耗性能比较严重-->
<h3 v-if="flag">这是 v-if 控制元素</h3>
<!-- 就相当于 invisible 这个控件还在 不会重新创建和删除，只是切换了元素 dispaly：none -->
<!-- 如果元素涉及到频换的切换 就是用v-show -->
<h3 v-show="flag">这是 v-show 控制元素</h3>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true
},
methods: {
toggle() {
this.flag = !this.flag
}
}
})
</script>
</body>
</html>
