vue学习之路 - 1.初步感知

一、安装

　　这里使用node的npm包管理工具进行操作。操作前请先下载node。

　　在工程文件夹中使用以下命令安装vue:

npm install vue

　　如下图所示：我在 helloworld 文件夹中安装vue：

　　// Vue不支持IE8及其以下版本，因为Vue使用了IE8不能模拟的ECMAScript5特性。Vue.js支持所有兼容ECMAScript5的浏览器。

二、Vue初步感知

1、Hello World

初步认识：vue相当于一个高级的模板引擎

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>vue-Hello World</title>

 </head>

 <body>

   <!--

     0. 引包

     1. new Vue() 实例化 Vue 应用程序

     2. 根据你的视图界面配置 data 数据

     3. 通过 el 选项配置需要用 vue 管理的 DOM 节点入口

   -->

   <script src="node_modules/vue/dist/vue.js"></script>

   <div id="app">

     <h1>{{ message }}</h1>

   </div>

  <!-- 1. new Vue() 实例化 Vue 应用程序 -->

   <script>

     // 高级模板引擎

     new Vue({

       el : '#app' ,    // el 是element 元素的意思

       data : {         // 数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。

         message : 'hello vue.js'    // 根据你的视图界面配置 data 数据

       }

     });

   </script>

   <!-- Vue 你就把当做一个高级的模板引擎，在 data 中的数据，就可以直接在被 vue 管理的DOM中，直接通过模板语法来使用 -->

 </body>

 </html>

HelloWorld-代码

el：绑定DOM元素，绑定规则：一般都是你哪些DOM需要被vue所管理，那么你就绑定这些DOM元素所在的DIV。

代码运行结果：

2、vue中的数据是响应式的

数据变化页面会自动更新。

如上图，拿到vue实例后，我们可以直接通过vue对象实例，来访问操作data中的数据成员。

3、数据绑定：

一般的标签绑定数据都是通过 {{ }} 就可以做到。如上面的例子。

但是表单元素比较特殊，在vue中需要使用v-model来进行绑定。

如：

 <input type="text" v-model="message">

v-model//自定义标签特殊属性，HTML不识别，但是vue会识别。

双向数据绑定：

v-model 是 Vue 提供的一个特殊的属性，在 Vue 中被称之为指令

它的作用就是：双向绑定表单控件

什么是叫双向数据绑定？

当数据发生改变， DOM 会自动更新

当表单控件的值发生改变，数据也会自动得到更新

　　如下图：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>vue-表单元素双向数据绑定</title>

</head>

<body>

  <script src="node_modules/vue/dist/vue.js"></script>

  <div id="app">

   <!--

      表单元素比较特殊，在 vue 中需要使用 v-model

      这个特殊的 HTML 属性(vue指令)

    -->

    <h1>{{ message }}</h1>

    <input type="text" v-model="message">

    <h2>{{ foo }}</h2>

    <input type="text" v-model="foo">

    <h3>{{ apple }}</h3>

    <input type="text" v-model="apple">

  </div>

  <script>

    var app = new Vue({

      el : '#app' ,

      data : {

        message : 'hello vue.js',

        foo : 'fooMessage',

        apple: 'appleMessage'

      }

    });

    console.log  (app.message);

  </script>

</body>

</html>

数据双向绑定例子源码

4、事件绑定：

我们可以通过被vue管理的模板中使用方法绑定使用：

v-on:事件名称="methods中的方法名称"的方式来为其注册特定的事件处理函数

如图所示：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>vue-事件绑定</title>

</head>

<body>

  <div id="app">

    <input type="text" v-model="number"><br/>

    <!-- 事件绑定： vue中事件绑定需要用v-on:指令-->

    <!-- 如果函数语句简单可以直接内联写 -->

    <button v-on:click="number++">点击数字++</button><br/>

    <!-- 如果函数语句比较多，建议写到 JavaScript 中 -->

    <button v-on:click="handleIncrement">点击数字++</button>

  </div>

  <script src="node_modules/vue/dist/vue.js"></script>

 <!-- 1. new Vue() 实例化 Vue 应用程序 -->

  <script>

    new Vue({

      el : '#app' ,

      data : {

        number : 1

      },

      methods : {

        // 注意：方法写到 data 中可以，但函数内部的 this 是指向 window 的。

        // 而写在methods中的方法的this指向 vue 实例本身，

        // 所以我们建议把方法写到 methods 选项中.

        handleIncrement : function () {

          console.log(this);

          // 在 methods 中注册的方法,可以很方便的访问 vue 实例的各个属性和对象

          this.number++ ;

        }

      }

    });

  </script>

</body>

</html>

Vue 中的事件绑定

初步认识：

目前我们发现Vue给我们带来最大的一个好处是，：不需要DOM操作了(vue内部解决)

还有就是Vue其实就是一个更高级的模板引擎。

在页面中具有被Vue管理的程序(DOM)入口（不能是html、body）
通过new Vue创建Vue应用程序实例
把页面中所有要操作的DOM，通过数据绑定的方式来处理

　■ 在data中声明：

　　　■ 在模板中通过特殊的语法来使用

　　　　　◆ {{ }}使用在非表单元素、h1、p等

　　　　　◆ v-model=””使用在表单元素

　　　■ 处理事件的方式

　　　　　◆ 在methods中定义方法

　　　　　◆ 在模板中通过v-on:事件名称="methods中的方法名称"的方式来注册特定的事件处理函数

　　　■ 通过el选项来声明被Vue管理的模板入口

　　　　◆ 不能是html和body

　　　　◆ 是普通元素节点

在Vue中，通过模板绑定的数据都是响应式的

　　　■ 数据如果一旦变化，则绑定该数据的视图元素也会得到改变

　　　■ 视图元素一旦变化，则绑定的数据也会跟着改变。