二三、vue2与vue1的区别（一）

最新推荐文章于 2024-04-07 16:32:50 发布

夏河始溢

最新推荐文章于 2024-04-07 16:32:50 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签： vue 框架笔记指令 mvvm

本文链接：https://blog.csdn.net/zm06201118/article/details/71189714

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

vue学习笔记

1、vue于angular的区别

vue:一片html代码配合上JSON,在new一个vue实例。
    适合移动端项目，小巧；发展势头很猛；
angular：所有属性方法都挂在$scope上；
    适合PC端项目

共同点：不兼容IE低版本

2、vue 基本雏形

<div id="app">
    {{ message }}
</div>
 var app = new Vue({
           el: '#app',//选择器
           data: {    //存储数据
           message: 'hellow world!'
         }
 })

3、常用指令（扩展HTML标签功能，属性）

1、v-model 一般表单元素（input） 双向数据绑定
2、循环 v-for="value in arr"  {{value}} {{$index}}
        v-for="value in json" {{value}} {{$index}} {{$key}} 
       <li v-for="(k,v) in json">{{$index}}-{{v}}--{{k}}</li>

4.事件 v-on 简写->@

 1. v-on:click/mouseout/mouseover/mousedowm/dbclock....=函数（）；
            methods:{
                add:function () {
                    this.arr.push('shab');
    
                }
            }
 2、显示影藏 v-show=true/false

事件对象 @click = "show($event)"

事件冒泡

 阻止冒泡 ： 1 ev.cancalBubble=true;
            2 @click.stop 
 阻止默认行为： 1 ev.preventDefault();
              2 @contextmenu.prevent  (右键点击)

键盘事件

 @keydown/keyup='show($event)'  show:function(e){alert(e.keyCode)}
 简写：@keyup.13='show()'==@keyup.enter='show()'  //回车
       @keyup.down/up/left/right='show()'

5.属性 v-bind

 <img v-bind:src='url'>---简写<img :src='url' ：width='w'>

class和style

