class1_Vue邂逅

认识vue
安装
初体验
列表渲染案例
计数器案例
Vue中的MVVM
Vue实例传入的options
Vue的生命周期
Vue的template
Vue插值
v-once指令
v-html指令
v-text指令
v-pre指令
v-cloak指令

认识vue

渐进式框架，什么是渐进式呢？
- 渐进式意味着可以将vue作为应用的一部分嵌入原本的项目中，带来更丰富的交互体验
- 或者如果希望更多的业务逻辑使用vue实现，vue就可以使用其核心库以及其生态系统；
- 如core+vue+router+vuex
vue的特点和web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
  安装
CDN引入
- 开发版本：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
- 生产版本：http://cdn.jsdelivr.net/npm/vue
下载和引入
- 开发版本：https://vuejs.org/js/vue.js
- 生产版本：https://vuejs.org/js/vue.min.js

npm安装

初体验

<body>
<div id="app">{{ message }}</div>
<div>{{ message }}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  // 这种方式又叫做：声明式编程
  const app = new Vue({
    el: '#app', // 用于挂载要管理的元素
    data: {  // 定义数据，这里数据发生改变，页面会同步改变
      message: 'hello Vue'
    },    
  })
  // 原生js的做法（也叫命令式编程）
  // 1、创建div元素，设置id属性
  // 2、定义一个变量叫message，并给其赋值
  // 3、获取该div对应的DOM对象，设置其innerText/innerHtml来显示
  // 4、如果要修改message数据。则需要重新设置DOM元素的innerText来改变数据
</script>
</body>

代码做了什么事情？
- 首先，创建了一个Vue对象
- 传入了一些options{ el, data, …. }
- 其中el表示：这个Vue对象挂载到哪一个元素上，这里挂载到了id为app的元素上
- 其中的data表示：我们要使用的一些数据，这些数据可以是我们直接定义出来的，也可以是从服务器上获取的

浏览器执行代码的过程

首先解析原来的HTML代码，这时其内部还是显示的{{ message }}，而不是’hello Vue’

执行到Vue实例时，就会返回上面去解析{{ }}中的内容

列表渲染案例

<body>
<div id="app">
<ul>
 <li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
 el: '#app',
 data: {
   message: 'hello',
   movies: ['阿甘正传','星际穿越','大话西游','少年派','盗梦空间']
 }
})
</script>
</body>

计数器案例

<body>
  <div id="app">
    <h2>当前计数：{{counter}}</h2>
    <button v-on:click="increase">+</button>
    <button v-on:click="decrease">-</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        counter: 0,
      },
      methods: {
        increase: function() {
          this.counter++
        },
        decrease: function() {
          this.counter--
        }
      }
    })
  </script>
</body>

这里的methods属性用于在Vue对象中定义方法
这里的v-on:click 也可以写做 @click 可以用来监听某个元素的点击事件，并且当点击事件发生时，执行相应的方法，该方法通常是methods中定义的方法

Vue中的MVVM
它是 Model-View-ViewModel 的简称，它由View，ViewModel，Model三部分组成。View层代表的是视图、模版，负责将数据模型转化为UI展现出来。Model层代表的是模型、数据，可以在Model层中定义数据修改和操作的业务逻辑。ViewModel层连接Model和View。
在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理。

View层

<template>
  <div id="app">
  <div>
    <input type="text" v-model="title">
    <button @click="add">submit</button>
  </div>
  <ul>
    <li v-for="item in list" :key="item">{{item}}</li>
  </ul>
</div>
</template>

Model层

<script>
let date = {
    title: '',
  list: []
}
</script>

ViewModel层

<script>
  let vm = new Vue({
    el: '#app',
  data: data,
  methods: {
      add: function() {
        this.list.push(this.title)
      this.title = ''
    }
  }
})
</script>

Vue实例传入的options

传入的这个对象中可以包含哪些属性呢？
最基础的三个：el，data，methods

Vue的生命周期

生命周期：事物从诞生到消亡的整个过程
我们在new Vue( { } ) 时，Vue内部都会做很多的事情，而生命周期就是把整个的过程划分为不同的阶段
每个阶段都有一个特定的函数，用于在该阶段添加一些相关的操作（create, mounted等）
比如常用的当组件加载完成后，调用created函数，用于请求一些数据，然后将数据放进data中，再展示到页面上
生命周期函数也叫钩子函数（Hook），我的理解：把整个Vue实例的过程比作一个绳子的话，我们就是在特定的节点将其勾过来进行一些操作

Vue的template

Vue插值

如何将Vue中的在DOM中显示
mustache {{ }} 翻译为胡须，双大括号很像胡须 0.0
mustache语法中不仅可以直接写变量，也可以写简单的表达式，如 {{ firstname + lastname }}
{{ firstname + ‘ ‘ + lastname }}，也可以加空格
{{ counter * 2 }} 数字乘以2

v-once指令

适用于：只渲染一次的元素，不会随着数据的改变而发生改变

<div id="app">
  <h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script>
  const vm = new Vue({
    el: '#app',
  data: {
      message: '你好呀'
  }
})
</script>

此时如果在浏览器的控制台中修改 app.message = ‘哈哈哈’ ，第一行会发生改变，而第二行不会发生变化；

v-html指令

适用于：要展示的数据中有一些html标签时

<div id="app">
  <h2>{{url}}</h2>  <!--<a href="www.baidu.com">百度一下</a>-->
<h2 v-html="url"></h2>  <!--百度一下-->
</div>
<script>
  const vm = new Vue({
    el: '#app',
  data: {
      message: 'hello',
    url: '<a href="www.baidu.com">百度一下</a>'
  }
})
</script>

有时候我们请求回来的数据是标签形式的，如上所示，如果我们直接渲染，就会在页面上显示百度一下这种字符串形式，但是我们想让其显示为a标签的形式，这时就要使用v-html指令
v-html指令可以让其后面的以html的形式展示

v-text指令

与模板语法效果相同，但是不够灵活，不常用，而且他会覆盖原本{{ }}中的内容

<div id="app">
  <h2>{{message}}</h2> <!--你好呀-->
<h2 v-text="message"></h2>  <!--你好呀-->
</div>
<script>
  const vm = new Vue({
    el: '#app',
  data: {
      message: '你好呀'
  }
})
</script>

v-pre指令

适用于：不想让标签中的内容被解析，原封不动的展示到页面上的情况

<div id="app">
  <h2>{{message}}</h2>  <!--你好呀-->
<h2 v-pre>{{message}}</h2>  <!--{{massge}}-->
</div>
<script>
  const vm = new Vue({
    el: '#app',
  data: {
      message: '你好呀'
  }
})
</script>

v-cloak指令

适用于：页面上js延迟加载（或者卡住）时，不想让未被渲染的数据展示出来，用v-cloak来进行隐藏，等js加载完成后再展示渲染后的效果 ```html
{{message}}

```

它的原理就是，在Vue实例没被加载时，给带有v-cloak的元素加一个样式display:none；让其隐藏，等到Vue实例加载完成，再删除这个属性。

认识vue

安装

初体验

列表渲染案例

计数器案例

Vue中的MVVM

Vue实例传入的options

Vue的生命周期

Vue的template

Vue插值

v-once指令

v-html指令

v-text指令

v-pre指令

v-cloak指令