vue内部指令
1. v-if
用于判断是否加载DOM
2. v-show
DOM已经加载，用于判断是否显示
<div v-if="doLogin">登录</div>
<div v-show="isLogin">登录</div>
3. v-for
解决模板循环问题
//模板写法
<li v-for="item in items">
{{item}}
</li>
//js方法
var app = new Vue({
el:"#app",
data: {
item:[20,23,18.65.32,19]
}
})
4. computed
function sortNumber(a,b) {
return a-b;
}
computed: {
sortItems: function() {
return this.item.sort(sortNumber);
}
}
在vue低版本中，data 和computed可以一样
在高版本中，不允许同名称
5. v-text & v-html
- v-text
防止javascript加载出错时变量暴露在页面 - v-html
在javascript里写有html ，使用v-html输出
6.v-on 事件监听
change input 事件 defineProperty()
全局API
vue.nextTick()
理解为子组件更新的保守策略
自定义指令
自定义指令中传递的三个参数
el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。
自定义组件
注意 组件中的data 必须以函数的形式返回
Vue.component('rachel',{
data: function() {
return { name: 'rachel'}
},
template: `<div>全局注册 我的名字{{name}}</div>`
})
var app = new Vue({
el: '#app',
})
父子组件通信方式
选项/数据
选项/组合
parent
通过this.children数组中
节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信
mixins
选项/ 其他
实例属性
vm.$el
vue实例使用的根DOM元素
有用的笔记
Object.assign 将所有的对象合并为一个新对象
<!-- 失活的组件将会被缓存！-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
一些疑惑
1. 自定义组件 .sync修饰符用法
[v] slot使用方法：
Vue.component() 要定义在new Vue()前面
data 要通过function return 出去
注意自定义元素的闭合，语法错误检查要仔细
https://cn.vuejs.org/v2/guide/components-slots.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<title>Set</title>
</head>
<body>
<h1>Vue.prop</h1>
<hr>
<div id="app">
<navigation-link url="navlink">
hello,我是自定义组件的插槽函数，现在你看到我啦
</navigation-link>
</div>
<script type="text/javascript">
Vue.component('navigation-link', {
data:
function() {
return {
url: 'www.com'}
}
,
template: `<div><a
v-bind:href="url"
class="nav-link"
> template中的a链接
</a>
<slot></slot>
</div> `
});
var app = new Vue({
el:'#app',
data: {
msg:'hello',
}
});
</script>
</body>
</html>
2. 如何使用Vue.set 改变一个数组
源码
对象定义访问器属性定义可枚举 可配置
chidlObj.dep.depend
深度观察 依赖收集器进行收集
对数组方法进行检测 push unshift push splice
dependArray 依赖收集 深度遍历 如果数组是引用类型 仍然可以触发响应
reactiveSetter 判断是不是NAN
对watcher对象进行update操作
dep.js
nodity 触发所有更新对象的watcher方法
hycsun.me/vue-design/
网友评论