vuejs学习记录（一）

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

　　　之前接触学习过angularJS，这两个框架确实有很多相似的地方。与ng相比vueJS不需要自己再创建控制器。

　　　　

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

数据绑定;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app-5">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">逆转消息</button>

    </div>
    <script>
        var app=new Vue({
            el:"#app-5",
            data:{
                message:'HELLO WCY'
            },
            methods: {
              reverseMessage:function()
        {
            var type=typeof(this.message);
            console.log()
            console.log(this.message.split(''))
            this.message=this.message.split('').reverse().join('')
        }
        }
        })
    </script>
</body>
</html>

 

posted @ 2017-07-11 09:38  大未必佳  阅读(192)  评论(0)    收藏  举报