进阶Vue

忘是亡心i 2021-11-04 16:00 374阅读 0赞

## 1，定制私有指令 ##

<div id="app">
            <p v-fontSize="50">域名都过期了，狗屁玩意儿</p>
            
        </div>
    
        <script> var app=new Vue({ el:"#app", directives:{ 'fontWeight':{ bind:function(el,binding){ el.style.color=binding.value } }, 'fontSize':function(el,binding){ //注意：这个function等同于把代码写到了bind和update中去 el.style.color=binding.value } } }); </script>

## 2, 动画-使用钩子函数模拟小球半场动画 ##

<div id="app">
            <input type="button" value="添加到购物车" @click="flag=!flag">
            <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                    <div class="ball" v-if="flag"></div>
            </transition>
        </div>
    
        <script> var app=new Vue({ el:"#app", data:{ flag:false }, methods:{ //动画钩子函数的第一个函数，el表示要执行动画的那个dom元素，是个原生的js dom对象 //大家可以认为，el是通过document.getElementById的方式获取到的原生js dom对象 beforeEnter(el){ //beforeEnter表示动画入场之前，此时，动画尚未开始，可以再beforeEnter中设置元素开始动画之前 //的起始样式 设置动画之前的起始位置 el.style.transform="translate(0,0)" }, enter(el,done){ //这句话没有实际的作用，但是如果不写，出不来动画效果 //可以认为el.offsetWidth会强制动画刷新 el.offsetWidth //enter表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态 el.style.transform="translate(150px,450px)" el.style.transition="all 1s ease" //这里的done，其实就是afterEnter这个函数，也就是说，done是afterEnter函数的引用 done() }, afterEnter(el){ //动画完成之后，会调用afterEnter函数 this.flag=!this.flag } } }); </script>

## 3, 父组件向子组件传值 ##

<div id="app">
            
            <test v-bind:parentmsg="msg"></test>
        </div>
    
        <script> new Vue({ el:"#app", data:{ msg:"父组件的data" }, components:{ // 子组件中默认无法访问到父组件的data上的数据和methods中的方法 test:{ data(){ //子组件的data数据并不是通过父组件传递过来的，而是子组件自身私有的，比如说 //子组件通过ajax，请求回来的数据，都可以放在data身上 //data的数据可读可写 return { title:"123", content:"lala" } }, template:'<h3>这是子组件---{ {parentmsg}}</h3>', // 组件中的所有props的数据，都是通过父组件传递给子组件的 //props的数据都是只可读，无法重新赋值 props:['parentmsg'] //把父组件传递过来的parentmsg属性，先在props数组中定义一下，这样才能使用这个数据 } } }); </script>

## 4, 跑马灯效果 ##

<div id="app">
            <button v-on:click="start">浪起来</button>
            <button v-on:click="stop">低调</button>
           <p> {
       {message}}</p>
        </div>
        <script> var app=new Vue({ el:"#app", data:{ message:"猥琐发育，别浪~~！", dingshiqi:null }, methods:{ start:function(){ var _this=this if(this.dingshiqi!==null){ return } this.dingshiqi=setInterval(function(){ var first=_this.message.substring(0,1) var last=_this.message.substring(1) _this.message=last+first },400) }, stop:function(){ clearInterval(this.dingshiqi) this.dingshiqi=null } } }); </script>

## 5, 品牌列表案例 ##

<div id="app">  
             
             <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3>添加品牌</h3>
                    </div>
                    <div class="panel-body form-inline">
                        <label>
                            id:
                            <input type="text" class="form-control" v-model="id">
                        </label>
                        <label>
                                name:
                                <input type="text" class="form-control" v-model="name">
                        </label>
                        <input type="button" v-on:click="add" value="添加" class="btn btn-primary">
                    </div>
                </div>    
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>cTime</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in list" v-bind:key="item.id">
                        <td>{
       {item.id}}</td>
                        <td>{
       {item.name}}</td>
                        <td>{
       {item.cTime}}</td>
                        
                        <td><a v-on:click="del(item.id)" style="cursor:pointer">删除</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script> var app=new Vue({ el:"#app", data:{ id:"", name:"", list:[ { id:1,name:"奔驰",cTime:new Date()}, { id:2,name:"宝马",cTime:new Date()}, ] }, methods:{ add:function(){ var car={ id:this.id,name:this.name,cTime:new Date()} this.list.push(car) this.id="" this.name="" }, del(id){ //alert(id); 第一种方法 //some()方法，遍历数组的每一项，若其中一项为 true，则返回true； // this.list.some((item,i)=>{ // if(item.id==id){ // //splice() 方法可删除数组从 index 处开始的零个或多个元素 // this.list.splice(i,1); // //在数组的some方法中，如果return true，就会立即终止这个数组的后续循环 // return true; // } //}) //第二种方法 //findIndex是最新出来的一个方法，是得到寻找条件的索引值 var index=this.list.findIndex(i=>{ if(i.id==id){ return true; } }) this.list.splice(index,1); } } }); </script>

## 6, 全局配置数据接口的根域名 ##

<div id="app">
            <input type="button" value="get请求" @click="getInfo">
        </div>
        <script> //如果我们配置了请求的数据接口的根域名，则在每次单独发起http请求的时候，请求的url路径应该以相对路径开头，前面不能带/ //否则不会启用根路径做拼接。 Vue.http.option.root='http://vue.studyit.io/'; new Vue({ el:"#app", methods:{ getInfo(){ //发送get请求 //本来请求路径是http://vue.studyit.io/api/getList，现在把根域名提取出来作为全局配置 //然后再get中和接口拼接就可以了 全局配置根域名+接口地址 // this.$http.get('http://vue.studyit.io/api/getList').then(function(result){ // console.log(result) // }) this.$http.get('api/getList').then(function(result){ console.log(result) }) } } }); </script>

## 7, 全局配置emulateJSON选项 ##

<div id="app">
            <p>{
       {name}}</p>
           姓名： <input type="text"v-model="name" />
            <input type="button" value="post请求" @click="postInfo">
        </div>
        <script> //全局启用emulateJSON选项 Vue.http.options.emulateJSON=true; new Vue({ el:"#app", data:{ name:"sdf" }, methods:{ postInfo(){ //发送post请求 this.$http.post('api/getList',{ name:this.name}).then(result=>{ if(result.body.status===0){ //成功了 //调用getList刷新列表（这里没有） } }) } } }); </script>

## 8, 生命周期函数-组件创建期间的四个钩子函数 ##

<div id="app">
            <input type="button" value="改变msg" @click="change">
           <p id="h3">{
       {msg}}</p>
        </div>
        <script> new Vue({ el:"#app", data:{ msg:"啦啦啦" }, methods:{ show(){ //alert("执行了show方法"); }, change(){ this.msg="No" } }, beforeCreate(){ //这是我们遇到的第一个生命周期函数，表示实例在完全创建出来之前，会执行它 //注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化。 this.show() }, created(){ //这是遇到的第二个生命周期函数 console.log(this.msg) this.show() //在created中，data和methods都已经被初始化好了 //如果要调用methods中的方法或者操作data中的数据，最早只能在created中进行操作 }, beforeMount(){ //这是遇到的第三个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中 //console.log( document.getElementById("h3").innerText) //在beforMount执行的时候页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串 }, mounted(){ //这是遇到的第四个生命周期函数，表示内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了 //console.log( document.getElementById("h3").innerText) //注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了 //此时，如果没有其他操作的话，这个实例就静静的躺在我们的内存中一动不动 }, //接下来是运行中的两个事件 beforeUpdate(){ //这时候表示我们的界面还没有被更新 // console.log("页面上的元素是"+ document.getElementById("h3").innerText) // console.log("data中的msg的数据是"+this.msg) //得出结论：当执行beforeUpdate时，页面中显示的数据还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步 }, updated(){ console.log("页面上的元素是"+ document.getElementById("h3").innerText) console.log("data中的msg的数据是"+this.msg) //updated事件执行的时候，页面和data数据已经保持同步了，都是最新的 }, beforeDestroy(){ //当执行beforeDestroy钩子函数时，vue实例就已经从运行阶段进入到了销毁阶段 //当执行beforeDestroy时，实例身上所有的data和所有的methods以及过滤器，指令等等都处于可用状态 //此时，还没有真正执行销毁的过程 }, destroyed(){ //当执行destroyed函数时，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，过滤器等等全部不可用了 } }); </script>

## 9, 使用第三方animate.css类库实现动画 ##

首先导入css包

<div id="app">
            <input type="button" value="toggle" @click="flag=!flag">
            <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
                    <h3 v-if="flag">这是一个标题</h3>
            </transition>
        </div>
    
        <script> var app=new Vue({ el:"#app", data:{ flag:false } }); </script>

## 10, 使用过渡类名实现动画 ##

## 11, 使用transition-group元素实现列表动画 ##

## 12, 为什么组件的data必须是一个function ##

<div id="app">
            <test></test>
        </div>
    
        <template id="temp">
            <div>
                <input type="button" value="加一" v-on:click="increment">
                {
       {count}}
            </div>
        </template>
        <script> //计数器组件，点击按钮，数量加一 var dataObj={ count:0} //创建一个对象 Vue.component("test",{ template:"#temp", data:function(){ return dataObj; }, methods:{ increment(){ this.count+=1 } } }) var app=new Vue({ el:"#app" }); </script>

## 13, 自定义按键修饰符 ##

<div id="app">
            
            
            
            
            <input type="text" v-model="message" v-on:keyup.f2="add()">
        </div>
    
        <script> var app=new Vue({ el:"#app", data:{ message:"12345" }, methods:{ add:function(){ alert(this.message) } } }); Vue.config.keyCodes.f2=113 </script>

## 14, 自定义全局指令让文本框获取焦点 ##

<div id="app">
                
                
                
                <input type="text" v-focus v-color="'yellow'">
        </div>
    
        <script> // 使用Vue.directive()定义全局的指令 v-focus // 其中参数一：指令的名称，在定义的时候，指令名称前面不需要加“V-”前缀，但是，在调用的时候必须加上“V-”前缀来进行调用。 // 参数二：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作。 Vue.directive("focus",{ bind:function(el){ // 每当指令绑定在元素上时，会立即执行这个bind函数，只执行一次 //注意：在每个函数中，第一个参数永远时el，表示被绑定了指令的那个元素，这个el参数，是个原生的js对象 //在元素刚绑定指令的时候，还没有查到dom中去，这时候调用focus方法不起作用 //因为一个元素只有插入dom之后才能获取焦点 // alert("我先出来然后才让你聚焦") }, inserted:function(el){ //inserted表示元素插入到dom的时候会执行inserted函数（触发一次） el.focus() }, updated:function(){ //当vNode更新的时候会执行updated，可能会触发多次 } }) //自定义一个设置字体颜色的指令 // 设置颜色指令的第一种方式 // Vue.directive("color",{ // bind:function(el){ // el.style.color="red" //和样式相关的操作，一般都可以在bind中执行 // } // }) // 设置颜色指令的第二种方式 // 使用钩子函数的第二个参数binding拿到传递的值 Vue.directive("color",{ bind:function(el,binding){ el.style.color=binding.value } }) new Vue({ el:"#app" }); </script>

## 15, 组件-创建组件的方式1 ##

<div id="app">
                <my-com1></my-com1>
        </div>
    
        <script> //1.1 使用Vue.extend来创建全局的Vue组件 var com1=Vue.extend({ template:"<h3>这是使用Vue.extend创建的组件</h3>" //通过template属性，指定了组件要展示的html结构 }) //1.2 使用Vue.component("组件的名称",创建出来的组件模板对象) //Vue.component定义全局组件的时候，组件名如果使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写，同时两个单词之间用“-”链接 Vue.component("myCom1",com1) // 还可以这样写 // Vue.component("mycom",Vue.extend({ // template:"<h3>这是使用Vue.extend创建的组件</h3>" // })) var app=new Vue({ el:"#app" }); </script>

## 16, 组件-创建组件的方式2 ##

<div id="app">
                <my></my>
        </div>
    
        <script> Vue.component("my",{ //注意：不论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素 template:"<div><h3>这是直接使用Vue.component创建出来的组件</h3><span>123</span></div>" }) var app=new Vue({ el:"#app" }); </script>

## 17, 组件-创建组件的方式3 ##

<div id="app">
               <mycom3></mycom3>
        </div>
        <div id="app2">
            <login></login>
        </div>
    
    <template id="temp">
        <div>
            <h2>这是组件</h2>
            <span>123</span>
        </div>
    </template>
        <script> Vue.component("mycom3",{ template:"#temp" }); var app=new Vue({ el:"#app" }); // 使用components属性定制私有组件 new Vue({ el:"#app2", components:{ login:{ template:"<h3>定制私有组件</h3>" } } }); </script>

## 18, 组件切换-方式1 ##

<div id="app">
           <a href="" @click.prevent="isShow=true">登陆</a>
           <a href="" @click.prevent="isShow=false">注册</a>
           <login v-if="isShow==true"></login>
           <register v-if="isShow==false"></register>
       </div>
    
       <script> Vue.component("login",{ template:"<h3>登陆模块</h3>" }); Vue.component("register",{ template:"<h3>注册模块</h3>" }); var app=new Vue({ el:"#app", data:{ isShow:true } }); </script>

## 19, 组件切换-方式2 ##

<div id="app">
           <a href="" @click.prevent="comName='login'">登陆</a>
           <a href="" @click.prevent="comName='register'">注册</a>
           
          <component :is="comName">
    
          </component>
       </div>
    
       <script> Vue.component("login",{ template:"<h3>登陆模块</h3>" }); Vue.component("register",{ template:"<h3>注册模块</h3>" }); var app=new Vue({ el:"#app", data:{ comName:"login" //当前component中的:is绑定的组件的名称 } }); </script>

## 20, 组件切换动画 ##

## 21, 组件中的data和methods ##

<div id="app">
            <test></test>
        </div>
    
        <script> // 组件可以有自己的data数据，组件的data和实例的data不一样，实例中的data可以是一个对象 //但是组件中的data必须是一个方法 //组件中的data除了必须为一个对象之外，这个方法内部还必须返回一个对象才行。 //组件中的data数据，使用方式，和实例中的使用方式完全一样 Vue.component("test",{ template:"<h2>这是个组件---{ {msg}}</h2>", data:function(){ return { msg:"这是组件的data" } } }) var app=new Vue({ el:"#app" }); </script>

## 22, vue-resource发起get,post,jsonp请求 ##

## 23, Vue定制私有过滤器 ##

<div id="app2">
                    {
       {time | dataFormat}}
            </div>
    
        <script> // 全局过滤器，就是所有的vue实例都可以共享使用的 //定制私有过滤器（局部） var app2=new Vue({ el:"#app2", data:{ time:new Date() }, filters:{ //定制私有过滤器，过滤器有两个条件（过滤器名称和处理函数） dataFormat:function(dataStr){ //根据给定的时间字符串，得到特定的时间 var time=new Date(dataStr) var y=time.getFullYear() //padStart 填充 填充到一共2位，没有的用0填充 从前开始填充 //padEnd 从后开始填充 var m=(time.getMonth()+1).toString().padStart(2,"0") var d=time.getDate() return `${ y}-${ m}-${ d}` } } }); </script>

## 24, vue全局过滤器的基本使用 ##

<div id="app">
            {
       {message | messageFormat}}     
            
            
        </div>
        <div id="app2">
            {
       {time}}
        </div>
    
        <script> //先定义一个Vue全局过滤器，名字叫做messageFormat //需要先声明一下过滤器，然后再创建Vue实例，否则过滤器无效 Vue.filter("messageFormat",function(message){ return message.replace(/啦/g,"杀"); // 把所有的啦替换成杀 }) var app=new Vue({ el:"#app", data:{ message:"哈哈哈啦哈哈哈啦" } }); var app2=new Vue({ el:"#app2", data:{ time:new Date() } }); //过滤器的基本语法 Vue.filter('过滤器的名称',function(){}) //过滤器的function的第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据 // Vue.filter('过滤器的名称',function(data){ // return data+"123" // }) </script>
    </body>
    </html>

## 25, 父组件把方法传递给子组件 ##

<div id="app">
            
            <com v-on:func="show"></com>
        </div>
        <template id="test">
            <div>
                <h1>这是子组件</h1>
                <input type="button" value="这是子组件的按钮，点击它，触发父组件传递过来的func方法" @click="myClick" />
            </div>
        </template>
        <script> var com={ template:"#test", methods:{ myClick(){ this.$emit('show') } } } var app=new Vue({ el:"#app", components:{ com }, methods:{ show(){ console.log("调用了父组件身上的show方法") } } }); </script>

## 26, 组件案例-评论列表 ##

<div id="app">
            
            <comment @func="loadComments"></comment>
            <ul class="list-group">
                <li class="list-group-item" v-for="item in list" :key="item.id">
                    <span class="badge">评论人：{
       {item.user}}</span>
                    {
       {item.content}}
                </li>
            </ul>
        </div>
    
        <script> // 定义发表评论的组件 Vue.component("comment",{ template:'<div><div class="form-group"><label>评论人：</label><input type="text" class="form-control" v-model="user"></div><div class="form-group"><label>评论内容：</label><textarea class="form-control" v-model="content"></textarea></div><div class="form-group"><input type="button" value="发表评论" class="btn btn-primary" @click="postComment"></div></div>', data(){ return { user:'', content:'' } }, methods:{ postComment(){ //发表评论的方法 var comment={ id:Date.now(),user:this.user,content:this.content} //从localstorage中获取所有的评论（是把评论存放在了localstorage中） var list = JSON.parse(localStorage.getItem('test')||'[]') // list.push(comment) //unshift保存数据时是在最上边 list.unshift(comment) //重新保存评论的数据 localStorage.setItem("test",JSON.stringify(list)) this.user=this.content='' this.$emit("func") } } }) var app=new Vue({ el:"#app", data:{ list:[ { id:Date.now(),user:"李白",content:"天生我才必有用"}, { id:Date.now(),user:"王盼",content:"啥时候才能下班啊"}, { id:Date.now(),user:"张浩",content:"你赶紧给我滚犊子把"} ] }, methods:{ loadComments(){ //从本地的localStorage中加载评论列表 var list=JSON.parse(localStorage.getItem("test")||"[]") this.list=list } }, beforeCreate(){ },//注意：这里不能调用loadComments方法，因为在执行这个钩子函数的时候，data和methods函数 //都还没有被初始化 created(){ this.loadComments() } }); </script>

## 27, ref获取DOM元素和组件 ##

<div id="app">
            <input type="button" value="获取文本" @click="getValue" ref="myBtn">
            <h3 id="hh" ref="test">天气真的好</h3>
            <zujian ref="myTemplate"></zujian>
        </div>
    
        <template id="test">
            <h3>这是组件</h3>
        </template>
        <script> Vue.component("zujian",{ template:"#test", data(){ return { msg:"哈哈哈" } }, methods:{ show(){ console.log("调用了show方法") } } }) var app=new Vue({ el:"#app", methods:{ getValue(){ //ref获取元素的文本 //console.log(this.$refs.test.innerText) //ref获取子组件的data //console.log(this.$refs.temp.msg) this.$refs.myTemplate.show() } } }); </script>

## 28, 路由的基本使用 ##

## 29, 路由规则中定义参数 ##

<div id="app">
            
            
            <router-link to="/login?id=10&name=王盼">登陆</router-link>
            <router-link to="/register">注册</router-link>
            <router-view></router-view>
        </div>
    
        <script> var login={ //使用{ {$route.query.id}}接收显示参数 template:"<h3>登陆组件---{ {$route.query.id}}---{ {$route.query.name}}</h3>" } var register={ template:"<h3>注册组件</h3>" } var router=new VueRouter({ routes:[ { path:"/login",component:login}, { path:"/register",component:register} ] }); var app=new Vue({ el:"#app", router:router }); </script>

## 30, 路由规则传参方式2 ##

<div id="app">      
            <router-link to="/login/12/李四">登陆</router-link>
            <router-link to="/register">注册</router-link>
            <router-view></router-view>
        </div>
    
        <script> var login={ template:"<h3>登陆组件---{ {$route.params.id}}--{ {$route.params.name}}</h3>" } var register={ template:"<h3>注册组件</h3>" } var router=new VueRouter({ routes:[ { path:"/login/:id/:name",component:login}, { path:"/register",component:register} ] }); var app=new Vue({ el:"#app", router:router }); </script>

## 31, 路由的嵌套 ##

<div id="app">
            <router-link to="/account">Account</router-link>
            <router-view></router-view>
        </div>
    <template id="test">
           <div>
                <h3>这是account组件</h3>
                <router-link to="/account/login">登陆</router-link>
                <router-link to="/account/register">注册</router-link>
                <router-view></router-view>
           </div>
    </template>
        <script> //组件的模板对象 var account={ template:"#test" } var login={ template:"<h2>登陆模块</h2>" } var register={ template:"<h2>注册模块</h2>" } //创建路由对象 var router=new VueRouter({ routes:[{ path:"/account", component:account, children:[ { path:"login",component:login}, { path:"register",component:register} ] }], // 实现子路由的嵌套 component:account, children:[ { path:"login",component:login}, { path:"register",component:register} ] }); var app=new Vue({ el:"#app", router }); </script>

## 32, 路由-命名视图实现经典布局 ##

## 33, 名称拼接案例 ##

<div id="app">
           姓 <input type="text" v-model="firstName">+名<input type="text" v-model="lastName">=姓名<input type="text" v-model="fullName">
        </div>
    
        <script> var app=new Vue({ el:"#app", data:{ firstName:"", lastName:"", fullName:"" }, watch:{ //使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数 "firstName":function(newVal,oldVal) { //newVal是改变之后的数据，oldVal是改变之前的数据 //这里只需要newVal就够了 this.fullName=newVal+this.lastName }, "lastName":function(newVal){ this.fullName=this.firstName+newVal } } }); </script>

## 34, watch-监视路由地址的改变 ##

<div id="app">
            <router-link to="/login">登陆</router-link>
            <router-link to="/register">注册</router-link>
            <router-view></router-view>
        </div>
    
        <script> var login={ template:"<h3>登陆模块</h3>" } var register={ template:"<h3>注册模块</h3>" } var router=new VueRouter({ routes:[ { path:"/login",component:login}, { path:"/register",component:register} ] }); var vm=new Vue({ el:"#app", router, watch:{ "$route.path":function(newVal,oldVal){ if(newVal==="/login"){ console.log("欢迎登陆") }else{ console.log("欢迎注册") } } } }); </script>

## 35, computed计算属性-名称拼接案例2 ##

<div id="app">
           姓 <input type="text" v-model="firstName">+名<input type="text" v-model="lastName">=姓名<input type="text" v-model="fullName">
        </div>
    
        <script> var app=new Vue({ el:"#app", data:{ firstName:"", lastName:"", }, // 只要计算属性的function方法内部所用到的任何data中的数据发生了变化，就会立即重新计算这个计算属性的值 //计算属性的求值结果，会被缓存起来，方便下次直接使用。 computed:{ "fullName":function(){ return this.firstName+this.lastName } } }); </script>