Vue.js

作者: cj小牛 | 来源:发表于2019-08-28 15:08 被阅读0次

什么事Vue.js

Vue.js事目前最火的一个前端框架，React是流行的一个框架（React除了开发网站还可以开发手机App，Vue语法也可以用于手机App开发的，需要借助于Wee ek）。
Vue.js是前端的**主流框架之一，和Angular.js 一起，并成为前端三大主流框架！

mvc

MVVM

MVVM是前端视图的分层开发思想把页面分成了下面三块

M :每个页面单独的数据
V：每个页面的html 结构
VM ：分割了m和v
：MVVM思想的核心，应为vm事M和V之间的调度者

3E002E13-08D9-4CFB-B06C-AB41B853AECB.png

Vue使用

https://cn.vuejs.org/v2/guide/

导入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

申明和渲染

    <div id="app">
        {{ message }}
    </div>

      <script>
  // vue 的创建方式
  // 当我们导入包后，在浏览器的内存中就多了一个Vue构造函数
  new Vue({ //这个实力对象在mvvm 中是VM
      el:'#app', //表示我们 这个Vue控制上面的区域
      data:{ //data 属性不能放的是el 中要用到的数据，可以看场是mvv 中的 m
          message:'hello Vue.js!' //通过Vue提供的指令，很方便的就能把数据渲染到也买呢上，程序员不在
          //手动操作dom元素了 【前端的Vue之类的狂，不提倡我们去操作Dom】


      }

  });

</script>

v-text （输出文本格式）
会覆盖元素中原本的内通，但是插值表达式只会替换自己的占位字符串
v-text 和{{msg}}方法一样。只是这歌在加载过程中不会显示显示{{}};
```
  <span v-text="msg"></span>
  
  <span>{{msg}}</span>
```
v-html (输出html格式)
输出html 格式的文本时，可以将文本转换成html

