vue入门002

最新推荐文章于 2023-05-17 19:46:30 发布

weixin_30301183

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量67

点赞数

原文链接：http://www.cnblogs.com/bevis126/p/9553091.html

版权

vue制作weibo
交互

vue-> 2.x
vue-resource ajax php (可以用wampserver搭建php,mysql环境)
服务器环境(node)

this.$http.get()/post()/jsonp()

this.$http({
url:地址
params:给后台提交数据,
method:'get'/post/jsonp
jsonp:'cb' //cbName
});
----------------------------------
vue事件:
@click="add"
数据:

data:{
userMsg:'',
msgDict:[],
url:'weibo.php',
totalPage :0,
nowpage:1
},

添加一条留言：

add:function () {
    if(this.userMsg=='') return
    this.$http.get(this.url, {
        params:{
            'act':'add',
            'content':this.userMsg
        }
    }).then(function (res) {
        this.msgDict.unshift({
            'content':this.userMsg,
            'time':res.data.time,
            'acc':0,
            'ref':0,
            'id':res.data.id
        })
        this.userMsg = ''
    })
},

View Code

获取某一页数据:
getPageData(1);

下面代码完善了页面的功能（添加，删除，赞，踩，翻页）

https://www.cnblogs.com/bevis126/p/9529451.html

----------------------------------
vue生命周期:

图示：

钩子函数:

created -> 实例已经创建 √
beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中 √

beforeDestroy -> 销毁之前
destroyed -> 销毁之后

2.x版本上面的流程不能用，用下面的流程，见图
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated

beforeDestroy
destroyed

var vm = new Vue({
el:'#app',
data:{
msg:'hello'
},
beforeCreate:function () {
alert('创建之前')
},
created:function () {
alert('实例已经创建')
},
beforeMount: function () {
alert('挂载之前')
},
mounted:function () {
alert('挂载之后')
},
beforeUpdate:function () {
alert('修改之前')
},
updated:function () {
alert('修改之后')
},
beforeDestroy:function(){
alert('销毁之前');
},
destroyed:function(){
alert('销毁之后');
}
})

document.onclick = function () {
vm.msg = 'world'
vm.$destroy()
}

----------------------------------
用户会看到花括号标记:

v-cloak 防止闪烁, 比较大段落（外层标签中），需要配合下面的CSS使用

<style>
[v-cloak]{
display: none;
}
</style>

----------------------------------

文字标签指令

<span>{{msg}}</span> -> v-text
{{{msg}}}2.x已经不支持 -> v-html

----------------------------------

计算属性的使用:

computed:{
b:function(){ //默认调用get
return 值
}
}　　

var vm = new Vue({
    el:'#app',
    data:{
        a:1,

    },
    computed:{
        b:function () {
            return this.a+11
        }
    }
})
document.onclick= function () {
    vm.a = 11
}

　　--------------------------

computed:{
　　b:{
　　　　get:
　　　　set:
　　}
}

var vm = new Vue({
    el:'#app',
    data:{
        a:1,

    },
    computed:{
        b:{
            get:function () {
                return this.a+11
            },
            set:function (val) {
                this.a = val
            }
        }
    }
})
document.onclick= function () {
    vm.b = 11
}

　　* computed里面可以放置一些业务逻辑代码，一定记得return
---------------------------------
vue实例简单方法:
vm.$el -> 就是元素

vm.$el.style.border='1px dotted red'

vm.$data -> 就是data
console.log(vm.$data)

vm.$mount -> 手动挂在vue程序

var vm = new Vue({
data:{
a:1,
}
}).$mount('#app')

或

vm.$mount('#app')

vm.$options -> 获取自定义属性

var vm = new Vue({
num:123,
show:function () {
alert('show')
},
data:{
a:1,
}
})

vm.$mount('#app')
console.log(vm.$options.num)
vm.$options.show()

vm.$destroy -> 销毁对象

vm.$log(); -> 查看现在数据的状态 //2.x版本已经取消

2.x API文档中的vm实例属性

vm.$data
vm.$props
vm.$el
vm.$options
vm.$parent
vm.$root
vm.$children
vm.$slots
vm.$scopedSlots
vm.$refs
vm.$isServer
vm.$attrs
vm.$listeners

---------------------------------
循环：
v-for="value in data"

会有重复数据？
track-by='索引' 提高循环性能 //2.x版本中已经去掉，改成v-bind:key='index'

track-by='$index/uid'

