![](https://img-blog.csdnimg.cn/7f786032e21a45e29749f13c44d4b328.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 80
Vue实战
编程圈子
编程圈子,谢厂节的博客
展开
-
Vue.js 学习14 集成H265web.js播放器实现webpack自动化构建
H265web.js 是一个用于在 Web 浏览器中播放 H.265 视频的 JavaScript 播放器。它支持在浏览器中直接解码 H.265 编码的视频流,提供了高效的视频播放体验。在 Element UI 项目中集成 H265web.js 可以让我们轻松实现 H.265 视频的播放功能。H265web.js 开源地址:文档地址:目前vue里集成H265web.js 还有一定的复杂度,本文作以详细介绍。原创 2024-01-31 14:11:31 · 1853 阅读 · 0 评论 -
Vue.js 学习1 入门
1.官网 :https://cn.vuejs.org/2.Hello world<html><head><script src="https://unpkg.com/vue/dist/vue.js"></script></head><body><div id="app"> {{ message }}</div><script>var app = new Vue({ el: '原创 2017-06-02 21:51:52 · 832 阅读 · 0 评论 -
Vue.js 学习2 实例
一、构造器每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的:var vm = new Vue({});实例化需要传入一个选项对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。 参考 :https://cn.vuejs.org/v2/api/1.全局配置Vue.config包含Vue的全局配置,可以在启动应用之前修改下列属性:silent取消Vue所有的日志与警告。原创 2017-06-02 22:16:11 · 719 阅读 · 0 评论 -
Vue.js 学习3 模板
模板语法Vue.js 使用了基于HTML的模板语法,允许开发者开明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML。 如果熟悉虚拟DOMain,可以不用写模板,直接与渲染(render)函数,使用可选的JSX讲法。一、插值1.文本 Mustache就去<span>Message:{{msg}}</span>Mustache标签将会被替代为对应数据对象上msg属性的原创 2017-06-02 22:46:29 · 682 阅读 · 0 评论 -
Vue.js 学习4 计算属性
要解决的问题:<div id="example"> {{ message.split('').reverse().join('') }}</div>模板内的表达式非常便利,但只用于简单的运算。在模板里放入太多的逻辑会让模板过于过重难以维护。 计算属性就是要简化模板里的逻辑。1.基础例子<div id="example"> <p>Original message: "{{ message原创 2017-06-02 23:00:44 · 618 阅读 · 0 评论 -
Vue.js 学习5 Class与Style绑定
一、绑定Html Class1.对象语法<div v-bind:class="{ active: isActive }"></div>与普通 class 并存:<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>也可以直接绑定数据里的一个对象<div v-bind:c原创 2017-06-02 23:19:38 · 725 阅读 · 1 评论 -
Vue.js 学习6 条件渲染与列表渲染
一、条件渲染1.v-if v-else<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>2.中v-if条件组<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p></template>v-else<div v-if="Math.random() > 0.5">原创 2017-06-03 10:18:00 · 1147 阅读 · 0 评论 -
Vue.js 学习7 事件处理器
1.监听事件<div id="example-1"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p></div>var example1 = new Vue({ el: '#example-1', data: { counter: 0 }})2.方法事件处原创 2017-06-03 10:37:19 · 502 阅读 · 0 评论 -
Vue.js 学习8 表单控件绑定
一、基础用法使用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>2.多行文本<span>Multiline message is:</span><p style="white-space:原创 2017-06-03 10:55:41 · 472 阅读 · 0 评论 -
Vue.js 学习9 组件
一、使用组件1.注册 创建一个Vue实例:new Vue({ el: '#some-element', // 选项})要注册一个全局组件,可以使用Vue.component(tagName,options)Vue.component('my-component', { // 选项})自定义标签名尽量使用w3c规则(小写,并包含一个短杠)。 组件在注册之后,便可以在父实例的模块中以原创 2017-06-03 11:37:52 · 1378 阅读 · 0 评论 -
Vue.js 学习10 Element基于Vue2.0的组件库
官网: http://element.eleme.io/#/zh-CN一、安装npmnpm i element-ui -SCDN<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"><!-- 引入组件库 --><script src="https:原创 2017-06-03 17:43:20 · 1509 阅读 · 0 评论 -
Vue.js 学习11 Mint UI基于Vue2.0的组件库
官网 http://mint-ui.github.io/#!/zh-cn安装npm install -g vue-clivue init webpack projectname修改main.jsimport Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'import App from './原创 2017-06-03 19:12:31 · 2303 阅读 · 0 评论 -
Vue.js 学习12 前端虚拟接口Mock.js的使用
Vue.js 学习12 前端虚拟接口Mock.js的使用一、简介二、上手使用1. 创建一个Vue项目2. 安装依赖3. 新建一个mockjs文件,输入代码:4. 其它文件内容App.vuemain.js三、运行测试四、 其它一些常用语法1. 占位符2. 模板一、简介Mock.js是一个基于NodeJS的用来模拟API的工具,可以方便让前端开发人员在开发过程中用来模拟API接口,方便与后端的联调工作,尤其方便在Vue项目中使用。官网地址:http://mockjs.com/代码托管地址:http原创 2020-09-11 11:20:13 · 422 阅读 · 0 评论 -
Vue.js 学习13 ElementUI项目中使用自定义组件
Vue ElementUI自定义组件原创 2022-10-13 20:07:37 · 784 阅读 · 0 评论 -
Vue 的单元测试入门 一、基本使用
使用JEST对vue程序进行单元测试一、说明二、安装三、上手1. 建一个待测试的vue文件一、说明官方文档地址:https://jestjs.io/docs/zh-Hans/getting-started二、安装可以使用yarn安装 或 npm安装:yarn add --dev jestnpm install --save-dev jest三、上手1. 建一个待测试的vue文件...原创 2020-12-24 17:00:14 · 499 阅读 · 0 评论 -
Vue 的单元测试入门三、UniApp的View组件测试
Vue 的单元测试入门三、UniApp的View组件测试一、UniApp自动化测试快速开始二、上手1. 创建测试项目2. package.json 的 script节点新增节点三、运行测试四、测试用例重点1. 测试用例格式2. `beforeAll`3. 获取 page 对象4. 通过page获取对象5. page其它方法6. Element 模块一、UniApp自动化测试快速开始UniApp自动化测试目前只支持cli工程如果使用 HbuilderX 的项目,目前无法使用针对UI的单元测试。二、上手原创 2021-01-05 11:22:55 · 2282 阅读 · 5 评论 -
Vue 的单元测试入门二、进阶使用
Vue 的单元测试入门二、进阶使用一、 在vue项目中使用1. 建立一个vue项目。2. 修改引用二、添加配置文件1. jest.config.js2. 如果没有babel.config.js则创建三、创建一个待测试的类文件1. 创建 utils/validate.js2. 创建单元测试脚本 /test/unit/utils/validate.spec.js四、运行测试命令1. 批量运行单元测试2. 运行指定测试用例3. 其它命令五、jest常用断言语法1. toBe 值精准匹配2. 对象匹配检测3. 空值原创 2020-12-31 14:51:22 · 892 阅读 · 0 评论