Hello World

Vue

一.Vue简介

Vue.js (类似于 view) 是一套构建用户界面的渐进式框架。

与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

 

二.初步体验

1.在HTML元素显示数据

<body>

    <div id="test">
        <p>{{count}}</p>
        <p>{{count + 33}}</p>

        <p v-text="count+0.01"></p>
        <div v-html="str"></div>
    </div>

    <script>
        new Vue({
            el:'#test',
            data:{
                count:10,
                str: "<input type='button' value='ComeOn'>"
            }
        })
    </script>

 

 2.指令:通过指令，来给DOM元素赋值或者其它操作

v-show
    根据表达式的真假值，动态地显示、隐藏元素
v-if\v-else
    根据表达式的真假值，动态地插入、移除元素

 

<body>
    <div id="test">
        <div v-show="ok">大宝，二宝，三宝</div>
        <p v-if="yes">
            敌军还有30秒，到达现场！！！
        </p>
        <p v-else>
            轻轻的走了，正如你轻轻的来！
        </p>
    </div>

    <script>
    var vm = new Vue({
        el: "#test",
        data: {
            ok: true,
            yes:true
        }
    })
</script>

</body>

 

 ------------------------------------------------------------------------------------------------------------

v-for
    根据数值渲染元素列表
v-bind
   绑定元素的属性，可以动态改变

 

<body>
       <div id="myapp">
        <ul>
            <li v-for="(item, index) in arr">
                数值：{{item}}
                下标：{{index}}
            </li>
        </ul>

        <ul>
            <li v-for="(item2,key2) in obj">
                {{item2}}
                {{key2}}
            </li>
        </ul>

        <ul>
            <li v-for="item in obj2">
                {{item.name}}
                {{item.sex}}
                {{item.age}}
            </li>
        </ul>

    <a v-bind:href="url1">界面</a>
    <a :href="url">百度</a>

    </div>


<script>

    var vm = new Vue({
        el: "#myapp",
        data:{
            arr: [11,22,33,44,55,66],
            obj: {name:"大宝",sex:"女",age:18},
            obj2:[{name:"二宝",sex:"女",age:20},{name:"如烟",sex:"女",age:18}],
            url: "http://www.baidu.com",
            url1:"http://www.jiemian.com"
        }
    })
</script>

 

-------------------------------------------------------------------------------------------------------------------------

v-on
    根据命令监听且执行事件

 

<body>

   <div id="myapp">
       <input type="button" value="点我点我" @click="showme">
       <input type="button" value="wowo" v-on:click="showme">
   </div>


<script>

    new Vue({
        el: "#myapp",
        data:{
            temp: "去看大海!!!"
        },
        methods: {
            showme: function () {
                alert(this.temp)
            }
        }
    })
</script>

 -------------------------------------------------------------------------------------------------------------------------------------------------

 

v-model：数据双向绑定
    它是把视图和数据进行双向绑定，通过视图可以改变数据，也可以通过数据改变视图

<body>

    <div id="test">

        <input type="text" v-model="showtemp">
        <p>{{showtemp}}</p>


        <input type="button" value="显示显示" v-on:click="showme">
        <select v-model="sel">
            <option value="111" selected>
                111
            </option>
             <option value="222">
                222
            </option>
             <option value="333">
                333
            </option>
        </select>

    </div>

    <script>
        var vm = new Vue({
            el:'#test',
            data:{
                showtemp:'',
                sel:'111'   //默认显示 111
            },
            methods:{
                showme:function(){
                    alert(this.sel)
                }
            }
        })
    </script>

</body>
代码示例

 

 

posted @ 2017-11-16 22:33  nayike  阅读(172)  评论(0)    收藏  举报

Hello