首页 > 其他 > 详细

Vue

时间:2019-11-29 20:59:46      阅读:74      评论:0      收藏:0      [点我收藏+]

vue简介:

1、 Vue是什么

Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html

Vue只关注视图层。

Vue通过新的属性(自定义)和{{表达式}}扩展了 HTML。

Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

官网:https://cn.vuejs.org/

使用前得引入vue框架js。

 

 

 

 

2.1 holle vue

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="a">
    {{val}}
    <hr>
    {{user.name}}<br>
    {{user.age}}<br>
    {{user.hobby[0]}}
    {{user.hobby[1]}}
    {{user.hobby[2]}}<br>
    {{user}}<br>
    {{user.hobby}}<hr>
    <hr>
    {{eat("吃吃")}}
    {{eat2("吃吃")}}
</div>
</body>
<script type="text/javascript">
    let a = new Vue({
        el:"#a",
        data:{
            val:"来来来来",
            user:{
                name:"哈哈",
                age:"25",
                hobby:[,,rap]
            }
        },
        methods:{
            eat(food){
                console.log("吃吃"+food)
            },
            eat2:(food)=>{
                console.log("吃吃2"+food)
            },
            eat3:function (food) {
                console.log("吃吃3"+food)
            }
        },
        created(){
            console.log("-----vue刚出生------");
        },
        mounted(){
            console.log("------钩子------");
            // this.eat("栗子");
            // this.eat2("桃子");
            // this.eat3("苹果");
        }
    })
</script>
</html>

 

2.1  vue 表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="a">
        5+5:{{5+5}}<br>
        5*5:{{5*5}}<br>
        5-5:{{5-5}}<br>
        5/5:{{5/5}}<br>

        5+"5":{{5+"5"}}<br>
        "5"*"5":{{"5"*"5"}}<br>
        "5"-5:{{"5"-5}}<br>
        5/"5":{{5/"5"}}
    </div>

</body>
<script type="text/javascript">
    let a = new Vue({
        el:"#a",
        data:{

        }
    })
</script>
</html>

 

 

 

Vue

原文:https://www.cnblogs.com/bigbigxiao/p/11959982.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!