vue学习之路 - 2.基本操作（上）

基本操作（上）

本章节简介：

　　　　vue的安装

　　　　vue实例创建

　　　　数据绑定渲染

　　　　表单数据双向绑定

　　　　事件处理

安装

　　安装方式有三种：

　　　　一、vue官网直接下载

　　　　　http://vuejs.org/js/vue.min.js

　　　　二、使用CDN方法

1. BootCDN（国内） :https://cdn.bootcss.com/vue/2.2.2/vue.min.js， （国内不稳定）
2. unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。（推荐使用）
3. cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>）

　　　　二、使用node.js的npm包管理工具下载

npm install vue

Vue实例

    new Vue({
      el : ' ' ,
      data : {  },
      methods : {  }
      }
    });

　vue实例中几个最基本的属性el、data、methods，作用如下：

　- el

　　　　■ 指定被Vue管理的模板入口，网页中的DOM节点

　　　　■ 作为模板入口的DOM节点不能是body、html

　　　　■ 必须是一个普通的HTML标签节点，一般是某个 div

　- data

　　　　■ 作用：数据驱动试图中的数据

　　　　■ 不是什么数据都往里面初始化的，一般是根据你的视图来初始化使用：数据驱动视图功能的数据

　　　　■ data中的成员一般叫做和视图交互的响应式数据成员

　　　　■ 以前想要操作DOM，必须给DOM起一个id搞一个标识。现在不需要了，只需要在data中初始化一个数据成员，然后再模板中绑定使用这个成员，我们就可以通过修改数据的方式来改变视图显示

　　　　■ 核心就是把DOM操作思想转变成“数据驱动视图”

　- methods

　　　　■ 一般用来定义事件处理函数

　　　　■ 虽然我们可以把方法写到data中，但是在Vue中更推荐把所有方法都写到methods属性中。因为这样做更加合理，数据和方法分开，分门别类。

　　　　■ 注意：methods中不允许有和data中重名的成员

数据绑定渲染

文本绑定：{{ }}

　- mustache语法 ( 八字胡 ) ，中括号括号里面可以是数据变量或者表达式

　　示例：

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

属性绑定：v-bind

　　- 完整写法： v-bind:属性名称=”数据变量或表达式”

　　- 简写方式： :属性名称=”数据变量或表达式”

示例：

    <!-- 完整写法 -->
    <input type="text" v-bind:value="message">
    <!-- 简写 -->
    <input type="text" :value="message">

下面举例：数据和属性绑定的几种用法和常见错误：

    <!-- 下面以data中的message的各种绑定形式举例： -->
    <!-- 普通文本数据绑定 -->
    <!--
         正确绑定方式
    -->
    <h1>{{ message }}</h1>

    <!--
         错误绑定方式 ： 这里表示的是字符串 message
         {{ }}内不需要加引号，如果加了引号，就会把 message当做字符串处理，而不是data中的数据成员
    -->
    <h1>{{ 'message' }}</h1>

    <!-- 这里表示的是数字 123 ，不和任何数据有关联 -->
    <h1>{{ 123 }}</h1>  

    <!-- 属性绑定方式 -->
    <!--
         错误的用法，属性绑定需要用 v-bind 指令进行绑定,而不能使用八字胡语法
    -->
    <h1 foo="{{ message }}">测试文本</h1>

    <!--
         正确的属性绑定方式： 完整写法(简写去掉 v-bind 只用冒号即可)
    -->
    <h1 v-bind:foo="message">测试文本</h1>

    <!--
      错误的绑定方式 : 同理这里表示的是字符串
    -->
    <h1 v-bind:foo="'message'"></h1>

上面所说的表达式，是指一些简单的Java Script表达式，如下所示：

    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id "></div>>

注意：普通的文本数据绑定和属性绑定都是单向绑定

• 数据改变，视图跟着变
• 视图改变，数据不变

对有些特殊属性，作用方式有所不同，如 class 和 checked

特殊属性class:

• v-bind:class=”{类名:布尔值}”

　　　　■ 当布尔值为true的时候，这作用这个类名

　　　　■ 当布尔值为false的时候，这去除这个类名

基本操作如下：

    <!-- 当item.done 为true的时候，类 complete 就对当前 <li> 起作用 -->
    <li v-bind:class=" { complete : item.done } ">
      <a href="">{{ item.title }}</a>>
    </li>

特殊属性checked：

         checked在html标签中只要有checked属性即为选中的意思，无需true或flase，但在vue中处理了这个误解人的属性，v-bind:checked=“布尔值” ，只有布尔值为true时才有checked属性。

表单数据双向绑定

表单标签的数据绑定需要使用v-model指令来操作，因为表单数据是和用户交互的数据。

　　v-model指令绑定的数据是双向绑定的。

　　数据←→视图（相互影响）

　　表单标签如：文本、多行文本、复选框、单选按钮、选择列表等等。

　　示例：

    <!-- 注意 : 非表单元素不可以使用 v-model 指令进行双向绑定 -->
    <!-- 错误用法：<h1 v-model="message"></h1> -->

    <!-- 表单元素 text 和 textarea 的双向绑定用法 -->
    <input type="text" v-model="message">
    <textarea cols="30" rows="10" v-model="message"></textarea>

    <!-- checkbox 的双向数据绑定的正确用法 -->
    <input type="checkbox" v-model="seen">

    <!-- 注意：checkbox 不能使用属性绑定的用法控制选中状态，如下错误用法示例 -->
    <input type="checkbox" :checked="seen">
    <!--
        这样相当于给checkbox加上 checked 属性，而作为 html 元素的 checkbox
        加了checked属性，无论是 true 还是 false 都是选中状态的。
     -->

事件处理

1. vue中定义事件处理函数
2. DOM中绑定事件处理函数

　　　　■  完整写法：v-on:事件名称=”事件处理函数”

　　　　 ■ 简写方式： @事件名称=”事件处理函数”

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

    <!-- vue中事件绑定需要用v-on:指令-->
    <!-- 完整写法 -->
    <button v-on:click="handleClick">事件绑定完整写法：点击number++</button><br/>

    <!-- 因为事件处理用的比较多，所以vue提供了@事件名称="处理函数"的简写方式 -->
    <button @click="handleClick">事件绑定简写方式：点击number++</button>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el : '#app' ,
      data : {
        number : 1
      },
      methods : {  // 事件处理函数定义在methods中，注意：methods中定义的方法名称不能和data中的数据名称相同
        handleClick : function () {
          console.log(this.number++);
        }
      }
    });
  </script>

效果：

　　

vue安装介绍参考： 三种方式安装(vue-cli)