Vue_01 初次见面 请多指教

模板

因为我们通常需要根据用户的操作或者不同的数据得到不一样的界面，所以模板并不会直接出现在用户面前（DOM结构中），而是需要通过一个解析的过程，把模板解析成最终的 html 结构，然后再渲染到实际的 DOM 结构中。

模板 -> 解析 -> DOM

template 选项

组件的模板其实就是一段类似 html 的字符串，该内容会被 Vue 进行解析，得到解析后的 HTML ，然后渲染到指定的位置。

挂载组件

###.$mount() 方法

在 Vue 中，组件需要调用其 $mount 方法去指定渲染后的结果（结构）所在的 DOM 结构的位置，我们称其为 挂载。

组件被创建并不意味着它会立即出现在 DOM 中，如同原生的 createElement 一样，还需要通过 appendChild、replaceChild 等方法添加到DOM结构指定的位置中。

 <script>
          let app=new Vue({
              template:`
              <div id="app">
              <input type="text" v-model="title" />
              <span>{{title}}</span>
              </div>
              `,
              data:{
                  title:222,
              },
          })
          console.log(app.title)
          app.$mount('#app');// 需要有一个容器来装循环的元素在原html中需要定义一个#app的盒子
      </script>

data 选项

Vue 提供了一些选项用来存储当前组件需要使用到的数据，data 就是其中一个常用的选项。

• data 的值必须是一个对象或者返回对象的函数

• new Vue 组件中的 data 可以是对象，也可以是返回一个对象的函数

• 可复用组件的 data 必须是一个返回对象的函数

• Vue 提供了多种形式去访问 data 数据

  • 组件对象.$data.数据
  • 组件对象._data.数据
  • 组件对象.数据

模板语法

为了方便我们在模板中使用组件中的数据，Vue 为我们提供了一种称为：插值表达式的 模板语法。

插值语法

默认情况下，Vue 使用的是 {{表达式}} 这种双大括号文本插值语法（Mustache），我们可以在 {{}} 直接调用组件中的数据和方法，或者直接书写 js 表达式。

响应式

响应式 - 是 Vue 有别于普通模板引擎的一个重要特性。当数据发生改变的时候，Vue 会自动更新有关视图，让我们把更多的精力投入到数据、业务处理等任务中。

使用指令进行更强大的 DOM 操作

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方在于，指令的值是引号括起来的 表达式，不同的指令有不同的作用，vue 内置了一些常用的指令，后期我们还可以自定义属于自己的指令。

• 指令值中不能使用 {{}}

内置指令的一些分类：

• 内容输出
• 循环
• 逻辑
• 属性绑定
• 事件
• 其它

条件渲染

v-show 指令

根据表达式的值（布尔值），切换元素的显示与隐藏（display 属性）。

     let app=new Vue({
          template:`
          <div v-show="boolen">
          
          <h1>这是一个测试数据显示与隐藏的的元素</h1>
          </div>
          
          `,
          data:{
              boolen:true,
          }  
      })
      app.$mount('#app');
      
  </script>

适用于状态切换比较频繁的情况

### v-if 指令

根据表达式的值（布尔值），创建或销毁元素。在为false的时候在文本中是没有创建该元素的**

<script>
          let app=new Vue({
              template:`
              <div v-if="boolen">
              
              <h1>这是一个测试数据显示与隐藏的的元素</h1>
              </div>
              
              `,
              data:{
                  boolen:true,
              }  
          })
          app.$mount('#app');
          
      </script>

适用于状态切换不频繁的情况

列表渲染

v-for 指令

根据数据循环渲染 v-for 指令所在的元素及其子元素

可以循环的数据：Array | Object | number | string | Iterable (2.6 新增)

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-for 中也可以使用 of 语法，在 vue 中两者没有什么区别

12、属性绑定

12-1、v-bind 指令

绑定数据（表达式）到指定的属性上，<div v-bind:参数="值/表达式"></div>，这里的参数就是指定的属性名称

<div id="app">
  <div v-bind:id="'box1'"></div>
  <div v-bind:id="myId"></div>
</div>

<script>
	new Vue({
    el: '#app',
    data: {
      myId: 'kaikeba'
    }
  })
</script>

12-1-1、缩写

有的一些常用指令会有对应的缩写，v-bind 对应的缩写为：:

<div :id="myId"></div>

12-2、普通属性绑定

上述就是普通的属性绑定方式，Vue 针对样式相关的绑定的值上有一些特殊的处理。

12-3、样式与class绑定

12-3-1、style

原生普通写法

<div style="width: 100px; height: 100px; background: red"></div>

v-bind 写法

<div :style="'width: 100px; height: 100px; background: red'"></div>

对象写法

<div :style="style1"></div>

...
<script>
new Vue({
	el: '#app',
	data: {
		style1: {
      width: '100px',
      height: '100px',
      background: 'green'
    }
	}
});
</script>

**
数组写法v-bind 写法

<div :class="'box1 box2'"></div>

数组写法

<div :class="['box1', 'box2']"></div>

对象写法

