Vue.js 起步及七大属性
Vue.js中文文档：Vue 实例 — Vue.js 中文文档 (bootcss.com)
Vue.js API中文文档：API — Vue.js 中文文档 (bootcss.com)
vue.js CDN:
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>Vue.js 起步
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：
var vm = new Vue({
// 选项
})Vue.js 七大属性
el属性
用来指示vue编译器从什么地方开始解析vue语法。例如：
el: "#app" 表示从id为“app”的地方开始解析vue
<body> <div id="app"> </div> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script> var vm = new Vue({ el: "#app" }); </script> </body>data属性
当一个 Vue 实例被创建时，它将
data对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。例如：使用 {{message}} 即可直接获取到vue中data属性的message的内容；
<body> <div id="app"> {{message}} </div> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script> var vm = new Vue({ el: "#app", data:{ message: "hello vue" } }); </script> </body>当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于
data中的 property 才是响应式的。也就是说如果你添加一个新的 property，比如：我在控制台输入vm.message = "231321" 视图立刻进行渲染 原来的"hello vue"变成了"231321"，但是当我在控制台给data中不存在的property进行赋值时，视图是不会改变的；
如果我们一开始不需要使用一些property，后续会使用到的情况下，我们设置一些初始值即可，例如：
data: { newTodoText: '', visitCount: 0, hideCompletedTodos: false, todos: [], error: null }template属性
用来设置模板，替换页面元素，包括占位符。
methods属性
放置页面的一些业务逻辑，js的一些方法就可以放置在methods中。例如：
值得注意的是，当我们绑定方法时用到了 v-on 指令。方法中的 this 指的是vm，当点击按钮时，页面弹出提示框。
<body> <div id="app"> <!--按钮绑定方法--> <button v-on:click="sayHi()">click me</button> </div> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script> var vm = new Vue({ el: "#app", data:{ message: "hello vue!" }, methods:{ sayHi: function (){ alert(this.message); } } }); </script> </body>- render属性
- computed属性（计算属性）
- watch属性
本文系作者 @WangJun 原创发布在wangjun's blog站点。未经许可，禁止转载。
暂无评论数据