尚硅谷vue2-vue3全套视频笔记-1

02模板语法

差值语法：功能单一就是将指定的值放在指定的位置

指令语法：

03 数据绑定

        vue中有两种数据绑定的方式：

        1.单向绑定（v-bind）：数据只能从data流向DOM

                v-bind:key=name 可以简写为 :key=name

                key是DOM中el的属性，name为vue中的数据

        2.双向绑定（v-model）：数据能从data流向DOM，也能从DOM流向data

                一般只应用在表单类元素中：input 、select

                v-model:value 可以简写为 v-model

04 el与data的两种写法

const vm = new Vue({

    el:'#root',//el第一种 new vue时指定el

    data:{//data第一种 对象式
        name:'xxx'
    }

    data(){//data第二种 函数式

        return{
            name:'xxx'
        }
    }
})

vm.$mount('#root')//el第二种 先创建vue实例，然后通过vm.$mount('#root')指定el

05 MVVM模型

MVVM为vm的双向绑定提供架构层面或者理论层面的支持。通过DOM listeners和data bindings实现模型驱动视图，视图驱动模型。

        M：model模型，vue实例中的数据

        V：view视图，vue实例对应的模板代码

        VM：viewmodel视图模型，vue实例

在vue中vm就是vue实例，作为view和model之间的桥梁，DOM中可以直接使用vue，pjo要交给vue维护，实现双向绑定，通过数据劫持（observer），解析器（compiler），watch实现：

        1.数据劫持：为数据提供响应式的getter和setter

        2.解析器：解析模板语法：v-model，绑定getter、setter和更新函数

        3.观察者：执行更新函数，通过diff算法判断是否生成新的真实DOM

06 数据代理

let number = 18
let person= {

    name:'xxx',
    sex:'xxx'
}

//三个参数，给哪个对象，设置哪个属性，属性的哪个配置项
Object.defineProperty(person,'age',{
    get(){
        return number
    },

    set(value){
        number = value
    }
    
})

07 事件处理

#事件的基本使用#

        1.使用v-on:xxx 或者@xxx 来绑定事件，其中xxx是事件名称

                @xxx=可以写一些简单的语句，获取vm中的值，这里可以体会一下双向绑定

//view 视图，DOM模型
<button @click='isTure = !isTure'>切换</button>

//vue vm视图模型
const vm = new vue（{
    el:'#root'，
    data:{
      isTure:ture
    }

}）

        2.事件的回调需要配置在methods中，最终会在vm中

        3.methods中配置的函数，不要使用=>函数，不然this就是window

        4.methods中的函数，都会被vm接管，this指向vm或者组件实例对象

        5.@click="demo"和@click="demo($event)"效果一致，但是后者可以传参

#事件修饰符#

vue中有且只有六个事件修饰符：ppssoc，可以组合使用

        1.prevent：阻止默认事件（常用）

        2.passive：事件的默认行为会立即执行，无需等待事件的回调结果--移动端（手机，平板）

        3.stop：阻止事件冒泡（常用）

        4.self：只有事件的event-target是当前操作的元素时事件才会触发

        5.once：事件只触发一次（常用）

        6.capture：事件的捕获模式--捕获阶段处理事件

事件触发：

js中的事件流包括：事件捕获==>事件冒泡。默认情况下事件冒泡阶段处理事件。

父子组件都有一样的事件，事件捕获流程：父==>子。事件冒泡流程：子==>父。

#键盘事件#

除了keyup就是keydown，可以组合使用@keyup.ctrl.y，只有Ctrl+y才有效果

1.常用的键盘别名：

        回车、删除、退出、空格、换行==>enter delete esc space tab

        上下左右==>up down left right

2.未提供别名的按键，可以使用按键原始的key去绑定，要注意转换为kebab-case（短横线小写）

3.系统修饰键（用法特殊）：shift /Ctrl/Alt/meta

        配合keyup：需要配合其他键，当其他键按键并释放后，事件触发

        配合keydown：正常使用

4.可以使用keycode指定具体的按键（不推荐）

5.通过keycode自定义按键别名：vue.config.keycodes.自定义别名=keycode

08 计算属性

        1.要使用的属性不存在，要使用已有的属性计算得来（只能是属性，只能是已有的）

        2.底层借助了Object.defineProperty的getter和setter方法

        3.getter方法什么时候被调用：

            初次使用时

            所依赖的属性发生变化时

        4.优势：有缓存，方便调试

        5.在vm中直接使用即可

