vue笔记

原创 63966249 随笔 经验 136阅读 2018-12-13 23:19:37 举报

使用步骤 支持IE9以上

百度搜索,最热门的vue.js开源

学好 数据结构算法(源码阅读)、计算机组成原理、编译原理(框架原理)dom diff

ES语法(尤其是核心特性) 设计模式 js函数式编程 linux PHP express http协议 koa 深入webpack 自己搭建cli vue源码 node源码 正则表达式

1、 引包,具备Vue对象
2、 启动Vue 通过new Vue(options)
3、 配置options选项对象
4、 el:'目的地' template: '模板' data: function() {
return {要使用的key:数据} }
}

5、页面中存在该目的地,目的地字符串描述同jq一样

new Vue({
el: '#app',
// el.document.getELementById('app') // 极度优化

template: '<div><h1>{{text}}</h1></div>'

data: function() {
retuen { text: 'hello' }
}
})

// data是一个函数,return一个对象,对象中的key, 可以直接在页面中使用。。。在js中的this.key名
data中的属性。。。在dom中直接用 在js中 this.xxx
components: key是组件名, value是组件对象
methods: 一班用来配合 xxx事件
props: 子组件接收的参数设置[ ‘title’ ]

插值表达式 {{表达式}} 必须在data函数中返回的对象中声明

对象: (不要连续3个{{{name:'jack'}}})

字符串 {{‘xxx’}}

判断后的布尔值 {{true}}

三元表达式 {{ true? '正确':‘错误’ }}

操作指令(在vue中提供对页面+数据更为方便的操作,这些操作叫指令)

v-text 元素的innerText的属性,必须是双标签

v-html 元素的innerHTML

v-if 判断是否插入这个元素 v-else-if (必须是相邻的DOM元素)

v-show 隐藏元素,如果确定要隐藏,会给元素的style加上display:none

v-for="(item, index) in stus(对象)" // 数组
stus: 对象 (value, key, index)in stus

数据绑定 给元素的属性赋值
v:bind: 原有属性名 = “”变量“” 或者简写 :属性名=“”变量“”(单向数据流,任何属性赋值)
v:model(双向数据绑定,vue实时监控属性,只能是具备value的元素)

事件绑定
v-on:click=" " 简写 => @click=“ ”
样式绑定
:class=""

组件:组件起来的部件
components: {(组件名)key : value(组件对象)}

父传子
父用子 先有子, 声明子 , 使用子
父传子 父传子(属性),子声明(收),子直接用(就是自己的一样)

公共组件: 放在全局
Vue.component('组件名',‘组件对象’)

过滤器 filter |filters &监视改动(类似v-model 但不仅仅是数据)
// 给数据添油加醋
全局:Vue.filter('过滤器名',‘过滤方式(fn)’)

    组件内: filters : {‘过滤器名’,‘过滤方式fn’}

// 监视复杂类型,无法监视的原因是因为监视的是对象的地址。。。地址没改,改的是同地址属性的值
监视单个watch

//  监视对象,写在函数内部,凡是函数内部有this,相关属性,改变都会触发当前函数
// 包含原值不变,缓存不调函数的优化机制
计算属性 computed 监视多个

slot插槽
内置的组件、相当于DOM留下的坑、<子组件>DOM</子组件>、
<slot name=""> </slot> slot(传递)动态的DOM、props是动态的数据

生命周期,钩子函数,事件函数(重点)/ 46分钟 (第四课)

beforeCreate // 组件创建之前, 只是初始化了事件等。。。
created //组件创建之后, 可以操作数据。。。并且可以实现vue =>对页面的影响,列如:发起ajax请求

// 自然发生
beforeMount // vue起作用,装载数据到DOM之前 vue启动前的DOM
mounted // 装载数据到DOM之后 vue启动后的DOM,只执行一次

// 基于数据改变 ,有数据才会触发
beforeUpdate // 改变前 可以获取原DOM
updated //改变后 可以获取新DOM

// 销毁,最终都是做一些其他功能的释放,列如:保存到缓存
beforeDestroy 销毁之前
destoryed 销毁后

activated 组件被激活了 // 被<keep-alive>包裹 created没有被包裹 vue内置组件 频繁创建销毁组件可以用到
deactiivated 组件被停用

$属性:$ref 获取组件内的元素
$parent : 获取当前组件对象的父组件
$root : 获取new Vue的实例 vm
$el : 组件对象DOM元素

// 我们希望在vue真正渲染DOM到页面以后,才做的事
this.$nextTick( 例如:this.$refs.input.focus() )

前端路由 Vue Router(根据不跳转页面做局部加载)
// 整个页面的所有资源会加载起来,而后端路由改变立刻会跳转,资源一多可能造成白屏、卡顿

1、引入vue-router(核心插件)对象

2、安装插件 Vue.use(插件对象) // 过程中会注册一些全局组件及给vm或者组件对象挂在属性

Vue.use(VueRouter) // VueRouter.install = fn(Vue)
// use : function (plugin) { plugin.install (Vue); }

3、创建一个路由对象
var router = new VueRouter

4、配置路由对象
router: [ { path: '/login', component: Login } ]

5、将配置好的路由对象关联到vue实例中
new Vue({
el: '#app',
router: router, // 不加这一步,会导致运行的时候说undefined对象取不到 matched
components: { app: App }
})

6、指定路由改变局部的位置(留坑)
var App = {
template: <div> <router-link :to="{ name: '/xxx' }"></router-link> // 绑定动态name <router-view></router-view> </div>
}

router-link tp ="/xxx" 命名路由
1、在路由规则对象中加入name属性
// router: [ {name: 'login', path: '/login', component: Login } ]

2、 在router-link中  :to =" { name = 'xxx' }"

给vm及组件对象挂载方式

// Vue的实例对象都继承原型
// 给所有new Vue() 的对象及子类对象都添加 $router 返回自己的某个属性
Object.defineProperty(Vue.prototype, '$router' , {
get: function get () {
return this._routerRoot._router
}
})

附上一个小白入门实战链接,代码都有注释:
https://github.com/zhangqian00/Vue2.x-mobileSystem

Vue响应式原理
https://blog.csdn.net/tangxiujiang/article/details/79594860

掘金文章
带你过源码https://juejin.im/post/5adff30f518825672d33d596

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复