VUE
2021-04-30 16:28:47 22 举报
AI智能生成
登录查看完整内容
VUE
作者其他创作
大纲/内容
VUE
简介
特点
轻量级的框架
双向数据绑定 MVVM
插件化
虚拟DOM
VUE不支持IE8
相关工具
npm: Nodejs下的包管理器。
webpack:通过CommonJS的语法,把发布的静态资源合并和打包
异步IO多级缓存,增量编译速度快
webpack主要是用于vue和React较多
串联式模块加载器以及插件机制
支持 SourceUrls 和 SourceMaps,易于调试
解决原本网页加载速度慢问题,因为会将资源压缩打包等
vue-cli:生成Vue工程模板,包含基础的依赖库,只需要 npm install就可以安装
es6 ECMAScript 语法标准
commonJS :规范模块同步加载--每一个文件就是一个模块,拥有自己独立的作用域
安装
CDN
NPM
语法
模板语法
初始化
插值
文本
数据绑定用 {{...}}(双大括号)的文本插值
属性
v-bind--<div v-bind:class=\"{'class1': use}\">
表达式 {{ ok ? 'YES' : 'NO' }}<br>
指令 v- 前缀
参数
<a v-bind:href=\"url\">
<a v-on:click=\"doSomething\">
修饰符 用. 指令应该以特殊方式绑定 <form v-on:submit.prevent=\"onSubmit\"></form>
用户输入 v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定
过滤器 | {{ message | capitalize }} filters: {
缩写
v-bind 缩写 ----<a :href=\"url\"></a>
v-on 缩写 ---v-on:click=\"doSomething\" ---@click=\"doSomething\"
条件语句
v-if 指令
<template v-if=\"ok\">
v-else
<div v-else>
v-else-if
v-show --使用 v-show 指令来根据条件展示元素:
循环语句
v-for
<li v-for=\"site in sites\">
v-for 迭代对象
<li v-for=\"value in object\">
<li v-for=\
v-for 迭代整数
<li v-for=\"n in 10\">
计算属性
计算属性关键词: computed。
监听属性
属性 watch
样式绑定
<div v-bind:class=\"{ active: isActive }\"></div>
表单
.lazy
v-model中添加修饰符可以转变change同步----<input v-model.lazy=\"msg\" >
.number
自动将用户的输入值转为 Number----<input v-model.number=\"age\" type=\"number\">
.trim
去前后空格---<input v-model.trim=\"msg\">
组件
注册组件
全局组件
局部组件
Prop
prop 是子组件用来接受父组件值
动态 Prop
用 v-bind 动态绑定 props 的值到父组件的数据中
自定义事件 v-on 绑定自定义事件
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
<button-counter v-on:increment=\"incrementTotal\"></button-counter>
自定义指令
注册
Dom插入
bind 和 inserted
bind在inserted之前
bind 时父节点为 null
inserted 时父节点存在。
钩子
钩子函数
bind
inserted
update
componentUpdated
被绑定元素所在模板完成一次更新周期时调用。
unbind
路由
cnpm install vue-router
<router-link> 是一个组件
<router-link to=\"/foo\">Go to Foo</r
创建
1. 定义(路由)组件。
const Foo = { template: '<div>foo</div>' }
2. 定义路由
3. 创建 router 实例,然后传 `routes` 配置
const router = new VueRouter({ routes // (缩写)相当于 routes: routes})
4. 创建和挂载根实例。
const app = new Vue({ router}).$mount('#app')
<router-link
<router-link to=\"home\">Home
<router-link :to=\"'home'\">Home
<router-link :to=\"{ path: 'home' }\">Home
<router-link :to=\
replace
<router-link :to=\"{ path: '/abc'}\" replace></router-link> 导航后不会留下 history 记录。
append
<router-link :to=\"{ path: 'relative/path'}\" append>---当前 (相对) 路径前添加其路径
tag
<router-link to=\"/foo\" tag=\"li\">foo ---渲染成某种标签
active-class
设置 链接激活时使用的 CSS 类名
<router-link v-bind:to = \"{ path: '/route1'}\" active-class = \"_active\"
exact-active-class
当链接被精确匹配的时候应该激活的 class
event
明可以用来触发导航的事件
<router-link v-bind:to = \"{ path: '/route1'}\" event = \"mouseover\">
过渡 & 动画
<transition name = \"fade\">
Ajax
Vue.js 2.0 版本推荐使用 axios
0 条评论
回复 删除
下一页