//下面这个例子添加不会报错
<script>
window.onload = function () {
var vm = new Vue({
data:{
arr:['abc','def','ghi']
},
methods:{
add:function () {
this.arr.push('jkl')
}
}
}).$mount('#app')

}
</script>
</head>
<body>
<div id="app">
<input type="button" value="添加" @click="add"></input>
<ul>
<li v-for="item in arr">
{{item}}
</li>
</ul>
</div>
</body>
</html>
---------------------------------
过滤器:

// 2.x里，这些内置过滤器已经不能用了，有其他方式代替

vue提供过滤器:
capitalize uppercase currency....

debounce 配合事件，延迟执行
数据配合使用过滤器:
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个从哪开始

filterBy 过滤数据
filterBy ‘谁’

orderBy 排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序

自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){

});

时间转化器
Vue.filter('formatDate',function (date) {
var oData = new Date(date*1000)
return oData.getFullYear()+'-'+(oData.getMonth()+1)+'-'+oData.getDate()+" "+ oData.getHours()+":"+oData.getMinutes()+":"+oData.getSeconds()
});

过滤html标记

双向过滤器:*

Vue.filter('filterHtml',{
read:function (input) {
return input.replace(/<[^<+]>/g,'')
},
write:function (val) {
console.log(val)
return val
}
})

数据 -> 视图
model -> view

view -> model
---------------------------------
v-text
v-for
v-html
指令: 扩展html语法

自定义指令:
属性:

钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

Vue.directive('red',{
inserted:function (el) {
el.style.backgroundColor='red'
}
})
<div v-html="msg" v-red></div>

或（带参数）：

Vue.directive('red',{
inserted:function (el,binding) { //binding是一个对象
el.style.backgroundColor=binding.value
}
})
<div v-html="msg" v-red="'blue'"></div>

打印出的binding的内容
//{name: "red", rawName: "v-red", value: "blue", expression: "'blue'", modifiers: {…}, …}
def:{inserted: ƒ}
expression:"'blue'"
modifiers:{}
name:"red"
rawName:"v-red"
value:"blue"
__proto__:Object

指令名称: v-red -> red

* 注意: 必须以 v-开头

拖拽:

Vue.directive('drag',{
inserted:function (el,binding) {
el.style.backgroundColor=binding.value
el.onmousedown = function (ev) {
var disX = ev.clientX - el.offsetLeft;
var disY = ev.clientY - el.offsetTop;

document.onmousemove = function (ev) {
var l = ev.clientX - disX
var t = ev.clientY - disY
el.style.left = l + 'px'
el.style.top = t + 'px'
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}

}
}
})

<div id="app">
<div v-drag="'blue'" :style="{'width':'100px','height':'100px','position':'absolute','top':0,'left':0}"></div>
<div v-drag="'red'" :style="{'width':'100px','height':'100px','position':'absolute','top':0,'right':0}"></div>
</div>
-------------------------------
自定义元素指令:（用处不大）
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});

2.x不支持
------------------------------------------------
@keydown.up
@keydown.enter

@keydown.a/b/c....

自定义键盘信息:

Vue.config.keyCodes.myenter = 13

------------------------------------------------
监听数据变化:
vm.$el/$mount/$options/....

watch选项：
var vm = new Vue({
el:'#app',
data:{
msg:'welcome'
},
watch:{
msg:function () {
alert('msg变化了')
}
}
})

document.onclick = function () {
vm.msg='hmf'
}

watch实例属性：
var vm = new Vue({
el:'#app',
data:{
msg:'welcome'
}

})

vm.$watch('msg',function () {
alert('msg变化了')
})

document.onclick = function () {
vm.msg='abc'
}

vm.$watch(name,fnCb); //浅度

var vm = new Vue({
el:'#app',
data:{
obj:{'name':'bevis','age':22}
}

})

vm.$watch('obj',function () {
alert('obj变化了')
},{deep:true})

document.onclick = function () {
vm.obj.name = 'abc'
}

vm.$watch(name,fnCb,{deep:true}); //深度监视
------------------------------------------------
vue组件:
组件间各种通信
slot
vue-loader webpack .vue
vue-router

转载于:https://www.cnblogs.com/bevis126/p/9553091.html

weixin_30301183

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门002

　　vue制作weibo 交互vue-> 2.x vue-resource ajax php (可以用wampserver搭建php,mysql环境) 服务器环境(node) this.$http.get()/post()/jsonp() this.$http({ url:地址 params:给后台提交数据, method:'get'/post/jsonp jso...
复制链接

扫一扫