Skip to content

Latest commit

 

History

History
304 lines (239 loc) · 6.34 KB

遇到的问题.md

File metadata and controls

304 lines (239 loc) · 6.34 KB

博客问题记录链接

vue第一天

<script>
	script:src
	new vue({
		el:'#app',
		data:{

		}
		method:{

		}
	})	
</script>
  1. 引入vuejs
  2. 实例化vue
  3. 双向数据绑定v-model
  4. 事件绑定v-on:click
  5. 事件修饰符v-on:click.prevent
  6. v-if;v-show;v-for
  7. method中的方法最好不要使用箭头函数，因为this会指向window，本来的话指向new出来的vue实例可以直接访问到data中的数据便于数据的操作

this的指向问题

  1. 在node执行环境中，外部直接执行，this指向module.exports是一个全局对象，如果
this.foo='bar'
console.log(this)//在node执行环境下，输出{foo:'bar'}

new关键字的作用过程

es6部分

  1. let；const最主要的特性是创建了块作用域，所有的变量在作用域可以被访问
  2. let在同一作用域不可重复声明同名变量
  3. const亦是如此，且是只读不可变的常量，可以配合对象结构赋值拿到想到的方法不必全部加载
  4. 函数rest参数直接拿到剩余传入的参数
  5. 匿名函数，函数表达式可以使用箭头函数
  6. 匿名函数无法使用arguments
  7. 箭头函数自动绑定this，绑定到父级上下文环境，且无法再次手动绑定，不可用于构造函数

Vue第二天

  1. 视图中的数据需要在data中初始化定义赋值才可以使用
  2. 每一个vue实例都可以直接访问data中的数据
  3. 想要数据更新，必须在vue实例创建时显示声明在data中
const data = {
	title:hello
}
const vm = new vue({
	el:#app,
    data
})
vm.title === data.title//true

动态绑定html属性

  • v-bind
  • v-bind跟上的属性值是一个js表达式
  • 在绑定class时，给一个对象的形式，配置类名和布尔值
<a v-bind:href="'/todos?id' + todo.id">aaa</a>

const vm = new vue({
	el:#app,
    data:[
    	todos:{
        
        }
    ]
})
  • 控制兄弟元素的显示隐藏可以放在template标签中统一控制，只渲染兄弟元素
  • 使用v-if好

自定义指令相关

  • 全局自定义指令
  • 实例自定义指令
  • 自定义指令使用驼峰命名后在使用时需要改成v-auto-focus的形式
  • 自定义指令传值，通过binding对象拿
  • 自定义指令
    • 名字
    • 钩子函数(==bind,inserted,update,componentUpdated,unbind==)
      • el: 作用元素
      • bing: 获取指令的传值

Vue第三天

计算属性

  • 计算属性本质是方法，若不需要参数的情况下，但有缓存，计算属性更好

hash过滤

  • 原始数据放到全局
  • 在全局对数据进行过滤
  • data内存储过滤好的数据
  • window.loctaion.hash拿到hash
const todos = [
	{id: 1, title: 'eat', completed: false},
    {id: 2, title: 'sing', completed: true},
    {id: 3, title: 'chat', completed: false},
]
const filiter = {
	all: () => todos,
    active: () => todos.filiter(t => t.!completed)
    completed: () => todos.filiter(t => t.completed)
}



window.onhashchange = () => {
	let hash = window.location.hash.substr(2)
    hash = hash === '' ? 'hash' : hash
    app.filiterTodos = filiter[hash] && filiter[hash]()
}

使用watch选项监控data中数据的变化

  • 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
watch:{
	todos:{
    	handler (val,oldval){
        	this.filiterTodos = filiter[this.path]()
        	window.localStorage.setItem('todos',JSON.stringify(val))
        },//这个函数不能用箭头函数
        deep:true//监视对象时需要深度watch
    }
}

组件部分

  • 组件本身是一个私有作用域，不能直接访问到vue实例，和组件，

    • 第一个参数是组件名称
    • 第二个参数是一个对象
      • template 视图 需要有一个跟节点包裹
      • data 是一个函数，return对象数据

  • 局部组件(内部可以嵌套全局组件，但不可嵌套局部组件)

new Vue({
	el:'#app',
    components:{
    	app:{
        	templete:'<div>hello</div>'
        }//如果此处的对象由别的app.js到处了window.app对象就可以直接写出es6，键值一致的模式
        或者就是如上写标签对象的形式
    }
})

子组件中嵌套子组件是

;
(function(window){
	const template = `
		<div>
			<app-navbar></app-navbar>
			<app-sidebar></app-sidebar>	    
	    </div>
		</div>
	`
    const App = {
        template,
        components:{
        	AppNavbar:Navbar,//直接声明组件对象{组件名，导出的组件对象}
        	// AppNavbar:{template:'<h1>123</h1>'}
        	AppSidebar:Sidebar//直接声明组件对象{组件名，导出的组件对象}
        }
    }

    window.App = App
})(window,Navbar,Sidebar)
  • 全局组件(通用)
Vue.component('button-counter',{
	template:'<button @click='count++'>You clicked me {{count}} times<>',
    data(){
    	return {
            conunt:0
        }
    }
})
<button-counter></button-counter>

Vue-router

npm i -S Vue-router
  1. 引入js文件
  2. 创建路由文件
  3. 创建路由实例
  4. 配置routes选项是一个数组，里面是对象
  5. 到处路由
  6. 挂载到vue实例router选项

路由文件.js

;
(function(window,VueRouter){
    const router = new VueRouter({
        routes : [
        {path:'/',component:Home},
        {path:'/foo',component:{template:'<div>foo</div>'}}
        ]
    })
    window.router = router
})(window,VueRouter)

main.js

;
(function(window,Vue,router){
	el:'#app',
    router,
    data:{},
    template:'<App></App>'
    component:{App}
})(window,Vue,router)

Vue第四天

组件化构建的思路

  • index.html <div id='app'></div>
  • App.js
const template = `<app-header></header>`

const App = {
template
component:{
AppHeader:Header
}/*根组件加载子组件*/
}
window.App = App
  • main.js
const vm = new Vue({
el:'#app',
router,
data:{},
template:'<App></App>'
component:{
App
}
})
  • Header.js
const template = ``//视图
const Header = {
template
}//
window.Header=Header

  • 公用组件放到根组件，动态的组件有路由分配

  • 组件都是私有作用域

  • 加入axios后，请求一般在组件的钩子函数中，此时需要回调函数注意访问数据data，this指向问题，一般将.then()的函数改为箭头函数解决this指向问题