Vue基本学习-阿里云开发者社区

-------------------Vue页面基本构成-------------------
<!DOCTYPE html>

-----------------------Vue简介-----------------------
框架：封装与业务无关的重复代码，形成框架
MVVM架构：
Model：数据模型，负责数据存储（后台业务逻辑/数据库）
View：视图层，负责页面展示（HTML）
View Model（Vue）：负责业务逻辑处理（比如Ajax请求等），对后端获取的数据 [Model] 进行加工后交给视图 [View] 展示。
是View与Model的连接器，View与Model通过ViewModel实现双向绑定。
Vue.js：是目前最流行的、国产的前端MVVM框架。
中心思想：一些都是组件，组件实例之间可以嵌套。
Vue核心：
DOM监听：视图层发生变化，DOM监听到之后，会传到逻辑层进行处理
数据绑定：逻辑层把数据处理完成之后，通过数据绑定，把处理后的结构返回给视图层

v-model 指令（将用户的输入同步到视图上）
能轻松实现表单输入和应用状态之间的双向绑定
双向绑定
指的是我们在vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据
v-model = 变量
v-model 指令只能用在, ,等这些表单元素上 -----------------------Vue案例-----------------------  <div id="app"> { {msg}} <input v-model="val_input" /> <button @click="handleClick">按钮</button> </div> <script src="../js/vue.js"></script>  <script> new Vue({ // new Vue：View Model实现者 el: '#app', // 选择器解析范围：通过ID属性，关联视图View层 data: { // 数据对象：关联数据模型Model层 msg:"hello vue3", val_input:"中国", }, /** <pre><code> * View与Model通过ViewModel实现双向绑定 */ watch: { // 监听数据变化 View数据改变，Model更新 val_input(newValue, oldValue) { console.log(`val_input的值： ${oldValue} 变成 ${newValue}`); } }, methods: { // 定义方法（对数据加工处理） Model数据改变，View更新 handleClick:function(){ this.msg = '触发点击事件'; } } }); </script> </code></pre>---------------------Vue插值显示--------------------- 插值表达式：将双大括号中的数据替换成对应属性值进行展示 JSON数据 数字 字符串 插值表达式  <h1>{ { msg }}</h1>  { { 10 }}  <h1>{ { "string" }}</h1>   <h1>{ { 1+1 }}</h1> <h1>{ { 'hello'+msg}}</h1>  <h1>{ { 2>3?'true':'false' }}</h1> ---------------------Vue指令--------------------- 指令（Directive）是特殊的带有 v- 前缀的特性 当表达式的值改变时，将某些行为应用到DOM上 书写规范： 任意 HTML 元素的开始标签内 <pre><code>注意：一个开始标签内可写入多个指令，多个指令间使用空格分隔 </code></pre><hr> v-model 指令（将用户的输入同步到视图上） 能轻松实现表单输入和应用状态之间的双向绑定 双向绑定 指的是我们在vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据 v-model = 变量 <pre><code>v-model 指令只能用在<input>, <select>,<textarea>等这些表单元素上 </code></pre><hr> v-bind 指令（绑定 HTML 元素的属性） v-bind可以在其名称后面带一个参数，参数通常是HTML元素的特性（attribute）， v-bind是动态绑定指令，默认情况下自带属性的值是固定的，为了能够动态的给这些属性添加值可以使用v-bind指令 v-bind:属性名 = ‘表达式’ <pre><code>简写形式：v-bind可以省略，直接书写为 :属性名 = ‘表达式’ </code></pre><hr> v-on 指令 为 HTML 元素绑定事件监听 v-on：事件名称 =‘函数名称()’ 表达式可以是一个方法的名字或一个内联语句 简写语法：@事件名称 =‘函数名称()’ 注：函数定义在 methods 配置项中 <pre><code>v-on后面可以增加修饰符 .stop：调用event.stopPropagation() 阻止事件冒泡 .prevent : 调用event.preventDefault() .self : 只当时间是从侦听器绑定的元素本身触发时才触发回调 .{keycode} : 只在指定键上触发回调 </code></pre><hr> v-show 指令 控制切换一个元素的显示和隐藏 v-show = ‘表达式’ 根据表达式结果的真假，确定是否显示当前元素 true表示显示该元素； false表示隐藏该元素 <pre><code>默认情况下，如果没有写入表达式，那么为false </code></pre><hr> v-if指令 被称为条件渲染指令，它根据表达式的真假来插入和删除元素 v-if = 表达式 根据表达式结果的真假，确定是否显示当前元素 true表示显示该元素；false表示隐藏该元素 v-else指令 v-else指令为v-if添加一个“else块”，v-else元素必须立即跟在v-if元素的后面，否则不能被识别 v-else 后面不需要表达式 v-if为true，后面的v-else不会渲染到HTML v-if为false，后面的v-else才会渲染到HTML v-if与v-show区别 v-show指令的元素始终会被渲染到HTML 它只是简单地为元素设置CSS的style属性。当不满足条件的元素被设置style="display:none"样式 v-if指令满足条件是，会渲染到html中，不满足条件时，是不会渲染到html中的 v-if 指令有更高的切换消耗 v-show 指令有更高的初始渲染消耗 <pre><code>如果需要频繁切换使用 v‐show 较好，如果在运行时条件不大可能改变使用v‐if 较好 </code></pre><hr> v-for 指令 遍历 data 中的数据，并在页面进行数据展示 v-for = ‘(item, index) in items’ item 表示每次遍历得到的元素 index 表示item的索引，可选参数（从0开始） items表示数组或者对象 ---------------------Vue前后台交互Axios--------------------- Axios基本介绍 定义：axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端 作用 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) ---------------------Vue实例生命周期--------------------- Vue实例生命周期 生命周期：每个vue的实例从构造函数（被创建）开始到被回收销毁（垃圾回收）的整个存在的时期。 生命周期函数/钩子函数：在生命周期中被自动调用的函数。 生命周期或钩子函数的用途 在对象从创建到被回收的整个过程中会在不同的时期有不同的钩子函数，我们可以利用不同时期的钩子函数去完成不同的操作。 beforeCreate（创建前）组件实例刚被创建，组件属性计算之前，比如data属性等等 created（创建后）组件实例刚创建完成，属性已经绑定，当时DOM还未生成，$le属性还不存在 beforeMount(载入前) 模板编译、挂载之前 mounted（载入后）模板编译、挂载之后 beforeUpdate（更新前）组件更新之前 updated（更新后）组件更新之后 beforeDestroy（销毁前）组件销毁前调用 destroyed（销毁后）组件销毁后调用 --------钩子函数----------- created 实现函数自执行 mounted 发起后端请求，取回数据 接收页面之间传递的参数 子组件向父组件传递参数 ---------------------Vue前后台交互Axios全局拦截器--------------------- 全局拦截器 interceptors 全局拦截器 在发送请求或响应请求被 then 或 catch 处理前拦截它们 作用 发送请求之前拦截，可以对请求数据进行处理，比如给每一个请求都添加上token或者给请求统一添加一些内容 在响应请求之前拦截，我们可以对返回的数据进行二次的加工 ---------------------Vue过滤器--------------------- Vue.js 过滤器 Vue.js支持在{ {}}插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母的大写、货币的千位使用逗号分隔等 过滤器的定义方法 过滤的规则是自定义的，通过给Vue示例添加选项filters来设置 过滤器是 JavaScript 函数，因此可以接收参数 { { message | filterA('arg1', arg2) }} 过滤器可以串联 { { message | filterA | filterB }} filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。 然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

Vue基本学习

热门文章

最新文章

相关电子书