Vue | 学习笔记
2019-10-22 本文已影响0人
StAndres
CDN
<!-- 必备基本库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 路由 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- HTTP请求，官方不推荐，已废弃 -->
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- HTTP请求，官方推荐 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
实例化Vue对象
new Vue({
el: '',
data: '',
methods: {...},
filters: {...},
components: {...},
beforeCreate(){...},
created(){...}
...
})
v-cloak解决插值表达式的闪烁问题
<h1 v-cloak>{{ title }}</h1>
v-html用于插入html代码，插值表达式和v-text都会转义成字符串
<div v-html="htmlContent"></div>
v-bind用于标签的属性值绑定，简写为：,v-bind中可以写合法的js表达式
<input :value="value">
v-on事件绑定机制，简写为@
<button @click="clickEvent">clickTest</button>
事件修饰符, e.g.: .stop
<div @click="clickEvent" style="background-color: gray">
<button @click.stop="clickEvent">Click Event</button>
</div>
自定义过滤器（可用于格式化时间之类的）filter
过滤器调用时采用就近原则，即会优先调用私有过滤器
<div id="app">{{ val | filterFunc }}}</div>
// Global Filter
Vue.filter('filterFunc', function(v){
// ...
})
// Private Filter
var vm = new Vue({
el: '#app',
data: {
val: ''
},
methods: { ... },
filters: { // 两个条件：过滤器名称 和 处理函数
filterFunc： function() {
...
}
}
})
自定义指令 directive
<div v-mineCommand></div>
// Global directive
Vue.directive('mineCommand', { // 定义时不需要v-
// 函数第一个参数必须为el，表示被绑定的那个元素
bind: function(el) {...}, // 每当指令绑定到元素上时执行，触发一次
// 和样式相关的操作一般都放在bind中
inserted: function() {...}, // 元素插入到dom中时执行，触发一次
// 和js行为有关的最好放在inserted中，防止不生效
update: function() {...} // 当组件更新时执行，可能会触发多次
})
// Private Filter
var vm = new Vue({
el: '#app',
data: {
val: ''
},
methods: {...},
filters: {...},
directives: {
'mineCommand': {
bind: function(){...},
...
},
'newCommand': function(el, bindting){...} // 简写，相当于直接把方法写在bind与update中
}
})
HTTP请求：vue-resource
this.$http.get('/url').then(function(){...})
全局配置HTTP接口根域名
注意配置后每次发送请求时url路径应以相对路径开头，前面不能带/
Vue.http.options.root = 'http://www.liulongbin.top:3005/api/'
this.$http.get('getlunbo').then(res => {})
Vue动画 + Animate.css用法
- 将需要动画效果的元素放再transition标签内
- 控制需要动画效果的元素的显示
- 在css内设置动画效果 或 直接引用Animate.css
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">...</transition>
创建/使用组件的几种方法
1.使用Vue.extend()创建全局组件，使用Vue.component()装载
var com1 = Vue.extend({
template: '<h1>ComPonent1</h1>'
})
Vue.component('com1', com1)
// 简写方式（省去中间值）
Vue.component('com2', Vue.extend({
template: '<h1>ComPonent2</h1>'
}))
// 简写方式（省去中间值，省去Vue.extend）
// 注意！无论是哪种方式创建的组件，template指向的模板内容必须有且只有唯一的一层元素
Vue.component('com3', {
template: '<h1>ComPonent3</h1>'
})
2.使用template标签
<div id="app">
<com4 />
</div>
<!-- 核心：用template标签创建 -->
<template id="tem4">
<div>
<h1>Tem4</h1>
</div>
</template>
Vue.component('com4', {
template: '#tem4'
})
组件使用data时必须使用为一个 function 并有一个 return
Vue.component('...', {
template: '...',
data: function () {
return {
...
}
}
})
组件切换方式：Vue提供的 component 标签
思路：点击事件切换:is内的属性名称
附：动画效果使用 transition 标签包裹，通过mode属性设置组件切换时的模式
<component :is=""></component>
父组件 与 子组件
- 子组件默认是无法访问到父组件data上的数据和methods中的方法;
- 父组件可以在引用子组件的时候通过属性绑定（v-bind）的形式把数据传递给子组件，子组件在收到数据后要按照属性名原样在 props 内定义一遍;
- 父组件向子组件传递方法需使用事件绑定机制 v-on:funcName="parentFuncName" 并在子组件方法中绑定
// 父组件向子组件传参
props: ['parentData']
// 父组件向子组件传递方法
var com = {
template: 'tem',
methods: {
temClick(){ // 子组件的点击事件
this.$emit('funcName') // parentMeth即为父组件传递的方法
this.$emit('funcName', 123) // 第二个参数开始即为传参
}
}
}
通过 $refs 获取DOM
<p id="gg" ref="gg">In God We Trust</p>
Vue.$refs.gg
vue-router 路由步骤
- 设置组件模板对象
- 定义路由匹配规则
- 将路由规则对象注册到实例，用于监听与展示
- 官方不推荐使用vue-router，因为已经停止更新
// 组件模板对象
var loginCom = {
template: '<h1>Login</h1>'
}
// 路由匹配规则
var routerObj = new VueRouter({
routes: [
{ path: '/login', component: loginCom },
{ path: '/main', component: mainCom }
]
})
new Vue ({
...
//将路由匹配规则对象注册到实例，用于监听与展示
router: routerObj
})
