vue基础笔记

建议首先要明白它主要用来干什么的？怎么用？不要盲目跟从使用，要符合自己项目开发要求，适合才用。—使用前一定要明白

框架和库的区别

• 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
  • node中的express。
• 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。

MVC 与 MVVM 之间区别

• MVC 是后端的分层开发概念。
• MVVM是前端视图层概念，主要关注与视图层分离，分为了三部分：Model、View、VM ViewModel。

Vue与MVVM之间的对应关系

<div id="app">
    <!--vue实例所控制的这个元素区域，就是v-->
    <p>{
  {msg}}</p>
</div>
<script>
    // new 出来的这个vm对象，就是mvvm中的vm调度者
    var vm = new Vue({
    
        // 表示，当前 new 的这个vue实例要控制页面上的哪个区域
        el: '#app',
        // data 属性中，存放的是el 中要用到的数据
        // 这里的data就是MVVM中的M，专门保存每个页面的数据的
        data: {
    
            msg: '欢迎学习Vue'
        }
    });
</script>

Vue的生命周期（重要）

• 什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

• 生命周期钩子：就是生命周期事件的别名而已；

• 生命周期钩子 = 生命周期函数 = 生命周期事件

• 主要的生命周期函数分类：

• 创建期间的生命周期函数：

  • beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
    • created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
    • beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
    • mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

• 运行期间的生命周期函数：

  • beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
    • updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

• 销毁期间的生命周期函数：

  • beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
    • destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

<div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{
  {msg}}</h3>
</div>

<script>
    new Vue({
    
        el: '#app',
        data: {
    
            msg: 'ok'
        },
        methods: {
    
            show: function () {
    
                console.log('执行了show方法');
            }
        },
        // 第一个生命周期函数，表示实例完成被创建出来之前会执行它
        beforeCreate() {
    
            // 输出为undefined，因为Vue还没有初始化
            // 注意：在beforeCreate声明周期函数执行的时候，data和methods中的数据都还没有初始
            console.log(this.msg);
        },
        // 第二个生命周期函数
        created() {
    
            // 在created中，data和methods都已经初始化好了
            console.log(this.msg);
        },
        // 第三个生命周期函数
        beforeMount() {
    
            // 表示模板已经在内存中编辑完成率，但是尚未把模板渲染到页面中
            console.log(document.getElementById('h3').innerText);
        },
        // 第四个生命周期函数
        // 是实例创建期间的最后一个生命周期函数，当执行完mounted就表示
        mounted() {
    
            // 表示内存中的模板，已经真实的挂载到了页面中
            console.log(document.getElementById('h3').innerText);
        },
        // 运行中的两个事件
        beforeUpdate() {
    
            // 表示界面没有被更新，但数据已经更新了
            console.log('界面上元素的内容：' + document.getElementById('h3').innerText);
            console.log('data中的msg：' + this.msg);
        },
        updated() {
    
            console.log('界面上元素的内容：' + document.getElementById('h3').innerText);
            console.log('data中的msg：' + this.msg);
        }

    });
</script>

Mustache 语法 (双大括号)

<p>{
  {msg}}</p>

• 使用JavaScript表达式，每个绑定都只能包含单个表达式。

{
  { ok ? 'YES' : 'NO' }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{
  { if (ok) { return message } }}

声明式渲染

• 通过js中new Vue声明一对象。
• el 绑定的是要控制的区域的选择器。
• data 数据源。

<!-- 使用vue必须引入它的js文件，即配置环境，后续代码省略 -->
<script src="lib/vue.js"></script>
<div id="app">
    <p>{
  {msg}}</p>
</div>
<script>
    var vm = new Vue({
    
        el: '#app',
        data: {
    
            msg: '欢迎学习Vue'
        }
    });
</script>

Vue是响应式的，会自动检测数据的变化，但以下变动是Vue无法检测的，也不会触发视图更新：

• 通过索引直接设置项，比如app.books[3] = {…}。
• 修改数组长度，比如app.books.length = 1。

解决第一个问题：

1. 使用Vue内置的set方法：

   Vue.set(app.boos, 3, {
        
       name: '《CSS》',
       author: 'kim'
   });
   

2. 使用$set (webpack中默认没有导入Vue)：

   this.$set(app.boos, 3, {
        
       name: '《CSS》',
       author: 'kim'
   });
   
   // 这里的this指向的就是当前组件实例，即app
   

3. 使用splice()方法

// arrayObject.splice(index,howmany,item1,.....,itemX)
this.books.splice(index, 1, newValue);
// this.books.splice(0, 1, 'kim');

指令

指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。

v-once

只执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {
  { msg }}</span>

v-cloak

• 使用 v-cloak 能够解决 插值表达式 闪烁的问题（即网速过慢时，会看到插值表达式原代码）。