Vue计算属性和侦听器、安装Vue脚手架

一、Vue计算属性

1、计算属性是一个属性  

2、必须要return

计算属性可以干嘛?

1、计算属性可以解决 v-for和v-if不支持写在一起的问题

2、计算属性具有缓存数据的效果 利于提高减少性能消耗

3、只有data中的属性的值发生了变化 计算属性才会更新

计算属性可以解决 v-for和v-if不支持写在一起的问题


二、侦听器


两种类型:

基本数据类型

引用数据类型

特点:

1、侦听器是一个属性

2、项目中监听路由变化就需要使用侦听器

3、有两个参数 新值和旧值

4、侦听的名字必须跟函数名一样

基本数据类型

引用数据类型 - 深度侦听

固定属性

handler:方法名必须叫handler

deep:深度监听

immediate:一进入页面就执行侦听 true或者false

引用数据类型更简单的写法:


三、组件

全局组件

局部组件


1、全局组件 - Vue.componet

格式:

Vue.componet(" ",{

template:` `

})

组件名使用大写 要使用-分割

也可以缩写使用 / 关闭

需要先写全局组件 再new实例


2、局部组件 - 在实例里 components:

格式:

new Vue({

            el: "#app",

            // 局部组件

            components: {

                组件名: {

                    template: `组件内容`

                }

            }

        })

在实例里面写

多个组件在一起不要缩写


父传子

1、加v-bind传的是变量 不加v-bind传的是字符串

2、要用div包裹下


单向数据流(修改值必须在父组件修改)

直接改父组件的值不会有变化

需要用自定义事件的方法来实现子改父

this.$emit("定义一个方法名字","修改的内容")



安装Vue脚手架

1、建立一个文件夹

2、打开cmd

3、输入命令 npm i @vue/cli -g

4、vue -V 检查版本

5、输入 vue create项目名称

6、选择vue2(默认vue2)直接按回车

7、输入页面提示的两个指令

8、得到页面显示 复制这两个地址 用网页打开

9、页面显示安装完成

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容