vuejs学习思路-最简单的vue应用

由于工作需要,开始接触vuejs , 官方文档地址:http://vuejs.org.cn/api/#vm-watch
看知乎大神说vuejs官方文档比较友好,我就很开心的跑去看了一下。

恩!!!?讲的什么鬼?
好了话不多说,我把我学习中的vuejs用直白的话语展现出来,希望对大家有一点点帮助。

先贴最基本的代码 : index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="app">
        {{message}}
        <input type="text" name="" v-model="message">
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data:{
                message:"22"
            }
        });
    </script>
</body>
</html>

首先先导入vue.js ,然后新建一个script标签,在这个新的script标签中编写vue的代码
第一步:new Vue,注意这里的Vue第一个字母大写,这个就是相当于创建一个vue对象
第二步:el选择,el后面的 '#div1'代表的选择器选中了 id=app 的div标签
第三步:定义data中的数据message,html中的用法是: {{message}}
第四步:input框中的内容绑定data中的message,用法: v-model="message"

<h1>觉得本文对你有帮助</h1>
关注简书mid米店,持续分享中。。。

推荐阅读更多精彩内容