Vue01
前端开发技术的发展过程
最早期
: 原生DOM 配合 JS 进行网页的操作发展
: 利用封装技巧 把原生DOM封装成 jQuery 框架- 目前: 大量市场份额 被 vue 抢占 – 目前较少, 大多数旧项目维护
现在
:- 从2009年, 出现了第一款工程化框架 –
Angular -- Google
- 2013年, 出现了第二款框架 –
React -- Facebook
- 2014年, 国产的框架 –
Vue -- 开源
作者尤雨溪
- 目前在国内占据 大份额市场
- 从2009年, 出现了第一款工程化框架 –
Vue
核心思想的对比:
- jQuery思想:
write less, do more
写的少做的多- 利用函数封装技巧, 简化DOM操作的代码
- Vue思想:
不写DOM操作, 一样操作DOM
官方文档
: https://cn.vuejs.org/v2/api/
Vue发展到现在分3个版本:
- vue1: 已经淘汰了
- vue2: 目前主流版本 – 本阶段主要讲解
- vue3: 未来的趋势 – 本阶段后续讲解
vue的开发方式有两种:
- 脚本方式, 类似于jQuery 通过引入脚本 – 适合
新手入门
脚手架
方式: 高度自动化/高度工程化的方式, 适合实际开发
脚本地址: https://cn.vuejs.org/v2/guide/installation.html
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OFg6uuya-1642606234405)(Vue01.assets/image-20220113144202609.png)]
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="box"></div>
<script>
var data = { msg: null }
// vue思想: 监听对象中属性的变化, 当属性发生修改时, 同步更新此属性相关的DOM元素
Object.defineProperty(data, 'msg', {
// 为 data 的msg属性, 添加赋值监听 set
// data.msg = 值/value
set(value) {
console.log('msg被赋值为:', value)
// 更新到 id=box 的元素里
box.innerHTML = value
},
})
//书写此代码, 就可以让自动更新文本到 id=box 元素里
data.msg = 'Hello Vue!'
</script>
</body>
</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>
<!-- id名称随意, 但是习惯写 app -->
<div id="app">
<!-- 之前模板字符串中, 用 ${} 代表JS代码范围 -->
<!-- vue中使用 {{}} 代表JS代码范围 -->
<div>{{ 8 * 9 }}</div>
<!-- {{}} 中可以使用 data 中的数据项 -->
<div>{{msg}}, {{name}}</div>
</div>
<script src="./vendor/vue.js"></script>
<script>
// vue进行了更完善的封装, 自动化操作DOM
// 写法都是固定格式, 必须 背!!!
// 配置项: 都是固定配置, 各有各的含义
const options = {
// element的缩写el: 元素, #app 代表 id='app'
// vue管理 id='app' 的元素
el: '#app',
// 数据项: 固定属性, 只有存储在这个属性中的内容才能在HTML中显示
data: { msg: 'Hello', name: '高达' },
}
// 创建vue对象, 参数是配置项
new Vue(options)
</script>
</body>
</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">
<!-- <h1>春节假期: 29~6</h1> -->
<!-- 插值语法: {{}} -->
<div>姓名: {{ename}}</div>
<div>年龄: {{eage}}</div>
</div>
<script src="./vendor/vue.js"></script>
<script>
var a = new Vue({
el: '#app', //要管理的元素
// data: 数据项, 内部的值随便写
data: { ename: '亮亮', eage: 22 },
})
// 通过打印输出可以看到: data中的数据项, 会被自动添加 get/set 监听器, 实现数据变化 更新DOM的效果
console.log(a)
</script>
</body>
</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">
<!-- 原生语法: οnclick="函数名()" -->
<!-- vue1.0版本: v-on:click="函数名" -->
<!-- vue2.0版本: @click="函数名" -->
<button @click="hit">打{{name}}</button>
<button @click="hitGD">打高达</button>
<button @click="hitGreen">绿小绿</button>
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { name: '亮亮' },
//固定属性: methods 用于存放函数
methods: {
// 原格式 属性名: 函数
// hit: function () {},
// 语法糖:
hit() {
console.log('亮亮说: 好疼...')
},
hitGD() {
console.log('打高达...')
},
hitGreen() {
console.log('绿...绿...')
},
},
})
</script>
</body>
</html>
事件的this
<!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="add1">{{num}}</button>
</div>
<script src="./vendor/vue.js"></script>
<script>
var a = new Vue({
el: '#app',
data: { num: 5 },
methods: {
add1() {
// 函数的this: 其执行时所在的对象
// this指向 当前 new Vue() 得到的对象
// Vue底层会把 methods中方法抽离出来, 放在自身
console.log('this:', this)
// !!!切记: 通过打印来看this的结构,才是真实的数据格式, num书写在data中, 但是运行时并不在
this.num++
},
},
})
console.log(a)
</script>
</body>
</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">
<div>单价: ¥9999</div>
<!-- disabled=true 代表不可用 -->
<!-- 新语法: 属性的JS语法 -->
<!-- vue1.0: v-bind:属性名="JS代码" -->
<!-- vue2.0: :属性名="JS代码" -->
<!-- 切记: 不写:, 属性名="值" 这个值是字符串类型 -->
<!-- num是1 , 则num==1 是true, 不可用就是真 -->
<!-- num不是1, num==1 是false, 不可用就是false, 代表可用 -->
<button @click="jian1" :disabled="num==1">-</button>
<b>{{num}}</b>
<button @click="jia1">+</button>
<div>小计: ¥ {{9999 * num}}</div>
<!-- vue底层侦测到属性变化时, 会自动更新相关所有的DOM元素 -->
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { num: 5 },
methods: {
// 不要用箭头函数: this指向不同, 会出现问题
jian1() {
this.num--
},
jia1() {
this.num++
},
},
})
</script>
</body>
</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>
<br>
<div id="app">
<!-- 不带: 是HTML代码, 引号中是普通字符串 -->
<li title="title">{{title}}</li>
<!-- vue1语法: v-bind:属性名="JS代码" -->
<!-- vue2语法: :属性名="JS代码" -->
<li :title="title">{{title}}</li>
<hr />
<li title="9*9">9*9</li>
<li :title="9*9">9*9</li>
<!-- !!!注意: {{}}是双标签内容中使用, 不支持在属性里书写, 属性需要用 :语法 -->
<li title="{{9*9}}">9*9: {{9*9}}</li>
<input :placeholder="title" />
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { title: '高达来了' },
})
</script>
</body>
</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">
<div>{{num}}</div>
<!-- 不带参数的函数, 可以省略() -->
<!-- 带参数: -->
<button @click="add(1)">+1</button>
<button @click="add(2)">+2</button>
<button @click="add(3)">+3</button>
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { num: 5 },
methods: {
// 参数n 是要添加的数字
add(n) {
this.num += n
},
},
})
</script>
</body>
</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">
<p>高达的妻子是: {{name}}</p>
<button @click="chooseWife('迪丽热巴')">迪丽热巴</button>
<button @click="chooseWife('古力娜扎')">古力娜扎</button>
<button @click="chooseWife('马尔扎哈')">马尔扎哈</button>
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { name: null },
methods: {
chooseWife(name) {
this.name = name
},
},
})
</script>
</body>
</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">
<div>价格: {{price}}</div>
<button @click="changePrice(100)">100</button>
<button @click="changePrice(500)">500</button>
<button @click="changePrice(1000)">1000</button>
<div>数量: {{count}}</div>
<!-- shift+字母 是大写 -->
<button @click="changeCount(10)">10</button>
<button @click="changeCount(20)">20</button>
<button @click="changeCount(30)">30</button>
<p>总价格: {{price * count}}</p>
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { price: 0, count: 0 },
methods: {
changePrice(value) {
this.price = value
},
changeCount(value) {
this.count = value
},
},
})
</script>
</body>
</html>
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"></div>
<script>
// 大概说明下: new Vue() 做了什么
function Vue(options) {
// 源代码中: 固定读取 options.el
this.$el = document.querySelector(options.el)
// 源代码中固定读取: data属性名
for (let key in options.data) {
// 遍历 data 对象的属性, 挨个保存到当前 vue对象里
this[key] = options.data[key]
}
for (let key in options.methods) {
this[key] = options.methods[key]
}
}
var a = new Vue({
// 为什么说是固定属性: el
el: '#app',
// 固定的data属性: 因为源代码中读取的是data
data: { num: 4, name: '亮亮' },
methods: {
add1() {},
add2() {},
},
})
console.log(a)
</script>
</body>
</html>
作业
- 点击 + 和 - 可以修改数量, 后方的 总价格要随着变化
- 数量为1时, 减法按钮不可点击
- 点击 -100 和 +100 可以修改单价, 注意最上方的单价不要随着变化
- 所以: 你需要两个与价格有关的属性, 分别存储 上下 两个单价
- 点击 修改价格 按钮, 可以把单价更新到 上方的价格里
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ucbAkFQV-1642606234407)(Vue01.assets/image-20220113180934379.png)]
为什么说是固定属性: el
el: ‘#app’,
// 固定的data属性: 因为源代码中读取的是data
data: { num: 4, name: ‘亮亮’ },
methods: {
add1() {},
add2() {},
},
})
console.log(a)
</script>
## 作业
- 点击 + 和 - 可以修改数量, 后方的 总价格要随着变化
- 数量为1时, 减法按钮不可点击
- 点击 -100 和 +100 可以修改单价, 注意最上方的单价不要随着变化
- 所以: 你需要两个与价格有关的属性, 分别存储 上下 两个单价
- 点击 修改价格 按钮, 可以把单价更新到 上方的价格里
[外链图片转存中...(img-ucbAkFQV-1642606234407)]