Vue.js 入门指南：从基础知识到核心功能
我相信一万小时定律，不相信天上掉馅饼的灵感和坐等的成就。做一个自由而自律的人，势必靠决心认真地活着
文章目录
- 前言
- vue是什么?
- vue做什么?
- vue的核心功能
- 安装vue
- vue初体验
- vue配置选项
- 插值表达式
- 指令
- vue阻止默认行为
- 总结
前言
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它专注于视图层，并且非常易于学习，可以快速集成到现有项目中。
vue是什么?
- 库：jQuery是一个js库，只提供一些API给开发者
- UI框架：bootstrap、layui、layer 是UI框架，包含js、html、css 只是实现了一套支撑网站开发的常用控件(对话框，弹出框，tab页签…)
- JS框架：vue、react、angluar是js框架，纯js编写，提供了开发网站功能的标准(规则)，约定开发规则，通过这些规则组织代码功能
vue做什么?
Vue 主要用于开发单页面应用（SPA）。SPA 的特点是在首次加载时下载整个应用的代码，之后的所有交互都在客户端完成，无需重新加载页面，从而提供更流畅的用户体验
vue的核心功能
- 数据驱动试图
- 通过修改数据自动更新视图，减少了手动操作 DOM 的需求
- 双向数据绑定
- 数据和视图之间的同步更新，使得数据模型和视图保持一致
- vue是一个典型的MVVM思想的框架
- M是数据模型 model
- V是视图(界面) view
- VM是控制数据模型和视图的管理者
- 数据和视图之间的同步更新，使得数据模型和视图保持一致
- 组件化开发
- 将应用拆分为多个独立的组件，每个组件都有自己的模板、数据和方法，提高了代码的复用性和可维护性
- 将应用拆分为多个独立的组件，每个组件都有自己的模板、数据和方法，提高了代码的复用性和可维护性
安装vue
- 基础方式：使用
script标签引入 - 本地方式：下载vue文件并引入
- CDN 方式：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script - 项目阶段：使用 npm 安装
vue初体验
<!-- V 2.视图 -->
<div id="app">
<h3>{{msg}}</h3>
<input v-model="msg" type="text">
</div>
<!-- 引入vue核心js文件 -->
<script src="./vue.js"></script>
<script>
// VM 3.控制数据模型和视图管理者
const vm = new Vue({
el: '#app',
// M 1.数据模型
data: {
msg: 'Hi vue'
}
})
</script>
vue配置选项
- el选项
- 作用：指定vue实例管理的dom元素
- 类型：字符串(选择器)或dom元素
<div id="app"> <!-- 被管理的容器才可以使用vue提供的功能 --> {{msg}} </div> <script src="./vue.js"></script> <script> // 初始化vue实例,vue实例就是vm的意思 const vm = new Vue({ // 初始化的配置对象,里面有很多选项 // el === element 元素,标签,容器 // 值是:选择器 || DOM元素 // el指定当前vue实例管理的容器是谁 // el:document.querySelector('#app'), // dom元素 // el不能指定 html 和 body 容器 Do not mount Vue to <html> or <body> - mount to normal elements instead. el:'#app', // 选择器 data:{ msg:'Hi vue' } }) </script> - data选项
- 作用：定义vue实例的数据对象，这些数据是响应式的，即数据变化时，视图会自动更新
- 类型：对象或函数 (在组件中通常使用函数)
总结<div id="app"> <!-- 模板中直接使用数据的名称即可 --> <h3>{{msg}}</h3> <h6>{{user.name}}</h6> </div> <script src="./vue.js"></script> <script> // 在全局环境下，在浏览器的控制台直接访问vm，通过vm可以修改数据，演示数据驱动视图更新 // 在配置选项中声明的data数据，在vue初始化的时候，挂载在vue实例上的数据名称：$data，所以访问数据是：vm.$data // 通过vm.$data.msg=要改的内容(例如:123) 即可修改数据，也看到了驱动视图更新 // 访问data中的数据，需要通过vm.$data才能访问到，略微有些麻烦 // 所以:vue实例代理了$data中的数据，直接通过vm就可以操作和访问数据 vm.msg = 123 const vm = new Vue({ el: '#app', // data作用 : data: { msg: 'Hi vue', user: { name: '' } } }) </script>- 通过实例化可以直接访问data中的数据
vm.msg，在模板中使用数据的字段名称即可 - 在data中显性声明的数据，都是响应式数据，可以数据驱动视图
- 在模板中使用的数据，建议在data中提前声明，即使没有值也需要声明
- methods选项
- 定义vue实例的方法，这些方法可以在模板中调用，也可以在其他地方通过vue实例调用
- 类型：对象，键是方法名，值是方法的实现
<div id="app"> <h2>{{msg}}</h2> <p>{{say()}}</p> <p>{{say2()}}</p> <p>{{say3()}}</p> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { msg: 'Hi vue' }, methods: { // vue实例可以调用这个函数 vm.say() // 在模板中也可以使用这个函数,直接使用函数名称调用即可 say(), 函数的返回值会输出在视图中 // 在函数中的 this 就是vue实例,也就是vm,所以就可以访问数据 // 写法1 : 传统写法 say: function () { console.log('Hello呀') return '你好 ' + this.msg }, // 写法2 : 属性简写 say2() { return '你好2 ' + this.msg }, // 写法3 : 箭头函数 say3: () => { // 箭头函数没有this，也就是访问不到vue实例，操作不了数据 // 建议：在methods中尽量不使用箭头函数，因为经常会使用vue实例 return '你好3 ' + this.msg } } }) </script>
插值表达式
- 概念：在vue中
{{}}语法，叫做插值表达式，就是输出值的语法 - 插值表达式中可以写
- data数据字段名称
- methods函数的名称，进行调用
- 任意js表达式 (加减运算，三元运算)
<div id="app">
<!-- 使用数据 -->
<p>{{msg}}</p>
<!--使用函数 -->
<p>{{fn()}}</p>
<!-- 使用js表达式 -->
<p>{{1+count}}</p>
<p>{{count>10?'大':'小'}}</p>
<!-- 不能使用js语句 -->
<p>{{if(true){}}}</p>
<p>{{var a = 10}}</p>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hi vue',
count: 9
},
methods: {
fn() {
return '函数的数据'
}
}
})
</script>
指令
就是一个以v-开头的标签属性，他们可以扩展标签原有的功能，这些指令的值可以是js表达式，当关联js表达式依赖的数据发生变化，对应的指令就会产生作用
v-model指令：双向数据绑定v-text、v-html指令：更新标签的内容- v-text：格式是文本，和innerText相似
- v-html：格式是html，和innerHTML相似
<div id="app"> <h3>{{msg}}</h3> <!-- 当局部更新标签内的文本,使用插值表达式 --> <div>你好 : {{strText}}</div> <!-- 当完整更新标签内的文本,使用v-text,同时存在的时候v-text生效 --> <!-- 动态渲染文本内容 --> <div v-text="strText"></div> <!-- 动态渲染html内容 --> <div v-html="strText"></div> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { msg: 'Hi vue', strText: '<b>我是文本</b>' } }) </script>v-show、v-if指令：控制元素的显示和隐藏- v-show：使用的是display:none | block |…
- v-if：元素的创建和移除
- 使用场景
- v-show：性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show
- v-if：能减少标签，状态切换次数少的时候，使用v-if
<div id="app"> <h3>{{msg}}</h3> <!-- 指令 v-sho：值是布尔类型,如果是js表达式,就看js表达式的执行结果,是真还是假 --> <!-- 如果是真显示 反之隐藏 --> <div v-show="isShow">指令 v-show</div> <!-- 指令 v-if：值是布尔类型,如果是js表达式,就看js表达式的执行结果,是真还是假 --> <!-- 如果是真创建 反之移除 --> <div v-if="isShow">指令 v-if</div> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { msg: 'Hi vue', isShow: true } }) </script>v-on指令：绑定事件- 语法：
v-on:事件名称= '触发事件的时候的处理逻辑(js表达式 | 函数实现)' - 简写：
@事件名称= '触发事件的时候的处理逻辑(js表达式 | 函数实现)'
总结：绑定函数的时候带不带括号<div id="app"> <h3>{{msg}}</h3> <div v-if="isShow">我是div标签</div> <br /> <!-- 点击隐藏上面的div标签 --> <!-- 1.指令绑定事件后指定:js表达式 --> <button v-on:click="isShow=false">隐藏容器1</button> <!-- 2.使用@可以简化v-on的使用 一样可以绑定事件 --> <button @click="isShow=false">隐藏容器2</button> <!-- 3.指令绑定事件后指定:函数 --> <!-- 3.1如果处理函数不需要传参,那么带不带括号效果都一样 --> <button @click="fn">隐藏容器3</button> <button @click="fn()">隐藏容器4</button> <!-- 3.2如果处理函数中需要事件对象 --> <!-- 如果绑定事件的时候，函数不带括号，触发函数的时候默认传入事件对象 --> <button @click="fn2">按钮1</button> <!-- 如果绑定事件的时候，函数带了括号，需要自己传入事件对象，vue提供了一个$event的参数 --> <button @click="fn2($event)">按钮2</button> <!-- 3.3如果处理函数中需要事件对象以及其它传参... --> <button @click="fn3($event,10)">按钮3</button> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { msg: 'Hi vue', isShow: true }, methods: { fn() { // 当需要处理复杂逻辑的时候，建议使用函数 this.isShow = false }, fn2(e) { console.log(e) }, fn3(e, num) { console.log(e, num) } } }) </script>- 如果需要接收事件触发的默认传参，不带括号
- 如果需要自己来进行传参，需要带括号，自己传实参
- 如果什么参数都不要，那么带不带都无所谓
- 语法：
v-for指令：遍历标签(容器)，需要依赖数据遍历- 数据类型：数组
v-for='(遍历时每项数据变量名称,索引变量名称) in data中数据(数组)' - 数据类型：对象
v-for='(属性值,属性名,索引) in data中数据(对象)' - 提升性能书写习惯：
v-for='' :key='指定的唯一标识'
<div id="app"> <h3>{{msg}}</h3> <ul> <!-- 使用v-for让li根据data中的arr数据进行遍历 --> <!-- 1.v-for='遍历时每项数据变量名称 in data中数据' --> <li v-for="item in arr" :key="item">{{item}}</li> <!-- 2.v-for='(遍历时每项数据变量名称,索引变量名称) in data中数据(数组)' --> <li v-for="(item,i) in arr" :key="i">{{item}}---{{i}}</li> <!-- 3.v-for='(属性值,属性名,索引) in data中数据(对象)' --> <li v-for="(v,k,i) in obj" :key="k">{{v}}---{{k}}---{{i}}</li> </ul> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { msg: 'Hi vue', arr: ['华晨宇', '钟南山', '邓紫棋'], obj: { name: '朴树', age: 40, sex: '男' } } }) </script>v--bind指令：动态绑定标签上的属性的值- 语法：
v-bind:属性名= '属性值' - 简写：
:属性名= '属性值'
<div id="app"> <h3>{{msg}}</h3> <button @click='fn()'>修改title属性值</button> <!-- 1.使用v-bind指令，完成修改属性的值 --> <div v-bind:title='title'>你还在么?</div> <!-- 2.简写方法 --> <div :title='title'>在啊</div> </div> <script src='./vue.js'></script> <script> const vm = new Vue({ el: '#app', data: { msg: 'Hi vue', title: '我是提示' }, methods: { fn() { this.title = '修改提示' } } }) </script>- 语法：
- 数据类型：数组
vue阻止默认行为
@click.prevent此时prevent叫做事件修饰符
总结
经过本次的学习，我们已经掌握了 Vue.js 的基本概念和核心功能。首先，我们了解到 Vue 是一种用于构建用户界面的 JavaScript 框架，它可以帮助我们更加高效地开发出响应式网页应用程序。其次，我们熟悉了 Vue 的安装过程以及初次体验 Vue 开发环境的方法。在此基础上，我们进一步探索了 Vue 的配置选项、指令、插值表达式等关键知识点，并学会了如何阻止默认行为。最后，通过对这些内容的综合运用，我们可以开始着手搭建自己的第一个 Vue 应用程序了！
希望这篇文章能够为你开启通往 Vue.js 大门的第一步，同时也期待你在未来的学习过程中不断进步，成为一名优秀的前端工程师！