Vue第二篇：概念深度剖析

参考链接：https://www.bilibili.com/video/BV1oj411D7jk/?spm_id_from=333.788.recommend_more_video.0&vd_source=3969f30b089463e19db0cc5e8fe4583a

1、响应式数据与插值表达式理解
前端最基本的操作是：把数据呈现到页面上，把更新的数据再更新到页面上。
原生js的赋值操作如下:

以上DOM操作过于繁琐，Vue通过内置代码的方式将DOM功能进行了简化。
所谓的响应式数据指的是：Vue内部对数据做操作，它就会自动地更新到视图中，这样就可以省去大量的DOM操作。
上面的内容简化后为：

{{ title }}

后续针对title的修改会直接体现在页面上。

2、计算属性computed
methods中的函数，假如每次计算时依赖的值不变，则结果也不会发生变化，此时就不要重复计算，这样就存在优化空间。于是就产生了computed。
计算属性在定义时时一个函数，但是在使用时不能加括号，因为它是一个属性。

3、侦听器watch
在插值表达式和计算属性中，改数据的时候就会自动触发一个修改页面内容的操作。
监听器就是监听某个数据是否有变化，我们希望在数据变化的时候不仅仅是更新页面，还希望做点别的。
侦听器的意义：在插值表达式和计算属性时修改一个响应数据，它会做页面的更新，这是Vue内部自动实现的。如果也希望在过程中去参与一下，就可以通过监听器做一个处理。这是Vue在内部给我们开放了一个可以参与响应式的一个过程。
watch:{
    title(newValue, oldValue){
        console.log(newValue, oldValue)
    }
}

4、指令
（1）内容指令

123

123

（2）渲染指令

这是内容

当在组件中使用v-for时，key是必须的。作用是为了高效地更新虚拟DOM。

标签内容

标签内容

（3）属性指令

这是内容

等价于

这是内容

（4）事件指令
按钮
等价于按钮
（5）表单双向绑定指令

5、Vue CLI说明
它时Vue基于Webpack打造的脚手架工具，脚手架内置了很多模板和工具，可以让我们快速进行Vue的项目创建。
查看vue版本：vue --version
创建vue项目：vue create

6、脚手架的项目结构
（1）package.json
在scripts中有serve/build/lint的命令。

serve命令：可以帮我们打开本地的静态资源服务器，帮我们把项目直接跑起来，方便我们在开发中去使用。启动方式为:npm run serve，然后通过localhost:8080访问页面。

build命令：进行代码打包，在开发时项目中有很多文件，但是最终呈现给用户的时候不会存在很多零碎的文件。打包命令:npm run build。打包完成后会出现dist目录，其中都是压缩过的html的代码，后面项目上线时也需要dist文件即可。此时启动打包后的服务的方法：先运行npm install serve -g，然后在项目目录下运行serve dist，最后通过localhost:3000可以访问页面
（2）node_modules：
包含项目安装的所有的包，这个代码都是一些第三方的工具，不需要改动。
（3）public
这些是不参与编译的资源
（4）src
里面是需要参与编译的资源。
比如assets中的logo.png需要编译成base64格式进行展示。
App.vue：根组件。
main.js：Vue应用的一个入口文件。

7、组件化开发
vue中包含结构template、逻辑script、样式style 三个部分。
每个vue都是单独的实例，最终会在编译环节进行一下结构生成，并替换掉之前写的自定义的HTML标签。
el选项只能在根组件中使用，而内部的子组件是不需要el选项的，因为这取决于标签的位置，而不是挂载在特定的标签上。

props父传子通信：一个或多个属性的配置
props:{
    msg: String,
    count: {
        type: [String, Number],
        default: 100,
        required: true
    }
}

父组件绑定数据的方法
    msg="Welcome"
    :count="parentCount"
/>

export default{
    name: 'App',
    components:{
        HelloWorld
    },
    data(){
        return{
            parentCount: 1000
        }
    }
}

插槽：父组件应用子组件的内容中也可以写些信息，这样设置时比通过prop的方式传值更简单，同时可以传递更加复杂的结构比如HTML页面。即组件有一部分区域是开放的，这样自己可以随便定一些东西进去，而不再是完全由子组件内部做实现，使用起来更自由一些。

8、单页面应用程序
常规网站都是由多个页面组成的，每个页面去构建一些页面相关的一个功能内容。
而Vue只有一个html文件，也意味着它其实只有一个页面。
如何在一个页面中实现多页面应用的效果，其实就是检测页面URL的变化，当URL变化后在页面中渲染一些内容就可以了，这就是单页面应用程序。