|
vue格式
?? ?<div id="app">
?? ??? ?<p>{{ msg }}</p>
?? ?</div>
?? ?<script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: '',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? msg: ''
? ? ? ? ? ? }
? ? ? ? })
?? ?</script>
事件修饰符
?? ?.stop阻止冒泡
?? ?.prevent 阻止默认行为（跳转）
?? ?.capture 实现捕获触发事件的机制
?? ?.self只有事件发生在自身元素上才触发 并不会阻止其他元素的冒泡
数据双向绑定
vue数据双向绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图也跟着变化，视图变化，数据也随着发生变化
其核心是Object.defineProperty()
Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）
全局过滤器Vue.filter()
过滤器用作一些常见的文本格式化，用在插值表达式，全局的过滤器，进行时间的格式化
?? ?<p>{{ msg | msgFormat(arg)}}</p>
?? ?Vue.filter('msgFormat', function(msg, arg) {
?? ??? ?return msg.replace(/xx/g, arg)
?? ?})
msg | msgFormat 固定格式
msgFormat 过滤器名
arg参数
使用 Vue.directive() 定义全局的指令
// 参数1：指令名称 定义的时候不加v- 调用的时候加v-（文本框中）
// 参数2：一个对象，有一些指令相关的函数，可以在特定的阶段，执行相关的操作
? ? Vue.directive('focus', {
? ? ? ? bind: function (el, binding) {
? ? ? ? ?? ?// 每当指令绑定在元素上时，就会立即执行这个函数，只执行一次
? ? ? ? ? ? // 这个el以一个原生的js对象
? ? ? ? ? ? // 元素刚绑定指令的时候，还没有插入到DOM中去，这时候调用focus没有用
? ? ? ? ? ? // el.focus();失效
? ? ? ? ? ? // 和样式相关的操作放在bind中
? ? ? ? ? ? el.style.color = binding.value
? ? ? ? },
? ? ? ? inserted: function (el) {
? ? ? ? ?? ?// inserted表示元素插入到 DOM中的时候，会执行此函数（触发一次）
? ? ? ? ?? ?el.focus();
? ? ? ? ?? ?// 和js行为相关的操作放在inserted中
? ? ? ? },
? ? ? ? updated: function (el) {
? ? ? ? ?? ?// 当VNode更新的时候，会执行updated，可能会触发多次
? ? ?? ?}
? ? })
// 自定义全局按键修饰符
?? ?Vue.config.keyCodes.f2 = 113;
私有过滤器和私有指令
?? ?var vm = new Vue({
?? ??? ?el: '',
?? ??? ?data: {},
?? ??? ?methods: {},
?? ??? ?filters: {
?? ??? ??? ?// 如果私有过滤器和全局过滤器名称一致，优先调用私有过滤器
?? ??? ??? ?dateFormat: function(){}
?? ??? ?},
?? ??? ?// 定义私有指令fontsize
?? ??? ?directives: {
?? ??? ??? ?'fontsize': function(){}
?? ??? ?}
?? ?})
Vue生命周期
?? ?var vm = new Vue({
?? ??? ?el: '',
?? ??? ?data: {},
?? ??? ?methods: {},
?? ??? ?// 创建阶段四个函数
?? ??? ?beforeCreate() {
?? ??? ??? ?// 第一个周期函数，实例完全被创建前执行它
?? ??? ??? ?// data和methods中的数据还没有被初始化，el也没有
?? ??? ??? ?this.方法不可以
?? ??? ??? ?不能获得DOM节点。
?? ??? ?}
?? ??? ?created() {
?? ??? ??? ?// 在created中，data和methods中的数据都已初始化，el还是没有
?? ??? ??? ?this.方法可以
?? ??? ??? ?不能获取DOM元素
?? ??? ?}
?? ??? ?beforeMount() {
?? ??? ??? ?完成了 el 和 data 初始化
?? ??? ??? ?表示模板已经在内存中编译完成，但尚未把模板挂载到页面中
?? ??? ??? ?不能获取DOM元素
?? ??? ?}
?? ??? ?mounted() {
?? ??? ??? ?模板已经挂载到页面中，可以看到渲染好的页面
?? ??? ??? ?可以获取DOM元素
?? ??? ?}
?? ??? ?// 运行阶段
?? ??? ?beforeUpdate() {
?? ??? ??? ?页面中的数据还是旧的，data中的数据是最新的，页面和data数据还未同步
?? ??? ?}
?? ??? ?updated() {
?? ??? ??? ?页面和data中数据同步，都是最新
?? ??? ?}
?? ??? ?// 销魂阶段（页面关闭）
?? ??? ?beforeDestory() {
?? ??? ??? ?实例身上所有的data和methods，以及过滤器、指令都处于可用状态，没有真正销毁
?? ??? ?}
?? ??? ?destoryed() {
?? ??? ??? ?实例完全销毁，实例中的数据、方法、过滤器、指令都已不可用
?? ??? ?}
?? ?})
vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应，也就是说，jQuery中ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。
?? ?this.$http.get('/someUrl', [options]).then(function(response){
? ? ?? ?// 响应成功回调
? ? }, function(response){
? ? ? ? // 响应错误回调
? ? });
? ? 或者
? ? Vue.http.get('/someUrl', [options]).then((response) => {
? ? ? ?? ?// 成功回调函数
? ? }).catch((error) => {
? ? ? ??? ?// 错误回调函数，会在整个请求过程中监听错误
? ? })
vue动画
?? ?.v-enter,
? ? .v-leave-to {
? ? ?? ?opacity: 0;
? ? ?? ?transform: translateX(150px);
? ? }
? ? /* 入场动画 */
? ? .v-enter-active,
? ? /* 离场动画 */
? ? .v-leave-active {
? ? ?? ?transition: all .5s ease;
? ? }
?? ?<!-- 使用transition元素，把需要被动画控制的元素包裹起来 -->
? ? <transition>
? ? ?? ?<p v-if="flag">哈哈哈哈哈哈</p>
? ? </transition>
还有钩子函数半场动画。。。
? ??
组件：组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的
功能模块，我们需要什么功能，就可以去调用对应的组件即可。
模块化（Node.js）: 是从代码逻辑的角度进行划分的。方便代码分层开发，保证每个功能模块的职能单一
组件化（Vue.js）: 是从UI界面的角度进行划分。前端的组件化，方便UI组件的重用
组件创建
?? ?<div id="app">
?? ??? ?<!-- 把组件的名称以HTML标签的形式，引入到页面中 -->
?? ??? ?<!-- 驼峰命名就取消大小写，中间加 - -->
? ? ? ? <!-- <my-comp></my-comp> -->
? ? ? ? // 全局组件
?? ??? ?<mycomp></mycomp>
?? ??? ?// 私有组件
?? ??? ?<mycomp1></mycomp1>
?? ?</div>
?? ?<!-- 在被控制#app外面，使用template元素，定义组件的HTML模板结构 -->
?? ?<template id="temp">
?? ??? ?<div>
?? ? ? ? ? ?<h3>通过template元素，在外部定义的组件。有代码的提示和高亮</h3>
?? ? ? ?</div>
?? ?</template>
?? ?// 私有组件
?? ?<template id="temp1">
?? ?</template>
?? ?
?? ?<script>
?? ??? ?// 全局组件
?? ??? ?Vue.component('mycomp', {
?? ??? ??? ?template: '#temp'
?? ??? ?})
?? ??? ?var vm = new Vue({
?? ??? ??? ?el: '',
?? ??? ??? ?data: {},
?? ??? ??? ?methods: {},
?? ??? ??? ?// 在实例内部定义私有组件
?? ??? ??? ?components: {
?? ??? ??? ??? ?mycomp1: {
?? ??? ??? ??? ??? ?template: '#temp1'?
?? ??? ??? ??? ?}
?? ??? ??? ?}?? ??? ?
?? ??? ?})
?? ?</script>
组件中的data
?? ?Vue.component('comp', {
? ? ?? ?template: '<h1>这是全局组件---{{msg}}</h1>',
? ? ?? ?// 组件中的data 必须是一个方法，返回一个对象
? ? ?? ?data() {
? ? ?? ??? ?return {
? ? ?? ??? ??? ?msg: '这是组件中的data数据'
? ? ?? ??? ?}
? ? ?? ?}
? ? })
?? ?
|