09 监视属性

        1.当被监视的属性变化时，回调函数自动调用，进行相关操作

        2.监视的属性必须存在，才能进行监视！！

        3.监视的两种写法：

        （1）new Vue传入watch配置

        （2）.通过vm.$watch监视

        深度检测

        1.vue中watch默认不监视对象内部值的变化

        2.配置deep:true可以监视对象内部值的变化

        备注：

        1.vue自身可以监视对象内部值的变化，但是watch不可以

        2.使用监视时，要根据对象的结构来决定是否采用deep

---小结

        1.computed能完成的watch都能完成，反之不行

        2.vue中的this

            vue管理的函数写成普通函数，非vue管理的函数写成箭头=>函数，目的就是让this指向                  vue，vue中有隐式的this。=>函数是window函数，没有隐式的this，会往外找，如果被vue             包裹，就会找到vue中隐式的this

10 绑定样式

按照样式定义的位置分为：

内联样式（定义在标签里面），内嵌样式，外部样式（定义在外部文件）

class样式
写法：class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

style样式
：style="｛fontsize:xxx｝"其中xxx是动态值。
：style="［a,b］"其中a、b是样式对象。

        操作DOM

        

        不操作DOM

        这个小Demo，可以理解一下MVVM模型，模型驱动DOM。

        

        11 条件渲染

        v-if：

               写法：v-if = '表达式'、v-elseif = '表达式'、v-else = '表达式'，

               适用于：切换频率较低的场景

               特点：不展示的DOM元素直接被删除

                注意：一起使用时，结构不能被打断

        v-show：

                写法：v-show = '表达式'

                适用于：切换频率较高的场景

                特点：不展示的DOM元素不会被删除，仅仅使用样式进行隐藏

        使用v-if时DOM元素可能无法被获取，但是使用v-show一定可以获取

        12 列表渲染

        v-for：

                1.用于展示列表数据

                2.v-for="(item,index) in xxx"  :key="yyy"

                3.可以遍历数组，对象，字符串，指定次数

key的原理：

1.虚拟DOM中key的作用：作为diff算法的依据

2.diff算法：

        新虚拟DOM和旧虚拟DOM中有相同的key，然后比较key后面的内容：

        内容不一致：生成新的真实DOM，替换原来页面中的DOM

        内容一致：复用原来的真实DOM

        旧虚拟DOM中没有key：

        生成新的真实DOM，生成页面

        输入类元素在虚拟DOM中无法获取用户输入的内容，也就是说在虚拟DOM中只有元素，没有元素中的内容，在虚拟DOM中不比较内容，元素一样diff算法就是一致

vue.set

        Vue.set(Object,'属性名','属性值')/vm.$set()

        向响应式对象中添加一个属性，并保证该属性是响应式的，且触发视图更新，必须向响应式的对象中添加属性，因为vue无法探测普通的新增属性。例如：

        this.MyObject.Propertity='hi'

        注意：vue实例和vue的根数据不能作为被添加属性的对象

数组更新检测：

        vue将被监听的数组的变更方法进行了包裹，所以他们也将会触发视图更新，方法包括：

        push,pop,shift,splice,sort,unshift

13 收集表单数据

<input type='text'> v-model 收集的就是value，用户输入的就是value

<input type='radio'> v-model 收集的就是value，且要配置value

<input type='checkbox'> 

        没有配置value，v-model收集的就是checked

        配置了value，v-model默认值非数组收集的就是checked，是数组收集的就是value数组

v-model的三个修饰符：lazy，number，trim

14 过滤器

定义：对要显示的数据进行格式化之后再显示

语法：适用于插值语法或者单向绑定v-bind，{{xxx | filter名称}}，v-bind:x="xxx | filter名称"

备注：多个过滤器可以串联，可以接收额外的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
    <h6>{{ msg | testFilter}}</h6>
</div>
</body>
<script type="text/javascript">

    Vue.filter('testFilter',function (value) {
        return value.slice(0,4)
    })

    new Vue({
        el:'#root',
        data:{
            msg:'hello,dear'
        }
    })
</script>
</html>

15 内置指令

v-text：和插值语法的作用一样，但是比插值语法灵活

v-html：可以解析html标签和指令，有安全性问题，可能导致xss攻击。

<div id="root">
    <div>{{ msg | testFilter}}</div>
    <div v-text="msg"></div>
    <div v-html="msg"></div>
</div>
</body>
<script type="text/javascript">

    Vue.filter('testFilter',function (value) {
        return value.slice(0,4)
    })

    new Vue({
        el:'#root',
        data:{
            msg:'<h3>hello,dear</h3>'
        }
    })
</script>

v-cloak：特殊的指令，没有值，vue实例初始化完成会删除该指令，可以配合CSS解决网速慢时显示的问题。

