Vue数据绑定

吗，0

---

前言

---

Vue实战.js第一章笔记

一、实例与数据绑定

1.实例与数据

1. 通过构造函数创建vue根实例。
2. el指定已经存在的DOM元素挂载到Vue实例，可以是HTMLElement，也可以是CSS选择器。

<div id="app"></div>
------------------------------
el: document.getElementById('app'),//或者'#app'

3. data内声明需要双向绑定的数据，建议所有用到的数据都在data内声明。
4. data也可以绑定一个变量，它们之间是相互影响的，一个改变另一个也会改变(这个不是很懂)

  let myData = { a: 1 };

  let app = new Vue({
    el: '#app',
    data: myData,
  });

  console.log(app.a);//1
  console.log(myData.a);//1

  myData.a = 3;

  console.log(app.a);//3
  console.log(myData.a);//3

5. 当挂载成功后，可以通过app.$el来访问被挂载的元素。

2.生命周期

1. created实例创建完成后调用，此阶段DOM尚未挂载，$el 不可用
2. mounted在el挂在到实例上后调用，一般第一个业务逻辑从这里开始。
3. beforeDstroy销毁之前调用，主要解绑一些使用的addEventListener监听的事件等

let app = new Vue({
        el: '#app',
        data: {
            name: '周三'
        },

        created: function() {
            console.log(this.name + 1);
        },

        mounted: function() {
            console.log(this.name + 2);
        }
    });
//生命周期钩子：可以理解成每个生命周期所绑定的回调函数

3.插值与表达式

1. 使用{{}}插入将数据解析后的纯文本，会自动将双向绑定的数据实时显示出来。
2. 使用v-html插入可以按照html语法解析出来的代码块，使用v-html插入的标签会替换.test内部的所有内容

<div id="app">
	    <div v-html="link" class="test">
	        <span>span</span>
	    </div>
</div>
-------------------------------------------
let app = new Vue({
        el: '#app',
        data: {
            link: '<span>这是通过v-html插入的span</span>'
        }
    })
//在.test内部插入标签,使用v-html插入的标签会替换.test内部的所有内容

3. Vue只支持单个表达式，不支持语句和控制流。在表达式中，不能使用自定义的全局变量，只能使用Vue白名单内的全局变量

4. 使用v-pre的标签，{{}}中的代码不会被编译，而是直接跳过

<span v-pre>{{这里是不会被编译的内容}}</span>

4.过滤器

1. 在{{}}内可以使用'|'对数据进行过滤。过滤的规则是通过filters自定义的 。
2. 过滤器只实现简单的文本转换，复杂的数据变换用计算属性
3. 过滤器可以传递参数

 <div id="app">{{date | formaDate(arg1,arg...) }}</div>
 ---------------------------------------------------
 filters:{
	formaDate：function(date,arg1,arg2...){
		函数体
		return: 返回值作用于date
	}
 }
//过滤器的第一个参数默认是date数据，自己传的参数是第二个到第n个
//每当date的数据更新，会自动调用过滤器的formaDate方法一次，串联也是一样。
//只要调用了过滤函数，过滤器函数的返回值就会作用到绑定的date上,不写返回值或者return则date数据在网页上显示空白

4. 过滤器可以串联

 {{date| m1 |m2 | ...}}
 //串联参数的传递与普通的一样,会按照顺序调用，但是只有最后一个过滤函数的返回值才会作用于date数据
 //(其实是后面过滤函数的返回值覆盖了前面函数的返回值)

二、指令与事件简介

1. 指令的只要职责就是在表达式的值发生改变的时候将某些行为应用到DOM上。
2. v-bind指令：动态更新HTML元素上的属性。比如id，class，src…等等

 <img v-bind:src="imgUrl">
 ----------------------------
  data: {
            imgUrl: 'www.baidu.com',
        }

3. v-on指令：用来绑定事件监听，事件监听都必须以函数的形式写在methods里面，并且里面所有函数的this指向的都是Vue实例

 <p v-if='isShow'>this is text!</p>
 <button v-on:click='handleClose'>点击隐藏</button>
 -------------------------------------------------
 methods: {
            handleClose: function() {
                this.isShow = false; //this即Vue实例
            }
        }

内联式写法，不建议用，维护性差。

 <button v-on:click='isShow=false'>点击隐藏</button>

3. v-model指令，作用于表单元素上，它绑定的数据就是input元素输入的值

  <div id="app">
    <input type="text" v-model="name" placeholder="你的名字">
    <p>{{name}}</p>
  </div>
---------------------------------------------------------
  el: '#app',
    data: {
      name: ''
    }
//此时在input框里输入的内容会显示在p标签内

4. v-if，需要注意的是真或假显示的是标签整个本身，而不是标签的内容

<p v-if="isShow">为真显示整个p标签，假则不显示</p>

三、注意

1. 建议所有的数据都预先在data内声明，防止数据在逻辑中丢失。
2. 在{{}}中，除了可以绑定属性，还可以使用简单的运算，三元运算等
3. 在vue中不要主动操作DOM，做到数据与页面分离。管理好数据，DOM的事情vue会自动搞定。

四、问题

1. 经过测试，methods和created里的this并不相等，虽然它们都是vue实例