Vue 入门-Vue 的列表展示

🎉vue 如何展示列表？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="app">
    <ul>
    <li v-for="movie in movies">
        {{movie}}
    </li>
</ul></div>
<!--省略代码-->
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好！',
            movies: ['星际穿越','大话西游','盗梦空间','少年派']
        }
    })
</script>

🎉vue 如何增加列表元素？

1

app.movies.push("海王")

Vue 入门-初识 Vue 的点击事件

🎉vue 如何增加点击事件元素？

1
2

<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>

🎉vue 如何使用点击事件方法？

1
2
3
4
5
6
7
8
9
10
11
12
13

<button v-on:click="plus">+</button>
<button v-on:click="minus">-</button>
<!--省略代码-->
 methods:{
  plus:function () {
   console.log("加被执行！");
   this.counter++
        },
  minus:function () {
   console.log("减被执行！");
   this.counter--
        }
 }

🎉vue 语法糖？

1
2
3

<button @click="plus">+</button>
<button @click="minus">-</button>
//语法糖：用于简写

Vue 入门-Vue 中的 MVVM

🎉 什么是 MVVM(Model-View-ViewModel)？

link:https://www.cnblogs.com/goloving/p/8520030.html

Vue 入门-Vue 中的 options 选项

🎉vue 中的 options 有哪些？

link:https://cn.vuejs.org/v2/api/

🎉vue 中的 options 的基本类型？

el：

类型：string 丨 HTMLElement

作用：决定 Vue 实例会管理哪一个 DOM。

data：

类型：Object 丨 Function（组件当中 data 必须是一个函数）

作用：Vue 实例对应的数据对象。

methods：（注意不要掉 s）

类型：｛[key:string]:Function]｝

作用：定义属于 Vue 的一些方法，可以在其他地方调用，也可以在指令中调用。

注意：函数之间用“,”分隔。

🎉 开发中什么时候叫函数什么时候叫方法？

① 单词不一样。函数叫 function，方法叫 method。

② 是否与实例挂钩，挂钩的叫方法。主要特点是调用了实例中的参数。

Vue 入门-Vue 的生命周期

🎉 什么是生命周期？

概念：事物从诞生到灭亡的整个过程。

🎉 在生命周期中 vue 做了哪些操作？

link:https://segmentfault.com/a/1190000011381906