前端修炼——vue.js库使用之二！

于 2018-09-26 19:14:55 发布
阅读量132 收藏
点赞数 1
分类专栏： 前端学习 每日笔记 文章标签： 前端学习 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qyf__123/article/details/82857808
版权

内容概述：
    列表渲染
    表单数据绑定
    计算、监听属性
    过滤器
    Vue 对象的生命周期
    使用 Vue 获取服务器的数据
    ES6 语法


列表渲染
v-for 遍历数组、对象

通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象，v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 将数组的数据放到页面 -->
        <ul><li v-for="item in aList">{{ item }}</li></ul>

        <!-- 将数组的数据放到页面，带索引值 -->
        <ul><li v-for="(item, index) in aList">{{index+1}}、{{ item }}</li></ul>

        <!-- 将对象的数据放到页面-->
        <ul><li v-for="item in oPerson">{{ item }}</li></ul>

        <!-- 将对象的数据放到页面，带键名 -->
        <ul><li v-for="(item, key) in oPerson">{{key}}-{{ item }}</li></ul>  
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                aList:['夏洛特烦恼','西虹市首富','战狼','一出好戏'],
                oPerson:{'name':'小黑','age':18,'gender':'女'}
            }
        })
    </script>
</body>
</html>


表单数据绑定
v-model 双向数据绑定

可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

双向绑定就是：数据变了，视图也发生改变；视图发生改变，数据也会变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <form>
            <p>
                <label>用户名：</label>{{ username }}<br>
                <input type="text" v-model="username"><br><br>
                <input type="button" value="改变值" @click="fnChange">
            </p>
            <p>
                <label>性别：</label> {{ xingbie }} <br>
                <input type="radio" value="0" name="gender" v-model="xingbie"> 男
                <input type="radio" value="1" name="gender" v-model="xingbie"> 女
            </p>
            <p>
                <label>checkbox：</label> {{ aihao }} <br>
                <input type="checkbox" value="study" name="hobby" v-model="aihao"> 学习
                <input type="checkbox" value="basketball" name="hobby" v-model="aihao"> 打球
            </p>
            <p>
                <label>籍贯：</label>{{ site }}<br>
                <select v-model="site">
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">永济</option>
                </select>
            </p>
            <p>
                <label>个人信息：</label>{{ info }}<br>
                <textarea v-model="info"></textarea>
            </p>      
        </form>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                username:'',
                info:'',
                xingbie:0,
                aihao:[],
                site:'1'
            },
            methods:{
                fnChange:function(){
                    this.username += 'haha!'         
                }
            }
        })
    </script>
</body>
</html>


计算、监听属性
计算属性

将函数当成变量来进行使用

监听属性

监听某个数据发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>

</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <p>{{ message.split('').reverse().join('') }}</p>
        <!-- 建议写成计算属性的形式 -->
        <p>{{ reversemsg }}</p>
        <input type="button" value="改变值" @click="fnChange">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                message:'hello'
            },
            computed:{
                // 定义计算属性
                reversemsg:function(){
                    return this.message.split('').reverse().join('')
                }
            },
            watch:{
                // 定义侦听属性
                message:function(newVal, oldVal){
                    console.log(newVal + '|' + oldVal)
                }
            },
            methods:{
                fnChange:function(){
                    this.message += ' haha!'
                }
            }
        })
    </script>
</body>
</html>


过滤器

过滤器实际上是一个函数，可以在一个组件的选项中定义组件内部过滤器，或者在 Vue 实例之前定义全局过滤器

作用：对结果进行进一步的处理

分类：

局部过滤器： filters:{ RMB:function(Val){} }

全局过滤器: Vue.filter(‘Yuan’,function(Val){} )

管道的使用：

管道左边：data 中的变量、过滤器

管道右边：过滤器名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>商品的价格是：{{ price | RMB | Yuan }}</p>
    </div>
    <div id="app2">
         <p>商品的价格是：{{ price | RMB | Yuan }}</p>
    </div>
    <script>
        // 定义全局的过滤器，将过滤器绑定在 Vue 类上
        Vue.filter('Yuan',function(Val){
            if(Val==''){
                return
            }
            return Val + '元'
        });
        var vm = new Vue({
            el:'#app',
            data:{
                price: 99.9
            },
            filters:{ // 定义了一个内部的过滤器，只能是这个对象使用
                RMB:function(Val){
                    if(Val==''){
                        return
                    }
                    return "￥" + Val
                }
            }
        });
        var vm2 = new Vue({
            el:'#app2',
            data:{
                price:88.8
            }
        })
    </script>