<div :class="{'box1': isActive, 'box1': isChecked}"></div>

使用对象写法，可以根据值（boolean）动态添加对应的 class**

<div :style="[style1, style2]"></div>

...
<script>
new Vue({
	el: '#app',
	data: {
		style1: {
      width: '100px',
      height: '100px',
      background: 'green'
    }
	},
  style2: {
    border: '1px solid black'
  }
});
</script>

class

v-bind 写法

<div :class="'box1 box2'"></div>

数组写法

<div :class="['box1', 'box2']"></div>

对象写法

<div :class="{'box1': isActive, 'box1': isChecked}"></div>

使用对象写法，可以根据值（boolean）动态添加对应的 class原生普通写法**

<div class="box1 box2"></div>

v-bind 写法

<div :class="'box1 box2'"></div>

数组写法

<div :class="['box1', 'box2']"></div>

对象写法

<div :class="{'box1': isActive, 'box1': isChecked}"></div>

使用对象写法，可以根据值（boolean）动态添加对应的 class

13、单向数据流与双向数据属性绑定

通过上面的知识点和案例，我们可以看到，当数据更新的时候，页面视图就会更新，但是页面视图中绑定的元素更新的时候，对应的数据是不会更新的

<input type="text" :value="title" />

我们称为：单向数据流 数据 -> 视图

在 vue 中，还有一种双向数据流绑定的方式

v-model 指令

<input type="text" v-model="title" />

数据 title 更新，视图中 input 的 value 就会更新。同时，当 input 中的 value 更新的时候，数据 title 也会更新。

⚠️：不是所有元素组件都支持 v-model 的，默认情况下，input、select 等可交互的表单元素支持。⚠️

  <script>
      let app=new Vue({
          template:`
          <div id="app">
          <input type="text" v-model="title" />
          <span>{{title}}</span>
          </div>
          `,
          data:{
              title:222,
          },
      })
      console.log(app.title)
      app.$mount('#app');// 需要有一个容器来装循环的元素
      console.log(app)
      
 
  </script>

14、表单

v-model 在内部为不同的输入元素使用不同的属性和事件来处理数据

• text 和 textarea
• checkbox 和 radio
• select

14-1、text 和 textarea

text 和 textarea 元素使用 value 属性和 input 事件

<div id="app">
  <input type="text" v-model="v1" />
  <textarea v-model="v2" cols="30" rows="10"></textarea>
</div>

let app = new Vue({
  el: '#app',
  data: {
    v1: 'aaa',
    v2: 'bbb'
  }
});

14-2、checkbox 和 radio

checkbox 和 radio 使用 value 属性和 change 事件

单选框绑定一个值

<div id="app">
  <input type="radio" v-model="v3" value="男" /> 男
  <input type="radio" v-model="v3" value="女" /> 女
</div>

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

多选框绑定到一个布尔值或数组

<div id="app">
  <input type="checkbox" v-model="v4" /> 同意
  <hr/>
  <input type="checkbox" v-model="v5" value="足球" /> 足球
  <input type="checkbox" v-model="v5" value="音乐" /> 音乐
</div>

let app = new Vue({
  el: '#app',
  data: {
    v4: true,
    v5: ['足球', '音乐']
  }
});

select

select 字段将 value 作为 prop 并将 change 作为事件

单选绑定到值，多选绑定到数组

<div id="app">
  <select v-model="v3">
    <option value="男">男</option>
    <option value="女">女</option>
  </select>
  <select v-model="v5" multiple>
    <option value="足球">足球</option>
    <option value="音乐">音乐</option>
  </select>
</div>

事件

在 vue 中，事件通过指令 v-on 指令进行绑定，v-on 缩写 @

v-on 指令

<组件 v-on:事件名称="表达式" />
<组件 @事件名称="表达式" />

methods 选项

在组件选项中，提供了一个 methods 选项，用来存放组件中使用的函数方法。

通过内联方式绑定事件处理函数

• 事件绑定函数中的 this 指向该组件实例。
• 事件绑定函数中的第一个参数默认为 event 对象。

也可以在事件绑定中直接调用函数（并不会立即执行，也是通过事件触发执行的）。

• 事件对象需要手动传入，名称为 $event （该名称是固定名称）。

计算属性

在实际应用开发中，我们会用到各种各样的数据，有的数据是原始数据，而有的数据是根据某种条件通过原始数据计算得到的派生数据。

computed 选项

computed 选项是一个对象，每一个 key 对应一个属性，且该属性是通过 getter/setter 的方式来进行定义的。

computed: {
    checkedAll: {
        get() {
            // 依赖当前get对返回值来更新数据对，所以，这里不支持异步去更新数据
            return this.cartItems.every(item => item.checked);
        },
        set(checked) {
            this.cartItems = this.cartItems.map(item => ({
                ...item,
                checked
            })
            );
        }
    },

}

数据观察

Vue 提供了一个 watch 的选项来对指定的响应式数据进行观察，用于处理一些任务。

使用场景

• 一对多的数据更新
• 异步任务
• 与数据更新无关的其它任务