订阅号做流量 那些电影如何链接网站,百度推广优化怎么做,wordpress在线培训,个人主页设计模板一、Vue
1. 简介 Vue (读音 /vjuː/#xff0c;类似于 view) 是一套用于构建用户界面的 JavaScript 框架 它基于标准 HTML、CSS 和 JavaScript 构建#xff0c;并提供了一套声明式的、组件化的编程模型 由个人维护#xff1a;尤雨溪#xff0c;华人 官网 Vue.js - 渐进…一、Vue
1. 简介 Vue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的 JavaScript 框架 它基于标准 HTML、CSS 和 JavaScript 构建并提供了一套声明式的、组件化的编程模型 由个人维护尤雨溪华人 官网 Vue.js - 渐进式 JavaScript 框架 | Vue.js
2. 基本使用
Vue的页面使用方式 在页面中直接引入Vue核心库的js文件 该方式只是为了让开发者在学习Vue语法时可以快速掌握 实际上Vue并不适合直接使用 页面方式进行语法定义更推荐使用模块化方式
使用步骤 获取Vue核心库的js文件 通过地址 https://cdn.jsdelivr.net/npm/vue/dist/vue.js 下载 在页面中引入Vue script srcjs/vue.js/script 创建Vue实例并应用
3. 调试工具
安装vue-devtools插件便于在Chrome浏览器中调试vue
步骤 打开Chrome浏览器的扩展程序——更多扩展程序 将vue_devtools_6.5.0.crx拖放到扩展程序中
在VSCode中安装Vue相关插件Vue Language Features、vue-helper
二、基本交互
1. 插值表达式
语法 {{ }} 由两对大括号组成称为“Mustache”语法
作用用于在页面标签中插入值进行数据的绑定显示且当值发生变化时标签会重新渲染加载称为响应式特性即数据状态同步操作
用法标签{{ Vue对象数据仓库变量|JS表达式|JS内置对象 }}/标签 只能用在标签中间的内容位置
2. 指令
2.1 简介
指令 (Directives是用来扩展html标签的功能以v-作为前缀
2.2 常用指令
指令取值作用v-textstring更新元素的textContentv-htmlstring更新元素的innerHTMLv-onFunction | Object | Array | 行内表达式绑定事件监听器用于事件绑定v-showany根据表达式的boolean结果切换元素的 display CSS 属性控制元素的显示隐藏v-if、v-else-if、v-elseany根据表达式的boolean结果执行元素的创建和删除操作控制元素的显示隐藏v-forArray | Object | number | string基于数据多次渲染元素或模板块用于循环数据v-bindany动态的为标签绑定属性用于属性绑定
3. 双向数据绑定
v-model双向数据绑定指令 取值随表单控件类型不同而不同 限制仅限于表单中可输入或者可选择的元素如input、select 、textarea
四、数据控制
1. 计算属性
计算属性computed也是用来存储属性数据的但具有以下特点 可以对数据进行逻辑处理操作实现数据包装 计算属性通常依赖于当前Vue对象中的普通属性 当依赖的普通属性发生变化时计算属性也会变化实现数据监控
2. 监视器
监视器watch是用来监视数据的变化对数据进行监控
new Vue({watch: {变量:function(newValue, oldValue){}, // 监控方法变量:{handler: function(newValue, oldValue){}, // 监控方法deep: true // 开启深度监视}},
})
五、实例属性和方法
1. 简介
通过Vue实例对象可以直接访问的属性和方法称为实例属性和实例方法
实例属性和方法都以 $ 开头
2. 实例属性 vm.$el当前Vue实例使用的根 DOM 元素 vm.$refs当前Vue实例容器中定义了ref属性的所有 DOM 元素
3. 实例方法 vm.$mount手动挂载Vue实例 vm.$destroy销毁Vue实例只会销毁vue的实例对象不会销毁与其关联的页面容器 vm.$nextTick在DOM更新完成后再执行回调函数一般在修改数据之后使用该方法以便获取更新后的DOM并操作
六、模板
模板template就是定义Vue时指定的页面结构构成 默认使用el选项指定的挂载元素的内容来构成页面模板同时指定挂载位置 可以使用 template 选项独立定义页面模板此时el挂载元素的内容将被忽略
七、生命周期
Vue实例从创建到销毁的过程称为生命周期共有八个阶段 beforeCreate、created beforeMount 、mounted beforeUpdate、updated beforeDestroy、destroyed
在生命周期的每个阶段都提供了相应的钩子函数可以在钩子函数中执行操作控制生命周期的各个阶段
八、组件
1. 简介
Component 组件是可复用的Vue实例可以将项目中重复出现的页面结构定义为组件
组件会带有一个名称可以把组件作为自定义元素来使用相当于是自定义了一个标签
组件分类 全局组件在所有Vue实例中都可以使用 局部组件只能在构建组件的 Vue实例的容器范围内使用
2. 定义组件
通过选项 components:{} 来定义
用法
new Vue({el: #app,components: {comp-a: {template: h3{{ msg }}/h3,data() {return {msg: aaa}}}}
})
九、组件间数据传递
1. 组件间的关系
页面组件的关系结构是一个由许多组件构成的树状结构组件间存在着两种关系父子关系、非父子关系
默认情况下每个组件实例都是独立的组件间无法直接访问数据因此需要进行组件间的数据传递也称为组件间的通信 2. 父子组件间的数据传递
2.1 父向子传递数据
技术属性绑定数据拦截
步骤 父组件在调用子组件时以属性绑定的方式将要传递的数据绑定在子组件标签上 在子组件对象中使用props选项声明获取的数据进行绑定属性的拦截即接收来自父组件的数据
2.2 子向父传递数据
技术事件监听事件触发
步骤 父组件在调用子组件时监听子组件触发的自定义事件并在父组件中定义回调方法用来接收数据 在子组件中使用vm.$emit(事件名,数据)触发自定义事件