</body>
</html>


Vue 对象的生命周期

生命周期

一个对象从创建到销毁的整个过程中会经历的时期

对象的创建——对象的初始化——对象的变化等等。。。——对象的回收

生命周期可以 让开发者在合适的时机做合适的事情

创建
beforeCreate:function(){
//不能使用data中的数据和method中的方法
}
created:function(){
//能使用data中的数据和method中的方法  获取服务器数据的时机应该也在这里执行
}
挂载

在项目中 mounted 比较常用

实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用，一般用它来做dom的初始化操作。

beforeMount:function(){
//获取dom元素中的值  旧
}
mounted:function(){
//获取dom元素中的值  旧
//通过插件操作dom
// data 数据已经可以，methods 方法也已经可用
}
更新
//data发生改变的时候
beforeUpdate:function(){
//data的数据肯定发生了改变
//但是界面中并没有更新
}			
updated:function(){
//data的数据肯定发生了改变
//但是界面已经更新
}
销毁
beforeDestory:function(){}
destoryed:function(){}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ iNum }}</p>
        <input type="button" value="改变值" @click='iNum+=1'>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                iNum:10
            },
            // 创建
            created:function(){
                console.log('created')
            },
            beforeCreate:function(){
                console.log('beforeCreate')
            },
            // 挂载
            beforeMount:function(){
                console.log('beforeMount')
            },
            mounted:function(){
                console.log('mounted')
            },
            // 更新
            updated:function(){
                console.log('updated')
            },
            beforeUpdate:function(){
                console.log('beforeUpdate')
            }
        })
    </script>
</body>
</html>


使用 Vue 获取服务器的数据

vue.js没有集成ajax功能，要使用ajax功能，可以使用vue官方推荐的axios.js库来做ajax的交互。

axios

作用：通过 url 获取数据，通常会和 vue 结合使用

特点：比 jQuery 更轻量

使用：和 $.ajax({}) 类似

axios({})
	url
	method
	data
axios({}).then(function(dat){})
axios({}).catch(function(error){})


ES6

es6 就是 js 的新语法，新的语法对老的语法进行了一些修改和增加

变量的声明

var 定义的变量有预解析

新增定义变量的关键字

let 定义的变量，没有变量的预解析，定义的是一般变量

const 定义的变量，没有变量的预解析，定义的是一个常量，不能修改值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // alert(num01)  // 弹出 undefined 叫做变量的预解析
        var num01 = 33
    
        // alert(num02) // let 定义的变量，没有变量的预解析，这行报错
        // es6 新增定义变量的关键字
        let num02 = 66

        // alert(num03) // const 定义的变量，没有变量的预解析，这行报错
        const num03 = 88
        
        num02 = 38
        // num03 = 99 // const 定义的是一个常量，不能修改值

    </script>
</head>
<body>
  
</body>
</html>
箭头函数

=>

可以把箭头函数理解成匿名函数的第二种写法，箭头函数的作用是可以在对象中绑定this，解决了JavaScript中this指定混乱的问题。

不改变 this 的指向

模块导入 import 和导出 export

avascript之前是没有模块的功能的，之前做js模块化开发，是用的一些js库来模拟实现的，在ES6中加入了模块的功能，和python语言一样，python中一个文件就是一个模块，ES6中，一个js文件就是一个模块，不同的是，js文件中需要先导出(export)后，才能被其他js文件导入(import)

对象的精简

当键名和键值 “相同” 的情况下可以简写

对象中的方法可以不写 function

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        /* function fnRs(a,b){
            var rs = a + b
            alert(rs)
        }
        fnRs('aa','bb') */

        // 上面定义的函数可以改写成赋值定义的方式
        /* var fnRs = function(a,b){
            var rs = a + b
            alert(rs)
        }
        fnRs('aa','bb') */

        // 上面定义函数的方式可以改成箭头函数的形式
        var fnRs = (a,b)=>{
            var rs = a + b
            alert(rs)
        }

        var fnRs2 = a=>{
            alert(a)
        }
        
        fnRs('aa','bb')
        fnRs2('cc')
    </script>

</head>
<body>
    
</body>
</html>
python_QYF
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值