v-vind:绑定 https://cn.vuejs.org/v2/api/#v-bind

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-on (https://cn.vuejs.org/v2/api/#v-on)

绑定时间监听器。时间类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰字符也可以省略。
用在普通的元素上时，智能监听原生的DOM事件。用子啊自定义元素组建上时，也可以监听子组件触发的自定义事件。
在监听原声DOM事件时，方法以事件为唯一参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

      <input type="button" value ="按钮" v-on:click="show">
        <script>
var vm = new Vue({
        el :"#app",
        data :{
            msg:'app',
        },
        methods:{
            show : function(){
                alert('123');
            },
            show1 : function(){
                alert('123');
            }
        }
    });

</script>

要在Vue的实例化方法中添加一个methods：{这里面来放对应的方法}

@click.stop 阻止冒泡

<div id = app>
    <div class ="inner" @click="divHandler" >
        <input type="button" value="点击" @click="btnhandeler" @click.stop="dothis">
    </div>
</div>

        <script>

    var vm =new Vue({
        el:"#app",
        data :{

        },
        methods:{
            btnhandeler(){
                console.log('点击来btn');
            },
            divHandler(){
                console.log('点击来div');
            },
            dothis(){
                console.log('停止冒泡');
            }

        }


    })

</script>

@click.prevent="privent"

阻止跳转。

@click.capture 捕获事件

让事件触发从外到里执行

self (https://cn.vuejs.org/v2/api/#v-on)
*onece (https://cn.vuejs.org/v2/api/#v-on)

v-model 数据双向绑定只能用在表单元素中

input(radio, text,address,email.....) select checkbox textarea
<div id = app>
<p>{{msg}}</p>
<input type="text" v-model="msg">//通过v-model实现双向绑定，改变v-model中msg的值，会改变，vm.msg中的值
</div>
<script>
var vm =new Vue({
el:"#app",
data :{
msg:"大家好才是真的好"
}
})
</script>

Vue中class 样式使用 (https://cn.vuejs.org/v2/guide/class-and-style.html#ad)

 建议使用对象的方式
在为class使用v-bind 绑定对象的时候，对象的属性名，由于对象的属性可带引号，也可以不带引号。所以这里没有写引号
    <div
  class="static"
    v-bind:class="{ active: isActive, 'text-danger':     hasError }"
></div>

绑定内连样式

对象语法
v-bind:style 的语法十分直观-- 看起来非常像css，但是其实是一个JavaScript对象。css属性值可用驼峰命名

  <div id = "app">
  <!-- 使用字符串对象的方式 -->
  <p :style="{'color':'red','font-weight':'200'}">段落</p>  
     //直接绑定到一个样式对象通常更好，这会让模板更清晰：
   <p :style="styleObj1">段落</p>  
  // 绑定一个数组的方式
       <p :style="[styleObj1, styleObj2]">段落</p>         
</div>
      <script>
  var vm = new Vue({
      el:'#app',
      data:{
          styleObj1:{'color':'red','font-weight':'200'},
                          styleObj2:{'color':'red','font-weight':'200'},
      },
      methods:{
      }
  })
      </script>

v-for

我们可以用V-for 指令基与一个数组俩来渲染一个列表。v-for 指令需要使用item in items形式的特殊语法，其中items 是原数组组，而item 则是北迭代的数组元素的别名。

        <div class="app">
<ul>
    <li v-for="item in items">
        {{item.message}}
    </li>

</ul>

</div>
<script>
var vm = new Vue({
    el:'.app',
    data:{
        items:[
        {message:'foo'},
        {message:'Bar'}
        ]
    },
    methods:{
    }
})
</script>

*第二种方式在v-for块种，我们可以访问所有父作用的属性。V-for还可以支持一个可选的第二个参数

    <div class="app">
<ul>
    <!-- <li v-for="item in items">
        {{item.message}}
    </li> -->
    <li v-for="(item1, index) in items">
            {{parentMessage}} - {{item1.message}} -{{index}}

    </li>
  //也可以这样以兼职对的方式来获取
    <li v-for="(value,name, index) in items">
        {{index}} -- {{name}}---{{value}}

    </li>
</ul>

//循环count 是从1开始的
<li v-for="count in 10">这是第{{count}}次循环</li>
</div>
<script>
var vm = new Vue({
el:'.app',
data:{
parentMessage:'Parent',
items:[
{message:'foo'},
{message:'Bar'}
]

    },
    methods:{

    }

})

</script>

v-for 循环中Key的注意事项

    <div class="app">
    <div>id: 
        <input type="text" v-model="id">
        <input type="text" v-model="name"></input>
        <input type="button" value="添加" @click="handerClick">
    </div>
    <!-- 注意  v-for 循环的时候，key 属性只能使用nuber-->
    <!-- 注意：key 在使用的时候必须使用v-bind 属性绑定的形式指定key的值 -->
    <!-- 在组件中，使用v-for 循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时制定等唯一字符串数字：key的值 -->
    <p v-for="item in list" :key="item.id">
        <input type="checkbox" >
        {{item.id}} --{{item.name}}
    </p>

</div>
<script>
var vm = new Vue({
    el:'.app',
    data:{
        id:'',
        name:'',
        list :[
            {id:1,name:'3'}
        ]
    },
    methods:{
        handerClick(){
            // this.list.push({id:this.id,name:this.name})
             this.list.unshift({id:this.id,name:this.name})
        }
    }



})

</script>

v-if v-else- if v-else

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true 值的时候被渲染。

    <div class="app">
    <h1 v-if="awasome"> vue is awwsome!</h1>
    <h1 v-else-if="flag">on on</h1>
    <h1 v-else>哈哈</h1>
</div>
    <script>
    var vm = new Vue({
        el:'.app',
        data:{
            awasome:false,
            flag:false  
        },
        methods:{
        }
    })

</script>

v-show

更具一个条件展示元素的选项v-show
<h1 v-show="ok">Hello!</h1>

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

过滤器 https://cn.vuejs.org/v2/guide/filters.html

下买是一个简单的例字具体参考文档

  <div class="app">
  <p>{{msg | msgFomart('疯狂')}}</p>
</div>
 <script>
Vue.filter('msgFomart',function(data,arg){
return data.replace(/好好/g,arg);
})
 var vm = new Vue({
el:'.app',
data:{
    msg:'好好学习，天天向上'
}
})
    </script>

padStart() 字符串填充指令

string.padstart(2,'0') 意思是长度为2位，不够的用0补够

按键码

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
使用 keyCode 特性也是允许的：
<input v-on:keyup.13="submit">
这个13 这些可以自定义
Vue.config.keyCodes.f2 = 13; 定义f2的键盘码为13
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

使用新的

2.1.0 新增 https://cn.vuejs.org/v2/guide/events.html#按键修饰符
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
例如：

<input @keyup.alt.67="clear">

<div @click.ctrl="doSomething">Do something</div>
请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

Vue.directive( id, [definition] )

      <script>
Vue.directive('focs',{ 
    // el 在所有的函数中第一个参数永远是el ，el表示被绑定了指令的那个元素。这个el是一个原生的Js对象
    bind:function(el){ //每当指令绑定到元素上的时候，会立即执行bind这个方法
        //元素刚绑定了指令的时候，元素还没有插入dom中去。这是狗叼用没有用
    }, 
    inserted:function(el){
    el.focus();
    },
    updata:function(el){
        
    }
    // componentUpdated:functin(){},
    // unbind:function(){}

})

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：https://cn.vuejs.org/v2/guide/custom-directive.html

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

函数简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:

      Vue.directive('color-swatch', function (el, binding) {
        el.style.backgroundColor = binding.value
    })

Vue生命周期

什么事生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期
生命周期钩子：就是生命周期事件的别名而已。
生命周期钩子= 生命骤你函数=生命周期事件
主要的生命周期函数分类：
- 创建期间的生命周期函数
  - beforeCreate:实例刚在内存中被创建出来，此时，还没有初始好data 和methods 属性
  - created 实例已经在内存中创建OK，此时data 和methods 已经创建Ok，此时还没开始编译模版
  - beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
  - mounted:此时，已经将编译好的模板，挂载到了页面制定的容器中显示。

    beforeCreate(){
        // console.log(this.msg), 没有初始化
        // this.show() //还没有被初始化
    },
    created(){
        // console.log(this.msg), 已经初始化
        this.show() //已经初始化
    },
    beforeMount(){//这是遇到的第三个生命周期函数，表示模版已经在内存中编译完成了，但是还没有渲染在模版中。
        console.log(document.getElementById('h3').innerText)
        //在这里页面中的元素还没真正被替换

    },
    mounted(){
        页面从内存渲染出来，显示完成。
    },
    //接下来的两个事件 数据有变化才会调用这两个方法
    beforeUpdata(){ //数据有更新，页面还没有更新时间

    },
    updated(){
        //更新界面
    },
    beforeDestory(){
        //页面即将销毁
    },
    destoryed(){
        //组件已经被销毁
    }
})

Vue-resource实现get，post，jsonp请求 https://www.runoob.com/vue2/vuejs-ajax.html

1.之前学习中，如何发起数据请求
2.常见的数据请求类型？get post jsonp

测试的URL请求资源

get请求地址：http://vue.studyit.io/api/getlunloo
post 请求地址：http://vue.studyit.io/api/post

jsonp 请求地址：http://vue.studyit.io/api/jsonp

httpGet(){
console.log('开始请求')
this. $http.get('http://vue.studyit.io/api/getprodlist').then(function(res){ console.log(res.body); },function(){ console.log('失败了'); }) }, //手动发起的post请求，默认没有表单格式，所以服务器处理不了 // 通过post 方法第三个参数：{emulateJSON:true} 设置提交的内容类型为普通表单数据格式 httppost(){ this.$ http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(function(res){

            console.log(res);
        });
    },
    httpJsonp(){

        this.$http.jsonp('http://jsonplaceholder.typicode.com/users',{}).then(res=>{

            console.log(res);

        });
    }

