Vue入门基础笔记
VUE笔记(MVVM 数据驱动视图)
1.绑定元素
var app = new Vue({
//el 就是 element 不能使用html body 只能使用普通元素
el: '#app',
data: {
message: 'Hello Vue',
url: 'http://www.baidu.com/',
isLogin: true,
seen: true,
fruits: ['苹果','香蕉','菠萝'],
htmlStr: '你好
'
},
//事件名不得和data属性重名
methods:{
//dosomething:function(){}
dosomething()=>{
}
},
//计算属性
computed:{
dosome:() => 112
}
})
2.模板语法(高级模板引擎) 传送门
2-1插值（文本）
- 响应式 数据发生改变 message也跟随发生变化
{{ messsage }}
- 单次插值 使用v-once指令
{{ message }}
2-2 指令 （指令 (Directives) 是带有 v- 前缀的特殊特性）
2-2-1 单向绑定 ‘v-bind’ && ‘:’
百度
//简写 可以省略 v-bind
百度
2-2-2 双向绑定 v-model
//文本域
//复选框 选中是否会改变isLogin
2-2-3 事件绑定 v-on
//简写 省略 v-on
2-2-4 条件渲染 v-if （和v-show虽然效果达到一致但是本质存在区别) 对应 v - else
-
seen 为 true 或者 false
现在你看到我了
-
与 v-model 结合使用
//点击复选框随即更改 seen //根据 seen 判断是否渲染现在你看到我了
2-2-5 列表渲染 v-for
-
{{item}}
2-2-6 v-text
//等同
{{ message }}
2-2-7 v-cloak (隐藏未编译的 Mustache 标签直到实例准备完毕 网速差可能会出现{{ message }} 闪烁 用户体验差)
//css
[v-cloak] {
display: none;
}
//html
{{ message }}
2-2-8 v-html
2-2-9 v-show(实际是对标签的DOM操作 display:none 只是对其隐藏)
hahah
2-2-10 v-once 仅仅只渲染一次 后期message发生改变也不会发生更改
{{ message }}
2-2-11 v-pre 跳过这个元素和它的子元素的编译过程
{{ this will not be compiled }}
3.组件 传送门
3-1注册组件
- 全局注册
Vue.component('my-component-name', {
template=``,
//功能
})
- 局部注册 (使用babel 和 webpack 以及ES2015 )
//引入 每个.vue都是一个组件
import App from './App.vue'
//注册
new Vue({
components: { App },
router,
template: '3-2组件通信 传送门
- 父子组件 父组件给子组件传递数据通过props传递 单向数据流
示例父组件
<template>
<div>
//通过v-bind 动态赋值
<Header :user="user"></Header>
<router-view></router-view>
<Footer></Footer>
</div>
</template>
<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
export default {
//导航守卫
async beforeRouteEnter(to,from,next){
try {
const {data:user} = await axios.get('/api/session')
next(vm => {
vm.user = user
})
} catch(e) {
// statements
console.log(e);
}
},
data() {
return {
user:null
}
},
components: {
Footer,
Header
}
}
</script>
<style>
/*css*/
</style>
子组件
<script>
export default {
//可以通过this访问user
//可以当作局部
props:['user'],
data() {
return {
//也可以这样来做 counter独立 也可以修改
counter:this.user
}
}
}
</script>
props验证 详细看官方文档 传送门
举例
//
props:{
user:{
type:Object,
default:null
}
}
//
props:{
user:[String,Number]
}
4.生命周期 传送门
- beforeCreate
- 实例初始化之后调用，这里拿不到el,data数据
- created
- 示例创建之后，这里可以访问到 data 中的数据，但是拿不到el
- beforeMount
- 挂载元素之前，还没有渲染DOM
- mounted
- 挂载渲染已完成，DOM数据完成更新
- beforeUpdate
- 数据更新时调用，DOM还没有得到更新
- updated
- 数据更新后调用，DOM已得到更新
- beforeDestroy
- 示例销毁之前
- destroyed
- 示例销毁之后调用，已经销毁了，不再管理模板
- errorCaptured
- 当捕获一个来自子孙组件的错误
- activated
- 组件激活时调用
- deactivated
- 组件停用时调用
5.路由 传送门
5-1-1 安装
npm install vue-router
5-2-2 使用(事例)
//组件引入
import VueRouter from 'vue-router'
import Register from './components/Register.vue'
import Home from './components/Home.vue'
import Login from './components/Login.vue'
import List from './components/common/List.vue'
import Create from './components/common/Create.vue'
import Topic from './components/common/Topic.vue'
import Edit from './components/common/Edit.vue'
import Aside from './components/common/profile/Aside.vue'
import Info from './components/common/profile/Info.vue'
import Admin from './components/common/profile/Admin.vue'
export default new VueRouter({
routes: [{
path: '/',
component: Home,
//子路由 如果你做sap页面会用到
children:[
{
path:'/',
component:List
},
{
path:'/Create',
component:Create
},
{
name:"topic",
path:'/topic/:id',
component:Topic
},
{
name:"edit",
path:'/edit/:id',
component:Edit
},
{
path:'/setting/info',
component:Aside,
children:[
{
path:'/setting/info',
component:Info
},
{
path:'/setting/admin',
component:Admin
}
]
}
]
},
{
path: '/register',
component: Register
},
{
path: '/login',
component: Login
}
]
})
5-2-1 导航守卫 传送门
- beforeRouteEnter （可用于解决页面刷新后 后台数据未及时获取导致页面闪烁）
举例
//必须有to,from,next
async beforeRouteEnter(to,from,next){
try {
const {data:user} = await axios.get('/api/session')
//beforeRouterEnter 是在导航确认前被调用 组件还未创建 无法访问this 可用vm访问
//确认 next()才能进入你导航进入的组件 类似于设置一道关卡，next 放行
next(vm => {
vm.user = user
})
} catch(e) {
// statements
console.log(e);
}
}
- beforeRouteUpdate（当前路由改变，但是该组件被复用时调用 可以访问this）
- beforeRouteLeave （路由离开时调用,可以访问this）
6.使用 json-server 来模拟数据接口
6-1-1 安装
npn i -g json-server
6-2-1 命令行 启动接口服务
// 最后一个是 模拟数据的文件名 举例list.json
json-server --watch list.json
6-3-1 接口测试工具
postman
6-4-1增删改查
- GET/list 查询所有
- GET/list/id 查询单个
- POST/list 添加
- DELETE/list /id 根据 id 删除
- PATCH/list/id 根据 id 修改