Vue学习笔记

1.建立实例

• vue框架提供了一个Vue的构造函数（类），咱们经过实例化Vue，产生一个vue对象，来构建应用； 例如:new Vue();
• 在实例化Vue的时候，传入一些配置参数这些配置参数在Vue官网的api中能够找到 ： 选项
  • el : 提供一个在页面上已存在的 DOM 元素做为 Vue 实例的挂载目标。能够是 CSS 选择器，也能够是一个 HTMLElement 实例。
  • data : 提供了vue中须要使用的数据

  new Vue({
  el: document.getElementById('#app')
  el: '#app',
  data: {
      message: 'Hello Qianx!'
  }
  });
  复制代码

２．视图–view

• 用户看到的界面

3.模板

• 产生页面视图的基础结构 - html

４．模版语法

• 插值表达式
• 数据绑定最多见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：{{ msg }}
• {{}}中的内容能够被vue做为一种js表达式去解析
• new Vue会产生一个对象，该对象下会保存vue实例的一些属性和方法，供咱们去调用。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。

5.数据单向绑定

• Vue实例会监听data中数据，当数据发生变化，自动渲染视图
• data -> view
• 在vue中有单向绑定和双向绑定，可是不一样的语法支持不一样绑定方式
• {{}} 只支持单向绑定

  <div id="app">
         {{message}}
         <p>{{arr}}</p>
  </div>
  复制代码

• 在vue中有单向绑定和双向绑定，可是不一样的语法支持不一样绑定方式;
• (angular2支持3种绑定方式：a. 数据->view b.vew->数据 c.双向绑定)
• {{}} 只支持单向绑定

6.指令

• v-html：单向绑定,更新元素的 innerHTML<h1 v-html="message"></h1>
• v-model 双向绑定,在表单控件或者组件上建立双向绑定

  <input type="text" v-model="message">
  <p>你输入了 {{message.length}} 个字符</p>
  复制代码

• 它会根据控件类型自动选取正确的方法来更新元素。

注意：不是全部标签都支持v-model.

• v-for 根据数据循环结构
• v-bind 绑定标签的属性，经过他咱们能够给一个指定的标签属性绑定表达式;

  <li v-bind:class="{red: user.gender=='女'}" v-for="user in users" v-if="user.age>20">
          {{user.username}} - {{user.gender}} - {{user.age}}
  </li>
  复制代码

• v-on:参数
  • 给元素绑定事件，参数就是事件的名称;
  • 事件函数写在Vue实例的methods属性中

  <button v-on:click="add">添加</button>
  data: { 
      methods: {
          add() {
              /*不要获取元素进行操做*/
              //this => 表示当前vue的实例
              //app.newData
              //console.log(this.newData);
              this.users.push({
                  username: this.newData.username,
                  gender: this.newData.gender,
                  age: this.newData.age
              });         
          }
      }
  复制代码