<script>标签不仅可以写在head里面，还可以写在body的最下方

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
    <div>{{ msg | testFilter}}</div>
    <div v-text="msg"></div>
    <div v-html="msg"></div>
</div>
<script type="text/javascript" src="./vue.js"></script>  
<!--不仅可以写在head里面，还可以写在body的最下方-->
</body>

v-once：动态绑定一次之后就不在变化

<div id="root">
    <div v-once>{{ msg }}</div>
    <div>{{ msg }}</div>
    <button @click="msg++">puls</button>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            msg: 1
        }
    })
</script>

v-pre：可以让当前el不让vue来管理，跳过编译某些内容

16 自定义指令

directive：第一个参数是真实DOM元素（element），第二个参数是绑定信息，可以获取所有信息。

备注：

命名是多个单次使用kebab-case，定义时加引号'kebab-case'，使用时加v-；

自定义指令中的this是window不是vm；

<div id="root">
    <div v-onc="msg"></div>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            msg: 2
        },
        directives: {
            //初始化和双向绑定时调用
            onc(element, binding) {
                element.innerText = binding.value * 10
            },
            oncc: {
                //初始化绑定时调用
                bind(element, binding) {
                    element.value = binding.value * 10
                },
                //元素被放置在模板时调用
                inserted(element, binding) {
                    element.focus()
                    // alert(2)
                },
                //双向绑定时调用
                update(element, binding) {
                    element.value = binding.value * 10
                }
            }
        }
    })
</script>

17 生命周期

又名：生命周期回调函数、生命周期函数、生命周期钩子；

vue在关键节点帮我们调用的一些有特殊名称的函数；

函数名称不能被修改，函数中的this指向的是vue或者组件实例；

v-bind:style="{opacity:opacity}"绑定样式的固定写法==>:style="{opacity}"

beforeCreate：数据代理，数据劫持创建之前；

created:

beforemount：

mounted：

beforeupdate：

updated：

beforedestroy：

destroyed：

常用的生命周期函数：

mounted：发送ajax，启动定时器，绑定自定义事件，订阅消息

beforedestroy：消除定时器，解绑自定义事件，取消订阅消息

问题总结：

赋值以后不显示：

The provided Vue.js code snippet and the function `openDialogForUpdate` indicate that you are setting the `state.ruleForm` object with properties like `id`, `name`, `code`, `language`, and `description` based on the `dict` parameter passed to the `openDialogForUpdate` function.

If the `language` field is not displaying its value in the form even though you are setting it in the `state.ruleForm`, there could be several reasons for this issue:

1. **Reactivity**: Vue.js is reactive, but if you are directly assigning a new object to a reactive property (`state.ruleForm` in this case), Vue might not detect the change. You might need to use Vue's `Vue.set` method or spread syntax to ensure reactivity.

2. **Initial Value**: If the initial value of `dict.language` is `undefined` or `null`, the disabled input might not show anything even if it's bound to `state.ruleForm.language`.

3. **Component Lifecycle**: Ensure that the `openDialogForUpdate` function is being called and that `state.ruleForm` is being updated before the form is rendered or updated in the DOM.

Here's a modified version of your `openDialogForUpdate` function to address potential reactivity issues:

const openDialogForUpdate = (dict: EmptyObjectType) => {
  state.ruleForm = {
    ...state.ruleForm, // Spread the existing state to ensure reactivity
    id: dict.id,
    name: dict.name,
    code: dict.code,
    language: dict.language,
    description: dict.description,
  }
}

Alternatively, you can use `Vue.set` to ensure reactivity for the `language` property:

const openDialogForUpdate = (dict: EmptyObjectType) => {
  Vue.set(state.ruleForm, 'id', dict.id);
  Vue.set(state.ruleForm, 'name', dict.name);
  Vue.set(state.ruleForm, 'code', dict.code);
  Vue.set(state.ruleForm, 'language', dict.language);
  Vue.set(state.ruleForm, 'description', dict.description);
}

After making these changes, when you call `openDialogForUpdate(dict)` before rendering the form, the `language` field should display its value correctly in the disabled input field.

vue是如何实现双向绑定的：

MVVM模型为双向绑定的实现提供理论或者架构层面的支持，不光是vue或者其他框架或者自定义实现双向绑定都可以遵循这一规范，

vue中vue的实例对应viewmodel，实例中的数据对应model，实例中的模板对应view，

具体实现流程vue中提供数据劫持为实例中的数据提供getter、setter等函数，提供解析器解析模板中的v-model指令并绑定对应数据的函数，提供观察者检测函数的改变，最后通过diff算法判断是否需要生成新的真实DOM。