vue的简单使用

于 2020-12-16 15:47:03 发布
阅读量235 收藏 2
点赞数 1
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44151739/article/details/111282165
版权

VUE

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ToDcMIny-1608104530053)(../images/vue/vue官网.jpg)]

Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。

入门案例

创建html，引用vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

启动服务器，访问页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BTRLeGpa-1608104530079)(../images/vue/入门案例.jpg)]

vue常见指令

  • {{}}：vue解析数据的指令

  • v-bind：属性获取vue实例中的data属性值

{{}}只能在html标签中间使用，而v-bind可以在属性中使用

简写方式是冒号

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>

</head>
<body>
<div id="app">
    <span v-bind:title="title">{{msg}}</span><br>
    <span :title="title">{{msg}}</span><br>
    <img :src="src" height="30" width="30"/>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            msg:"你搞啥",
            title:"就是在搞啥",
            src:"../../image/eeeeee.jpg"
        }
    })
</script>
</body>
</html>
  • v-model：属性获取data中的值

与v-bind的区别：

v-bind是单选绑定，修改属性上的值时，vue实例中的data属性不会发生改变

v-model是双向绑定，修改属性上的值时，vue实例中的data属性会相应的发生改变

选用：一般在表单提交时优先选用v-model

当属性是value时，可以省略value，如v-model="username"

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-model:value="username"><br>
    <input type="text" v-model="username"><br>
    {{username}}
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            username:"123"
        }
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lxjlTt4n-1608104530082)(../images/vue/v-model.jpg)]

  • v-html：将绑定属性值通过html格式输出
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>

</head>
<body>
<div id="app" v-html="msg">
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            msg:'<span style="color: red">hello vue</span>'
        }
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mmawrs0I-1608104530087)(../images/vue/v-html.jpg)]

  • v-if：判断指令
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>
</head>
<body>
<div id="app">
    <span v-if="age < 18">不满18岁</span>
    <span v-else-if="age = 18">刚好成年</span>
    <span v-else="age > 18">老油条</span>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            age:19
        }
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Udw8sx0r-1608104530092)(../images/vue/v-if.jpg)]

  • v-for：循环遍历

v-for="(iter,index) in arr"遍历vue实例的data属性arr数组，遍历得到的每一个变量iter，遍历到的索引index

普通数组遍历

对象集合遍历：遍历得到的变量就是一个对象

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>

</head>
<body>
<div id="app">
    <li v-for="iter in arr">{{iter}}</li>
    -----------
    <li v-for="(iter,index) in arr">{{iter}}-{{index}}</li>
    -----------
    <li v-for="(iter,index) in e">{{iter.id}}-{{iter.age}}--{{index}}</li>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            arr:['a','b','c'],
            e:[{
                id:1,
                age:18
            },{
                id:2,
                age:19
            },{
                id:3,
                age:20
            }]
        }
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WKiSgi8A-1608104530094)(../images/vue/v-for.jpg)]

  • v-on：绑定标签监听事件

点击被写上v-on:click="clickMe"属性的标签，会触发vue实例methods中函数

简写@click="clickMe"

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>

</head>
<body>
<div id="app">
    <li v-for="iter in arr" v-on:click="clickMe">{{iter}}</li>
    ----------
    <li v-for="iter in arr" @click="clickMe">{{iter}}</li>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            arr:['a','b','c']
        },
        methods:{
            clickMe:function () {
                console.log("被点击")
            }
        }
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4EcjANaN-1608104530096)(../images/vue/v-on.jpg)]

vue事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>
</head>
<body>

<div id="app">
    <li v-for="iter in obj" v-on:click="clickMe(iter.id,iter.age,$event)">{{iter.id}}</li>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            obj:[{
                id:1,
                age:18
            },{
                id:2,
                age:19
            },{
                id:3,
                age:20
            }]
        },
        methods:{
            clickMe:function (id,age,obj) {   // 事件函数
                console.log(id);    //事件传参
                console.log(age);
                console.log(obj);   // 事件对象
                console.log(obj.currentTarget); // 事件源
            }
        }
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9w9Rtfvj-1608104530097)(../images/vue/vue事件.jpg)]

vue属性

  • el：用来指示vue编译器从什么地方开始解析 vue的语法
  • data：整个view中所有数据存放的地方
  • methods：js代码放置的地方，用于存放逻辑代码
  • filters：vue过滤器

语法：{{sex|fun}}，把sex作为条件（参数），传入filters中的fun函数参数中。’|’ 称为管道。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>
</head>
<body>
<div id="app">
    {{sex|fun}}
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            sex:1,
        },
        filters:{
            fun:function (sex) {
                if (sex == 0){
                    return '男'
                }else if(sex == 1){
                    return '女'
                }else {
                    return '保密'
                }
            }
        }
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0uF0bkjv-1608104530099)(../images/vue/过滤器.jpg)]

  • mounted：一个函数，在vue实例化过程中被调用，一般用于初始化页面数据

准备json文件，存放json数据

访问页面，实例化vue过程中发送ajax请求，返回数据，渲染到页面上

[
  {
    "name": "a",
    "age": 18
  },
  {
    "name": "b",
    "age": 19
  },
  {
    "name": "b",
    "age": 20
  }
]

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>
    <script src="../../js/jquery/jquery.js"></script>
</head>
<body>
<div id="app">
    <li v-for="obj in arr">{{obj}}</li>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            arr:[]
        },
        mounted:function () {
            // 此函数在Vue实例化过程中被调用
            $.get("/json/emps.json",{},function (data) {
                vue.arr = data;
            })
        }
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WhIkPIS2-1608104530101)(../images/vue/mounted.jpg)]

vue的生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BtGusc1l-1608104530102)(../images/vue/lifecycle.png)]

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。

  1. 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作
  2. 挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
  3. 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
  4. 接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情…
  5. 当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
  6. 当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom
  7. 当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等
  8. 组件的数据绑定、监听…去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值