设置根域名

Vue.http .options.root ='www.baicu.com/'

全局穷emulatejson

Vue.http.options.emulateJson= ture; 这只后post 不用传 {emulateJSON:true} 这个参数啦

Vue中动画

为什么要有动画：动画可以帮助用户更好理解动画

      <style>
            style中定义两种动画
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
    }
    /*入场动画*/
    .v-enter-active, 
    .v-leave-active{
        
        transition: all 0.4s ease;
    }

</style>
</head>
<body>
<div class="app">
    <input type="button" value="改变" @click="flag = !flag">
    <!-- 需求 点击button 让h1改边 -->
    <!-- 1 使用transition 把要动画的包裹起来 -->
    <!-- transition是官方提供的 -->

    <transition >
        <h1 v-show="flag">我是h1</h1>

    </transition>
    
</div>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            flag:true

        },
        

    })
</script>

给transition取一个别名子

   style 里面这么写
       .my-enter,
.my-leave-to {
   opacity: 0;
   transform: translateY(150px);
}
/*入场动画*/
.my-enter-active, 
.my-leave-active{
   
   transition: all 0.4s ease;
}
    <transition  name="my">
   <h1 v-show="flag">我是h1</h1>
</transition>

3 勾子函数实现动画 https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-钩子

        <div class="app">

    <input type="button" value ="点击加入" @click= "flag = !flag">
    <transition
    @befor-enter='beforeEnter'
    @enter="endter"
    @after-enter="afterEnter"
    >
        <div v-show="flag" class="dian">

    </div>
    </transition>


</div>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            flag:false
        },
        methods:{
            beforeEnter(el){
                el.style.transform= 'translate(0,0)';
            },
            endter(el,done){
                el.offsetWidth
                el.style.transform= "translate(150px,130px)";
                el.style.transition='all 0.5s ease';
                done()

            },
            afterEnter(el){
                this.flag = !this.flag;
                
            }


        }


    })

</script><div class="app">

    <input type="button" value ="点击加入" @click= "flag = !flag">
    <transition
    @befor-enter='beforeEnter'
    @enter="endter"
    @after-enter="afterEnter"
    >
        <div v-show="flag" class="dian">

    </div>
    </transition>


