demo vue

1.1.1. 官网

1)英文官网:https://vuejs.org/

2)中文官网:https://cn.vuejs.org/

1.1.2. 介绍描述

1)渐进式 JavaScript 框架

2)作者: 尤雨溪(一位华裔前 Google 工程师)尤大大

3)作用: 动态构建用户界面

1.1.3. Vue 的特点

1)遵循 MVVM 模式

2)编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3)它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目

1.1.4. 与其它前端 JS 框架的关联

1)借鉴 angular 的模板和数据绑定技术

2)借鉴 react 的组件化和虚拟 DOM 技术

1.1.5. Vue 扩展插件

1)vue-cli: vue 脚手架

2)vue-resource(axios): ajax 请求

3)vue-router: 路由

4)vuex: 状态管理

5)vue-lazyload: 图片懒加载

6)vue-scroller: 页面滑动相关

7)mint-ui: 基于 vue 的 UI 组件库(移动端)

8)element-ui: 基于 vue 的 UI 组件库(PC 端)

9)它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目

使用 vue-cli 创建模板项目:

先安装node.js,这里安装的是12.14.1

http://nodejs.cn/

使用vue创建项目:

npm install -g vue-cli

node -v 

npm -v 

vue init webpack vue_demo

cd vue_demo

npm install

npm run dev

访问: http://localhost:8080/

Vue的基本使用

代码格式:

Hello,  {{username}}

new  Vue({

el:  '#app',

data:  {

username:  'vue'

}

})

1.3. 模板语法

1.3.1. 模板的理解

1)动态的 html 页面

2)包含了一些 JS 语法代码

a.双大括号表达式

b.指令(以 v-开头的自定义标签属性)

文本

    Message:{{msg}}

原始HTML

   

Using mustaches:{{rawHtml}}

   

Using v-html directive:

1.3.2. 双大括号表达式

1)语法: {{exp}}

2)功能: 向页面输出数据

3)可以调用对象的方法

表达式

    {{number + 1}}

    {{ok?'YES':'NO'}}

    {{message.split('').reverse().join('')}}

1.3.3. 指令一: 强制数据绑定

1)功能: 指定变化的属性值

2)完整写法:

v-bind:xxx='yyy' //yyy 会作为表达式解析执行

3)简洁写法:

:xxx='yyy'

1.3.4. 指令二: 绑定事件监听

1)功能: 绑定指定事件名的回调函数

2)完整写法:

v-on:keyup='xxx'

v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'

3)简洁写法:

@keyup='xxx' @keyup.enter='xxx'

1.4. 计算属性和监视

1.4.1. 计算属性

1)在 computed 属性对象中定义计算属性的方法

2)在页面中使用{{方法名}}来显示计算的结果

1.4.2. 监视属性

1)通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性

2)当属性变化时, 回调函数自动调用, 在函数内部进行计算

1.4.3. 计算属性高级

1)通过 getter/setter 实现对属性数据的显示和监视

2)计算属性存在缓存, 多次读取只执行一次 getter 计算

1.5. class 与 style 绑定

1.5.1. 理解

1)在应用界面中, 某个(些)元素的样式是变化的

2)class/style 绑定就是专门用来实现动态样式效果的技术

1.5.2. class 绑定

1):class='xxx'

2)表达式是字符串: 'classA'

3)表达式是对象: {classA:isA, classB: isB}

4)表达式是数组: ['classA', 'classB']

1.5.3. style 绑定

1):style="{ color: activeColor, fontSize: fontSize + 'px' }"

2)其中 activeColor/fontSize 是 data 属性

1.6. 条件渲染

1.6.1. 条件渲染指令

1)v-if 与 v-else

2)v-show

1.6.2. 比较 v-if 与 v-show

3)如果需要频繁切换 v-show 较好

4)当条件不成立时, v-if 的所有子节点不会解析

1.7. 列表渲染

1.7.1. 列表显示指令

数组: v-for / index

对象: v-for / key

1.7.2. 列表的更新显示

删除 item

替换 item

1.7.3. 列表的高级处理

列表过滤

列表排序

1.8. 事件处理

1.8.1. 绑定监听:

1)v-on:xxx="fun"

2)@xxx="fun"

3)@xxx="fun(参数)"

4)默认事件形参: event

5)隐含属性对象: $event

1.8.2. 事件修饰符

1).prevent : 阻止事件的默认行为 event.preventDefault()

2).stop : 停止事件冒泡 event.stopPropagation()

1.8.3. 按键修饰符

1).keycode : 操作的是某个 keycode 值的键

2).keyName : 操作的某个按键名的键(少部分)

1.9. 表单输入绑定

1.9.1. 使用 v-model 对表单数据自动收集

1)text/textarea

2)checkbox

3)radio

4)select

实例:

运行的效果图

1.13.1. 常用内置指令

1)v-text : 更新元素的 textContent

2)v-html : 更新元素的 innerHTML

3)v-if : 如果为 true, 当前标签才会输出到页面

4)v-else: 如果为 false, 当前标签才会输出到页面

5)v-show : 通过控制 display 样式来控制显示/隐藏

6)v-for : 遍历数组/对象

7)v-on : 绑定事件监听, 一般简写为@

8)v-bind : 强制绑定解析表达式, 可以省略 v-bind 简写为:

9)v-model : 双向数据绑定

10)ref : 指定唯一标识, vue 对象通过$refs 属性访问这个元素对象

11)v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

1.13.2. 自定义指令

1)注册全局指令

Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()

})

// 注册一个全局自定义指令 `v-focus`

Vue.directive('focus', {

  // 当被绑定的元素插入到 DOM 中时……

  inserted: function (el) {

    // 聚焦元素

    el.focus()

  }

})

2)注册局部指令

directives : {

'my-directive' : {

bind (el, binding) {

el.innerHTML = binding.value.toupperCase()

}

}

}

3)使用指令

v-my-directive='xxx'

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。

componentUpdated:指令所在组件的 VNode及其子 VNode全部更新后调用。

unbind:只调用一次,指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

钩子函数参数

指令钩子函数会被传入以下参数:

el:指令所绑定的元素,可以用来直接操作 DOM 。

binding:一个对象,包含以下属性:

name:指令名,不包括 v- 前缀。

value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。

oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。

arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。

modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。

vnode:Vue 编译生成的虚拟节点。移步VNode API来了解更多详情。

oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的dataset来进行。

例子:

使用钩子函数自定义乘方的指令

你可能感兴趣的:(demo vue)