vue
特点:
1)vue是一套构建用户界面的渐进式框架(mvvm)
2)轻便,入门容易, 渐进式
步骤:
1、引用文件。
2、window主要是为了获取元素,如果不用放在代码下面。
3、写法：new Vue（{
el:''
data:{
msg,
arr
},
methods:{
}）
4、指令：
v-model=""
v-for="v in arr"
v-for="(i,v) in arr" $index
v-for="(k,v) in json" $key
{{v}}
v-show改变display，DOM结构里面还在
v-if改变的是DOM结构
v-on:click/keyup...
@click
@click.stop阻止冒泡
@click.prevent阻止默认事件
@keyup.13/@keyup.enter
v-bind:src
v-bind:style="json对象"
v-bind:class="字符串|数组|json"
v-bind:id
:src=""
5：自定义指令
angular:
app.directive('ngRed',function(){
return function(scope,element.attr){
element.css('background','red')
}
})
vue
v-red
Vue.directive('red',function () {
//this.el原生的对象
this.el.style.background='red';
});
6、自定义元素指令
Vue.directive('on').keyCodes.ctrl=17;
@keyup.ctrl=""
模板：
非转译输出
{{}}
{{*}}只初始化显示一次，后面不能更改
转译输出
{{{}}}
变量、表达式（a+1）、arr或str的方，三目
7、过滤器：
{{msg|过滤器的名称 参数}}
自定义过滤器
angular
app.filter('data',function(){
return function(s){
//s要过滤的
}
})
vue
Vue.filter('data',function (s) {
//s要过滤的
return
});
8、交互
vue本身没有交互功能功能，需要别的插件协助vue-resource
下载：npm install vue-resource
获取数据 这里get和post都一样
this.$http({
url:'a.txt',
method:'POST|GET'
}).then(function (res) {
alert(res.data)
},function () {
})
发送数据
----
$a=$_GET['bbb'];
$a+=1;
echo $a;
?>
-----
get
this.$http({
url:'a.txt',
method:'GET',
params:{数据}
}).then(function (res) {
alert(res.data)
},function () {
})
post
this.$http({
url:'post.php',
method:'post',
body:{
aaa:22
},
emulateJSON:true //定义传送数据的格式
}).then(function (res) {
console.log(res.data)
},function () {
})
jsonp
百度https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
this.$http({
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
method:'jsonp',
params:{
wd:'a'
},
jsonp:'cb'
}).then(function (res) {
console.log(res.data)
},function () {
})
9、实例：
var vm=new Vue({})
vm.$data就是data
vm.$el就是元素
vm.$watch('监听的数据',function(变化后的数据的值，变化前的数据的值){
})
注：上面只能监听简单的数据，如果是json需要深度监听
深度的监听
vm.$watch('监听的数据',function(变化后的数据的值，变化前的数据的值){
},{deep:true})
vm.$mount('容器元素')手动挂在vue
vm.$log()查看现在的数据状态
vm.$destroy()销毁对象
10、生命周期
就是vue对象（vm）从出生到消亡
钩子函数
对象在某个固定的阶段去调用的函数
created -->实例已经创建完毕
beforeCompile -->编译之前
compiled ---->编译之后
ready ---->插入到文本之后
beforeDestroy --->销毁之前
destroyed --->销毁之后
网友评论