VUE
2021-04-30 16:28:47 23 举报AI智能生成
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
语法
模板语法
初始化
new Vue({
el: '#app',
data: {
el: '#app',
data: {
插值
文本
数据绑定用 {{...}}（双大括号）的文本插值
属性
v-bind--<div v-bind:class="{'class1': use}">
表达式 {{ ok ? 'YES' : 'NO' }}<br>
指令
v- 前缀
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="(value, key) in object">
<li v-for="(value, key, index) in object">
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">
组件
注册组件
Vue.component(tagName, options)
全局组件
局部组件
Prop
prop 是子组件用来接受父组件值
动态 Prop
用 v-bind 动态绑定 props 的值到父组件的数据中
自定义事件
v-on 绑定自定义事件
v-on 绑定自定义事件
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
<button-counter v-on:increment="incrementTotal"></button-counter>
自定义指令
注册
例子：Vue.directive('focus', {
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. 定义路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/foo', component: Foo },
3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
routes // （缩写）相当于 routes: routes
})
4. 创建和挂载根实例。
const app = new Vue({
router
}).$mount('#app')
router
}).$mount('#app')
<router-link
<router-link to="home">Home
<router-link :to="'home'">Home
<router-link :to="{ path: 'home' }">Home
<router-link :to="{ name: 'user', params: { userId: 123 }}">User
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
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
0 条评论
下一页
