undefined
我个人理解,vue.js 是一套前端视图层的框架,它只关心视图展示和数据绑定,它的一些语法与 Angular 1 非常相似,如果有 Angular 1 相关的使用经验,上手会非常快。
undefined
相比较其他的 React、Angular 2 等 MVVM 框架,它更加的轻量,效率也更高,也能更好的与其他库集成。
undefined
它拥有以下几个出色的特性:
undefined
undefined
当前最新的版本为 2.1.4。后续也会在这个版本下演示 Demo。
undefined
undefined
下载安装 Node.js 环境,安装成功后在命令行窗口依次执行以下命令:
undefined
- > npm install bower - g > npm install express - generator - g
undefined
安装完成后进入工程目录(随意新建一个目录),依次执行以下命令,创建一个名为 vue-demo 的项目:
undefined
- 1 > express vue - demo--view = ejs 2 > cd vue - demo 3 > npm install 4 > bower init 5 > bower install requirejs--save 6 > bower install vue--save
undefined
所有命令执行成功后,在项目根目录手动增加一个名为. bowerrc 文件,内容如下
undefined
- 1 {
- 2 "directory": "public/plugins/"3
- }
undefined
为了后面显示的 demo 页面好看一点,再引入 bootstrap。这步不是必须的
undefined
- > bower install bootstrap--save
undefined
最终的目录结构如下
undefined
undefined
undefined
按照惯例,学习一个新的语言,都要先问候一下我们这个精彩的世界。修改 views/index.ejs 文件内容
undefined
- 1 < !DOCTYPE html > 2 < html lang = "zh-cn" > 3 4 < head > 5 < meta charset = "utf-8" > 6 < meta http - equiv = "X-UA-Compatible"content = "IE=edge" > 7 < meta name = "viewport"content = "width=device-width, initial-scale=1" > 8 < title > Index < /title>
- 9
- 10 <!-- Bootstrap -->
- 11 <link href="plugins/bootstrap / dist / CSS / bootstrap.min.css " rel="stylesheet ">
- 12 </head>
- 13
- 14 <body>
- 15 <div id="app " class="container ">
- 16 <input type="text " v-model="message " />
- 17 <p>{{message}}</p>
- 18 </div>
- 19
- 20 <!-- requirejs main -->
- 21 <script src="plugins / requirejs / require.js " data-main="javascripts / index.js "></script>
- 22 </body>
- 23
- 24 </html>"
undefined
在 public/javascrips 目录里新建一个文件 index.js ,内容如下
undefined
- 1 /// <reference path="../plugins/requirejs/require.js" />
- 2 3 require.config({
- 4 baseUrl: "plugins",
- 5 paths: {
- 6 jquery: "jquery/dist/jquery.min",
- 7 bootstrap: "bootstrap/dist/js/bootstrap.min",
- 8 vue: "vue/dist/vue.min"9
- }
- 10
- });
- 11 12 require(['jquery', 'bootstrap', 'vue'],
- function($, bootstrap, Vue) {
- 13
- var vm = new Vue({
- 14 el: "#app",
- 15 data: {
- 16 message: "Hello world!"17
- }
- 18
- });
- 19
- });
undefined
在命令行窗口的项目目录下执行命令 npm start ,访问 http://localhost:3000/
undefined
undefined
修改文本框里的内容,下方文字也会跟着变化
undefined
undefined
这是一个简单的双向数据绑定的例子。通过 Vue 类型构造了一个根实例,分别给 el 属性赋值需要绑定的页面元素 ID,给 data 属性赋值需要绑定的数据。在页面里,通过给 input 元素添加指令 v-model ,绑定到数据的 message 属性。在 p 元素里通过表达式 {{message}} 绑定 message 属性。这样页面就能直接展示绑定的数据内容,在改变 input 的内容时,也能同步改变下方文本内容。
undefined
undefined
通过 Vue 实例可以直接访问绑定的数据的属性。修改 index.js 文件内容:
undefined
- 1 require(['jquery', 'bootstrap', 'vue'],
- function($, bootstrap, Vue) {
- 2
- var d = {
- 3 message: "Hello world!"4
- };
- 5 6
- var vm = new Vue({
- 7 el: "#app",
- 8 data: d 9
- });
- 10 11 // 属性代理
- 12 console.log('vm.message = ' + vm.message);
- 13 console.log('vm.message === d.message? ' + (vm.message === d.message));
- 14
- });
undefined
访问页面,查看浏览器控制台显示如下:
undefined
undefined
从上面的例子可以看到, vm 实例 "代理" 了绑定的数据对象,通过实例可以直接访问数据对象里的属性。
undefined
除了能 "代理" 数据对象, vm 实例也有一些内置属性和方法,这些属性和方法都有 $ 前缀。再修改 index.js 内容:
undefined
- 1 require(['jquery', 'bootstrap', 'vue'],
- function($, bootstrap, Vue) {
- 2
- var d = {
- 3 message: "Hello world!"4
- };
- 5 6
- var vm = new Vue({
- 7 el: "#app",
- 8 data: d 9
- });
- 10 11 // 属性代理
- 12 console.log('vm.message = ' + vm.message);
- 13 console.log('vm.message === d.message? ' + (vm.message === d.message));
- 14 15 console.log('vm.$data = ' + JSON.stringify(vm.$data));
- 16 console.log('vm.$data === d? ' + (vm.$data === d));
- 17 18 console.log('vm.$el = ' + vm.$el);
- 19 console.log('vm.$el === div.#app? ' + (vm.$el === document.getElementById('app')));
- 20 21 // 内置方法
- 22 vm.$watch('message',
- function(oldVal, newVal) {
- 23 console.log('oldVal is: ' + oldVal);
- 24 console.log('newVal is: ' + newVal);
- 25
- });
- 26
- });
undefined
刷新页面,查看控制台:
undefined
undefined
undefined
修改页面文本框的内容,查看控制台:
undefined
undefined
$watch:Vue 实例监视属性变化的内置方法。当被监视的属性改变时,将会触发这个方法。
undefined
undefined
Vue 也提供了在实例化时各个状态变化过程中触发的事件方法。修改 index.js 内容:
undefined
- 1 require(['jquery', 'bootstrap', 'vue'],
- function($, bootstrap, Vue) {
- 2
- var d = {
- 3 message: "Hello world!"4
- };
- 5 6
- var vm = new Vue({
- 7 el: "#app",
- 8 data: d,
- 9 beforeCreate: function() {
- 10 console.log('beforeCreate is triggered.') 11
- },
- 12 created: function() {
- 13 console.log('created is triggered.') 14
- },
- 15 beforeMount: function() {
- 16 console.log('beforeMount is triggered.') 17
- },
- 18 mounted: function() {
- 19 console.log('mounted is triggered.') 20
- },
- 21 beforeUpdate: function() {
- 22 console.log('beforeUpdate is triggered.') 23
- },
- 24 updated: function() {
- 25 console.log('updated is triggered.') 26
- },
- 27 beforeDestroy: function() {
- 28 console.log('beforeDestroy is triggered.') 29
- },
- 30 destroyed: function() {
- 31 console.log('destroyed is triggered.') 32
- }
- 33
- });
- 34
- });
undefined
刷新页面,查看控制台:
undefined
undefined
修改文本框内容,查看控制台:
undefined
undefined
函数首次被调用。
- render
undefined
下面是完整的生命周期图示:
undefined
undefined
来源: http://www.cnblogs.com/niklai/p/6127874.html