</div>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            flag:false
        },
        methods:{
            beforeEnter(el){
                el.style.transform= 'translate(0,0)';
            },
            endter(el,done){
                el.offsetWidth
                el.style.transform= "translate(150px,130px)";
                el.style.transition='all 0.5s ease';
                done()

            },
            afterEnter(el){
                this.flag = !this.flag;
                
            }


        }


    })

</script>

transition-group动画

在实现列表过渡的时候，如果需要过渡元素，是通过v-for 循环渲染出来的，不能使用transition 包裹，需要使用transitionGroup
如有要为一个v-for 循环创建的元素设置动画，必须为每一个元素设置key 属性。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
        li {
            border: 1px ;
            margin: 10px;
        }
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }

        .v-enter-active,
        .v-leave-active{
            
            transition: all 0.5s ease;
        }
        li:hover{
            background-color: red;
            transition: all 0.5s ease;
        }
</style>

</head>
<body>
<div class="app">
<input type="text" v-model="id">
<input type="text" v-model="name">
<input type="button" value="添加" @click="add">
<ul>
<transition-group>
<li v-for="item in list" :key="item.id">
{{item.name}} --- {{item.id}}
</li>
</transition-group>
</ul>

</div>

<script>
    var vm = new Vue({
        el:'.app',
        data:{
            id:'',
            name:'',
            list:[{name:'1',id:'1'},
            {name:'2',id:'2'}
            ]
        },
        methods:{
            add(){
                this.list.push({name:this.name,id:this.id});
                this.id = this.name='';
            }
        }

    })
</script>

列表删除的动画

      .v-move{
            transition: all 0.5s ease;
        }
        .v-leave-active{
            position: absolute;
        }

appear 实现入场动画

        <ul>
        <transition-group appear>
            <li v-for="(item ,i) in list" :key="item.id" @click="del(i)">
                {{item.name}} --- {{item.id}}
            </li>
        </transition-group>
    </ul>

tag

这里用tag 渲染transition-group  渲染成啦ul 这样外面的ul就不需要啦，如果不渲染 transition-group  默认是一个span元素
<!-- <ul> -->
        <transition-group appear tag="ul"> 
            <li v-for="(item ,i) in list" :key="item.id" @click="del(i)">
                {{item.name}} --- {{item.id}}
            </li>
        </transition-group>
    <!-- </ul> -->

Vue.js

什么事Vue.js

mvc

MVVM

Vue使用

v-vind:绑定 https://cn.vuejs.org/v2/api/#v-bind

v-on (https://cn.vuejs.org/v2/api/#v-on)

@click.stop 阻止冒泡

@click.prevent="privent"

@click.capture 捕获事件

v-model 数据双向绑定只能用在表单元素中

Vue中class 样式使用 (https://cn.vuejs.org/v2/guide/class-and-style.html#ad)

绑定内连样式

v-for

v-for 循环中Key的注意事项

v-if v-else- if v-else

v-show

v-if vs v-show

过滤器 https://cn.vuejs.org/v2/guide/filters.html

padStart() 字符串填充指令

按键码

使用新的

Vue.directive( id, [definition] )

函数简写

Vue生命周期

Vue-resource实现get，post，jsonp请求 https://www.runoob.com/vue2/vuejs-ajax.html

设置根域名

全局穷emulatejson

Vue中动画

3 勾子函数实现动画 https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-钩子

transition-group动画

列表删除的动画

appear 实现入场动画

tag

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Vue.js

什么事Vue.js

mvc

MVVM

Vue使用

v-vind:绑定 https://cn.vuejs.org/v2/api/#v-bind

v-on (https://cn.vuejs.org/v2/api/#v-on)

@click.stop 阻止冒泡

@click.prevent="privent"

@click.capture 捕获事件

v-model 数据双向绑定 只能用在表单元素中

Vue中class 样式使用 (https://cn.vuejs.org/v2/guide/class-and-style.html#ad)

绑定内连样式

v-for

v-for 循环中Key的注意事项

v-if v-else- if v-else

v-show

v-if vs v-show

过滤器 https://cn.vuejs.org/v2/guide/filters.html

padStart() 字符串填充指令

按键码

使用新的

Vue.directive( id, [definition] )

函数简写

Vue生命周期

Vue-resource实现get，post，jsonp请求 https://www.runoob.com/vue2/vuejs-ajax.html

设置根域名

全局穷emulatejson

Vue中动画

3 勾子函数实现动画 https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-钩子

transition-group动画

列表删除的动画

appear 实现入场动画

tag

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

v-model 数据双向绑定只能用在表单元素中