Vue.js(2) 入门指南：从基础知识到核心功能
我相信一万小时定律，不相信天上掉馅饼的灵感和坐等的成就。做一个自由而自律的人，势必靠决心认真地活着
文章目录
- 前言
- 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 大门的第一步，同时也期待你在未来的学习过程中不断进步，成为一名优秀的前端工程师！