:class='[red]' 数据
：class='[red,blue,...]' :cladd="{red:true,blue:true}"
:class:'json' data:{red:true,blue:false}
:style="[c,d]"
- data:{ a:{color:'red'}, b:{backgroundColor:'teal'} //复合样式采用驼峰 }
:style:"json"
- data:{red:true,blue:false}

6.模板

{{msg}} 双向绑定
{{*msg}} 数据只绑定一次（第一个）
{{{}}} html转义

7.过滤器

{{msg|filterA}}
- {{msg|capitalize}} 首字母大写
- {{msg|lowercase|capitalize}} 转小写再首字母大写
- {{msg|currency}} $
- {{msg|currency '参数'}} 参数+msg
- debounce 配合事件使用,延迟执行
  - @keyup='show() | debounce 1000'
- 数据配合使用过滤器
  - limitBy 限制个数
  - limitBy 参1（取几个）
  - limitBy 参1（取几个）参2（从哪开始）
- {{v}}
  - filterBy 过滤数据
- {{v}}
  //搜索
- {{v}}
  - orderBy 排序 (1 正序 -1 倒序)

自定义过滤器

//自定义过滤器
Vue.filter('toDou',function (input) {
    return input<10? '0'+input:input;
})

<div id="app">
    <input type="text" v-model='a'>
    {{a | toDou}}
</div>

时间转换

 +<div id="app">
      <input type="text" v-model='a'>
      {{a | date}}
  </div>
  <script>
      //时间转换器
      Vue.filter('date',function (input) {
          var oDate=new Date(input);
          return oDate.getFullYear()+'-'+oDate.getMonth()+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
      })

过滤html标签

 + two-way （双向过滤器）
 <div id="box">
     <input type="text" v-model="msg | filterHtml">
     <br>
     {{{msg}}}
 </div>
 
  Vue.filter('filterHtml',{
         read:function(input){ //model-view
 //            alert(1);
             return input.replace(/<[^<]+>/g,'');  //过滤HTML标签
         },
         write:function(val){ //view -> model
             alert(123);
             console.log(val);
             return val;
         }
     });

8.交互 $http (ajax)

vue 交互引入：vue-resouce 服务器环境php

get
- <input type="button" value='按钮' @click='get()' get:function () { this.$http.get('text1.txt').then(function (data) { alert(data.data); },function (res) { alert(res.status) }) }
post
- <input type="button" value='按钮' @click='post()' post:function () { this.$http.post('post.php',{ a:3, b:9 },{ emulateJSON:true }).then(function (data) { alert(data.data); },function (res) { alert(res.status) }) }
jsonp
- <input type="button" value='按钮' @click='jsonp()' jsonp:function () { this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd:'a' },{ jsonp:'cb' //callback名字默认为callback }).then(function (data) { console.log(data); alert(data.data.s); },function (res) { alert(res.status) }) }
合写
- this.$http({ url:地址， data:{ method:'get/post/jsonp' jsonp:"cb//cbName" } })
- eg:this.$http({
  url:URL, data:{ act:'get', page:n } }).then(function (res) {}

9.vue生存周期

钩子函数：
- created:function(){} //实例创建
- beforeCompile:fun(){} //编译之前
- compile:fun(){} //编译之后
- ready: //插入到文档中
- beforeDestroy //销毁之前
- destroy //销毁之后

10.防止闪烁

v-cloak
- style---- [v-cloak]{display：none}
v-test v-html {{{msg}}}
- eg:
  {{msg}}
  {{{msg}}}

11.计算属性的使用（watch）

computed 里面可以放置一些业务逻辑 data不能记得return
- computed：{ //默认调用get b:fun(){ return 值}
  }
- var vm= new Vue({ el: '#app', data: { a:2 }, computed:{ b:{ get:function () { return this.a*2; }, set:function (val) { this.a=val; } } }
  }) document.οnclick=function () { vm.b=6; }

12.vue实例的一些方法

vm.$el //就是元素
vm.$data //就是data
vm.$mount //手动挂载
- var vm= new Vue({
```
 data: {
    a:'lalal'
 }
```
  }).$mount('#app'); // vm.$mount('#app'); console.log(vm.$el); vm.$el.style.background='red';
  
  console.log(vm.$data.a);
vm.$options.属性 //获取自定义属性
vm.$destroy //销毁属性
vm.$log() //查看现在数据的状态

13.循环重复数据

v-for='v in data' 有重复数据不能添加还会报错
- 使用track-by='$index' 提高循环性能

14.自定义指令 **必须以V-开头

Vue.directive(指令名称不要v-,fun(){ }))
- eg: Vue.directive('red',function () { //this.el 原生DOM this.el.style.background='red'; })

拖拽

Vue.directive("drag",function(){
    var div = this.el;
    div.onmousedown = function(e){
        var disX = e.clientX- div.offsetLeft;
        var disY = e.clientY - div.offsetTop;
        document.onmousemove = function(e){
            var  l =e.clientX -disX;
            var t =e.clientY- disY;
            div.style.left = l + "px";
            div.style.top = t+ "px";
        };
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
})
window.onload=function(){
    var vm=new Vue({
        el:'#box',
        data:{
            msg:'welcome'
        }
    });
};

自定义元素指令：（了解） Vue.elementDirective('ma-red',{ bind:fun(){ this.el.style.color="red'; }
```
})
```
自定义键盘信息 --@keydown.up @keydown.down 自定义键盘ctrl
Vue.directive("on").keyCodes.ctrl=17;

15.监听数据变化

vm.$watch(name,fun(){})) //浅度 var vm=new Vue({ el:'#box', data:{ msg:'welcome', info:'hello' }

  });
    vm.$watch('msg',function () {
        alert('变化了');
        this.info='haha'
    });

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

vm.$watch(name,fun(){deep:true})) //深度监视

 var vm=new Vue({
      el:'#box',
      data:{
          msg:{name:'zs',age:18},
          info:'hello'
      }

  });
  vm.$watch('msg',function () {
      alert('变化了');
      this.info='haha'
  },{deep:true});  

  document.onclick=function () {
      vm.msg.name='sb'
  }
  <div>{{msg | json}}</div  //json过滤器 相当于JSON.stringify --js转换为字符串

夏河始溢

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
二三、vue2与vue1的区别（一）

vue学习笔记1、vue于angular的区别vue:一片html代码配合上JSON,在new一个vue实例。适合移动端项目，小巧；发展势头很猛；angular：所有属性方法都挂在$scope上；适合PC端项目共同点：不兼容IE低版本2、vue 基本雏形div id="app"> {{ message }}div> var app
复制链接

扫一扫