Vue

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>

 

 

 

posted @ 2019-11-29 19:58  肖镜泽  阅读(203)  评论(0)  编辑  收藏  举报