Vue.js核心概念-优快云博客

本文链接：https://blog.youkuaiyun.com/mhc20201554114/article/details/122524899

1.想让:Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;

2. root容器里的代码依然符合html规范。只不过混入了些特殊的Vue语法:

3. root容器里的代码被称为[Vue模板] ;

4.v-bind是绑定，将url1当js表达式执行{{这里只能写js表达式，不可以写js代码，}}

表达式可以生成一个值，可以放在任何一个需要值的地方

5.一个vue实例只能对应一个实例，一个容器也只能被一个vue实例接管，因此上面的会被替换，下面的不会被替换

6.Vue.config.productionTip = false //阻值vue在启动时生成生产提示

7.el:'.root',//el用于指定当前vue实例为那个容器服务，值通常为css选择器字符串

// el:document.getElementById('root')第二种写法，但是没第一种好

8.el有2种写法

(1) .new Vue时候配置el属性。

(2).先创建Vue实例。随后再通过vm.$mount( ' #root ' )指定e1的值。

        x.$mount('.root')    //第二种写法，过一秒后把数据挂载上去
        setTimeout(() =>{
            x.$mount('.root')
        },1000);

9.data有2种写法

(1).对象式

(2).函数式

如何选择:目前哪种写法都可以。以后学习到组件时，data必须使用函数式，否则会报错。

10.一个重要的原则:

由Vue管理的函数，一“定不要写箭头函数，一旦写了箭头函数。this 就不再是Vue实例了。

11.

        Object.defineProperty(person, 'age' ,{ //向person里加age属性
            value:18,
            enumerable:true, //控制属性是否可以枚举，默认值是false
            writable:ture,//控制属性是否可以被修改，默认值是false
            configurable:true,//控制属性是否可以被删除，默认值是false

            //当有人读取person的age属性时，get函数的getter就会被调用，且返回的是age的值
            get:function(){
                return number
            },//当有人读取的时候请求number,即现用现取
            //当有人修改person的age属性时，get函数的getter就会被调用，且会收到修改的具体值
            set(value){
                number = value
            }
        })

12.v-show为true，显示，v-show为false，隐藏，v-show也可以写成a 等等表达式，来控制显示或隐藏

13.<div v-if="n === 1">asdsa</div>

v-else-if做条件渲染如果前面的条件成立，则跳过这个不可被打断，即前面的必须为v-if或者v-else-if

v-else做条件渲染如果前面的条件都不成立，则执行这个

template可以且只可以配合v-if使用，可以让他包裹的里面所有元素加上v-if 且执行后不影响结构，即解析后不是源代码的一部分

14.监视属性watch:

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

2.监视的属性必须存在。才能进行监视! !

3.监视的两种写法:

(1) .new Vue时传入watch配置

(2)，通过vm.$watch监视

15.computed和watched的区别

1. computed能完成的功能，watch 都可以完成。

2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。

两个重要的小原则:

1.所被Vue管理的函数。最好写成普通函数，这样this的指向才是vm或组件实例对象。

2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)。最好写成箭头函数，

这样this的指向才是vm或组件实例对像。

16.

<!-- 遍历数组 -->
<li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li>
<!-- 遍历对象 -->
<li v-for="(value,k) of persons" :key="k">{{k}}-{{value}}</li>
<!-- 遍历字符串 -->
<li v-for="(char,index) of persons" :key="index">{{char}}-{{index}}</li>
<!-- 遍历指定次数 -->
<li v-for="(number,index) of 5" :key="index">{{index}}-{{number}}</li>

17.

mounted(){}这个函数直接放在vue里，和data等等平级，挂载函数，vue完成模板的解析，并把初始的真实dom元素放入页面后（挂载完毕）调用mounted

生命周期:

1.又名:生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么:Vue在关键时刻帮我们调用的些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的.

4.生命周期函数中的this指向是vm或组件实例对象.

常用的生命周期钩子:

1. mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]。

2. beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]。

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息。