Vue.js是一款强大而灵活的前端框架，其响应式数据绑定、组件化开发、指令系统、路由和状态管理以及丰富的生态都为开发者提供了极大的便利。通过学习Vue.js，我不仅提升了自身的前端开发技能，也对现代前端开发有了更深的理解和认识。在未来的工作和学习中，我将继续深入研究和运用Vue.js，以创造出更多优质的前端应用。
可以选择引入开发环境版本 / 生产环境版本
一、vue的安装
// 开发环境版本, 包含了帮助的命令行警告
<srcipt src='https://cdn.jsdeliver.net/npm/vue/dist/vue.js'></script>// 生产环境版本, 优化了尺寸和速度
<srcipt src='https://cdn.jsdeliver.net/npm/vue'></script>
// 开发环境
https://vuejs.org/js/vue.js// 生产环境
https://vuejs.org/js/vue.min.js
方式三. NPM安装
通过webpack和CLI的使用
Vue的MVVM
M： Model 数据模型
数据层
数据可能是固定的思数据, 更多的是来自服务器, 从网络上请求下来的数据
V: View 视图模板
视觉层
在前端开发中, 通常是DOM层
作用: 是给用户展示各种信息
VM： View-Model 视图模型
视图模型层
是View和Model沟通的桥梁
一方面实现了Data Binding (数据绑定), 讲Model的改变实时的反应到View中
另一方面实现了DOM Listener (DOM监听), 当DOM发生一些时间 (点击, 滚动, touch等) 时, 可以监听到, 并在需要的情况下改变对应的Data
二. Vue基础语法
语法糖: 简写
生命周期
事物从诞生到消亡的整个过程
模板语法
创建Vue, options可以放什么
el
data
methods
生命周期函数
…
语法
综合
插值操作 Mustache
Mustache语法 (双大括号)
可以直接写变量
可以写简单的表达式
v-once
后面不需要跟任何表达式
表示元素和组件只渲染一次, 不会随着数据的改变而变化
v-html
后面往往跟一个string类型
会将string的html解析出来并渲染
v-text
与Mustache相似, 一般不用, 不灵活
v-pre
用于跳过这个元素和它子元素的编译过程, 用于显示原本的Mustache语法
v-cloak
在某些情况下, 我们浏览器可能会直接显示出未编译的Mustache标签
v-bind
作用: 动态绑定属性
简写: :
条件判断
v-if
v-else-if
v-else
v-show
当条件为false的时
v-if: 指令的元素, 不会渲染到dom中
v-show: dom增加一个行内样式display: none
v-on
作用: 绑定事件监听
简写: @
写法:没有参数的情况下, 可以不写(); 如果方法本身有一个参数, 会默认将原生事件event参数传递进去
如果传入某个参数, 同时需要event时, 可以通过$event传入时间
<div id="app">
<h2>点击次数: {{counter}}</h2>
<!--情况一: 方法没有参数-->
<button @click="btnClick1">按钮1</button>
<button @click="btnClick1()">按钮1</button>
<!--情况二: 如果方法有参数-->
<!--1.调用时不传入参数,会默认将event作为第一个参数传入-->
<button @click="btnClick2">按钮2</button>
<!--2.调用时不传入参数,那么参数为undefined-->
<button @click="btnClick2()">按钮2</button>
<!--情况三: 如果方法有参数,并且希望传入event-->
<button @click="btnClick3(10, $event)">按钮3</button>
</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
btnClick1() {
console.log('按钮1被点击');
},
btnClick2(payload) {
console.log('按钮2被点击', payload);
},
btnClick3(num, event) {
console.log('按钮3被点击', num, event);
}
}
})
</script>
修饰符 作用 实际调用
.stop 阻止事件冒泡 event.stopPropagation()
.prevent 阻止默认事件 event.preventDefault()
{keyCode I keyAlias} 监听某个键盘的键帽 –
.native 监听组件根元素的原生事件 –
.once 只触发一次回调 –
v-for遍历数组
// 遍历过程中, 没有使用索引值
<li v-for="item in names">{{item}}</li>
// 遍历过程中, 获取索引值
<li v-for="(item, index) in names">{{index + 1}} - {{item}}</li>
// 遍历对象的时候, 只有一个值, 活得的是value
// 获取对象的key和value
<li v-for="(value, key) in names">{{value}} - {{key}}</li>
// 获取对象的key和value和index
<li v-for="(value, key, index) in names">{{value}} - {{key}} - {{index}}</li>
官方推荐, 使用v-for的时候, 加上一个 key属性
图1
key的作用是为了高效的更新虚拟DOM
key要具有唯一性, 不然就没意义
<li v-for="(item, index) in names" :key="item">{{index + 1}} - {{item}}</li>
v-model表单绑定
实现表单元素和数据的双向绑定
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
cosnt app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
// 界面的message数据改了, data里面的message就改变了, 是双向的
可以将v-model用于textarea元素
<textare v-model="message"></textare>
<p>输入内容: {{message}} </p>
其他方法实现双向绑定
// v-bind绑定一个value属性
// v-on指令给当前元素绑定input事件
// 下面代码 等同于 使用v-model
<div id="app">
<input type="text" :value="message" @input="message = $event.target.value">
{{message}}
</div>
cosnt app = new Vue({
el: '#app',
data: {
message: '你好'
}
})v-model结合radio类型使用
<div id="app">
<label for="male">
<inout type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="male">
<inout type="radio" id="female" value="女" v-model="sex">nv
</label>
<h2>您选择的性别是: {{sex}}</h2>
</div>
cosnt app = new Vue({
el: '#app',
data: {
sex: '男'
}
})
v-model结合checkbox类型使用
单选框文字部分也可以选中
// 需求: 是否同意该协议, 同意后下一步
<div id="app">
<label for="agree">
<inout type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<buttion :disabled="!isAgree">下一步</button>
</div>
cosnt app = new Vue({
el: '#app',
data: {
isAgree: false
}
})
// 点击
多选框
<div id="app">
<label for="agree">
<inout type="checkbox" value="足球" v-model="hobbies">足球
</label>
<label for="agree">
<inout type="checkbox" value="篮球" v-model="hobbies">篮球
</label>
<label for="agree">
<inout type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
</label>
<h2>您的爱好是: {{hobbies}}</h2>
</div>
cosnt app = new Vue({
el: '#app',
data: {
isAgree: false,
hobbies: []
}
})
v-model结合select类型使用
下拉框单选
v-model绑定的是一个值
当选中option中一个时, 会将它对应的value赋值到mySelect中
<select v-model="mySelect">
<option value="apple">苹果<option>
<option value="orange">橘子<option>
<option value="banana">香蕉<option>
</select>
<p>您最喜欢的水果: {{mySelect}}</p>
下拉框多选
v-model绑定的是一个数组
当选择多个值时,会将选中的option对应的value添加到数组mySelect中
<select v-model="mySelect" multiple>
<option value="apple">苹果<option>
<option value="orange">橘子<option>
<option value="banana">香蕉<option>
</select>
<p>您最喜欢的水果: {{mySelect}}</p>
值绑定
含义: 动态的给value赋值
1 在前面的value中的值, 都是在定义input的时候直接给定的
2 但真实开发中, input的值可能是从网络获取或定义在data中的
3 可以通过v-bind:value动态的给value绑定值
<div id="app">
<label v-for="item in nums" :for="item">
<inout type="checkbox" value="item" :id="item" v-model="hobbies">{{item}}
</label>
<h2>您的爱好是: {{hobbies}}</h2>
</div>
cosnt app = new Vue({
el: '#app',
data: {
hobbies: [],
nums: ['篮球', '足球', '羽毛球']
}
})
修饰符
lazy修饰符
前景: v-model默认是在input事件中实时同步输入框的数据的 (容易同步的过于频繁 )
作用: 可以让数据只有在失去焦点或回车时才会更新
<input type="text" v-model.lazy="输入">
number修饰符
前景: 默认情况下, 在输入框中无论输入字母还是数字, 都会被当做字符串类型进行处理
作用: 当做数字类型进行处理
trim修饰符
前景: 输入的内容首位容易有空格
作用: 可以过滤掉内容左右两边的空格
检测数组更新
Vue是响应式, 所以当数据发生变化时, Vue会自动检测数据变化, 视图会发生对应的更新.
Vue中观察数据编译的方法 – 用它们改变数组会触发视觉更新
数组响应式方法 作用
push() 在数组中最后增加元素
pop() 删除数组中最后一个元素
shift() 删除数组中的第一个元素
unshift() 在数组最前面添加元素
splice() 删除 / 插入 / 替换元素
sort() xx
reverse() xx
数组未响应 作用
filter() xxxxxxx
concat() xxxxxxx
slice() xxxxxxx
计算属性 computed
使用: 需要将多个数据结合起来进行显示的时候
<div id='app'>
// 使用拼接的方法 -- 语法太过繁琐
<h2>{{firstName + '' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
// 使用方法
<h2>{{getFullName()}}</h2>
// 使用计算属性 -- 看起来最舒服 最好
<h2>{{fullName}}</h2>
</div>
const app = new Vue({
el: '#app',
data:{
firstName: 'li',
lastName: 'er'
},
// 计算属性
computed: {
fullName: function () {
reture this.firstName + '' + this.lastName
}
},
// 方法
methods: {
getFullName () {
reture this.firstName + '' + this.lastName
}
}
})总的来说，学习Vue.js是一次富有挑战且收获颇丰的经历。它以其独特的响应式数据绑定、组件化开发理念、强大的指令系统以及完善的路由和状态管理工具，为我打开了前端开发的新世界。
通过深入学习和实践Vue.js，我不仅掌握了现代前端开发的核心技术，也提升了自身的编程思维和问题解决能力。Vue.js的组件化思想让我理解了如何将复杂的应用拆分为可复用和易于管理的部分，而响应式数据绑定则让我体验到了高效的数据处理和视图更新。
此外，Vue.js丰富的生态系统和活跃的社区也为我的学习提供了巨大的支持。无论是遇到技术难题还是寻求最佳实践，都能在社区中找到答案和灵感。
然而，学习Vue.js并非一蹴而就的过程，需要持续的努力和实践。在未来的工作和学习中，我将继续深化对Vue.js的理解和应用，不断探索其新的特性和最佳实践，以期在项目开发中实现更高的效率和更好的用户体验。
最后，我要强调的是，虽然框架和技术工具为我们提供了便利，但真正优秀的开发者不仅要有扎实的技术基础，更需要具备良好的问题解决能力、团队协作精神和创新思维。因此，在学习Vue.js的过程中，我也时刻提醒自己，要不断提升这些软实力，以适应快速变化的前端开发环境，成为一名全面发展的优秀开发者。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
