Vue.js 互动版

vue.js 简介
一个渐进式前端框架 安装方式:直接引入、CDN、NPM 第一个vue.js实例 Hello World 通过构造器函数创建实例 响应式的数据(Data)属性与方法
数据绑定模版语法
模版中文本插值的“Mustache”语法 模版语法如何处理原始 HTML 数据绑定HTML特性(Attributes) JavaScript表达式 过滤器-可自定义的函数 指令(Directives) 通过计算属性处理逻辑
Class列表与Style样式的数据绑定
绑定Html Class对象语法 绑定Html Class数组语法 绑定内联样式Style对象语法 绑定内联样式Style数组语法
渲染指令
条件渲染指令 v-if template元素条件渲染 v-if 条件渲染 v-show 条件渲染 v-else 列表渲染指令 v-for template元素列表渲染 v-for
表单控件输入绑定
文本输入框 Text 多选框 Checkbox 单选按钮 Radio 选择下拉列表 Selected 修饰符参数特性 lazy、number、trim
自定义指令
自定义指令基础(钩子函数) 指令实例属性 指令对象字面量 指令对象字面修饰符 自定义元素指令
自定义过滤器
自定义过滤器基础 双向自定义过滤器 过滤器的动态参数
方法与事件处理器
方法处理器 内联语句处理器 事件处理的修饰符 按键处理的修饰符
过渡和动画效果
过渡动画效果简介 CSS 过渡动画 过渡的CSS类名 过渡流程详解示例 渐近的动态过渡
组件
组件的注册组合构造 Props传递数据给子组件 动态Prop用作特性 通过 Props 绑定类型实现单双向绑定 自定义通信事件示例
在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

过滤器

Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”,以“管道符(|)”指示。过滤器本质上是一个函数,这个函数会接收一个值,将其处理并返回。

{{ message | uppercase }}

这里我们将表达式 message 的值“管输(pipe)”到内置的 uppercase 过滤器,这个过滤器其实只是一个 JavaScript 函数,返回大写化的值。Vue.js 提供数个内置过滤器,在后面我们会谈到如何开发自己的过滤器。

可以串联多个过滤器:

{{ message | filterA | filterB }}

html代码:  

<div id='demo'>
<span>{{msg | lowercase | capitalize}}</span>
</div>

javaScript代码:

 var data={msg:'heLLO!'};
 new Vue({
  el: '#demo',
  data: data
 })

运行结果为:Hello

练习字符串小写(lowercase)的过滤器。