参考链接：https://www.bilibili.com/video/BV1oj411D7jk/?spm_id_from=333.788.recommend_more_video.0&vd_source=3969f30b089463e19db0cc5e8fe4583a
1、响应式数据与插值表达式理解
前端最基本的操作是：把数据呈现到页面上，把更新的数据再更新到页面上。
原生js的赋值操作如下:
<div id="box"></div>
<script>
let value = '这是内容'
document.getElementById('box').textContent = value
value = '新内容'
document.getElementById('box').textContent = value
</script>
以上DOM操作过于繁琐，Vue通过内置代码的方式将DOM功能进行了简化。
所谓的响应式数据指的是：Vue内部对数据做操作，它就会自动地更新到视图中，这样就可以省去大量的DOM操作。
上面的内容简化后为：
<div id="box">{{ title }}</div>
<script>
const vm = new Vue({
el: '#box',
data(){
return {
title: '这是标题内容'
}
}
})
</script>
后续针对title的修改会直接体现在页面上。
2、计算属性computed
methods中的函数，假如每次计算时依赖的值不变，则结果也不会发生变化，此时就不要重复计算，这样就存在优化空间。于是就产生了computed。
计算属性在定义时时一个函数，但是在使用时不能加括号，因为它是一个属性。
3、侦听器watch
在插值表达式和计算属性中，改数据的时候就会自动触发一个修改页面内容的操作。
监听器就是监听某个数据是否有变化，我们希望在数据变化的时候不仅仅是更新页面，还希望做点别的。
侦听器的意义：在插值表达式和计算属性时修改一个响应数据，它会做页面的更新，这是Vue内部自动实现的。如果也希望在过程中去参与一下，就可以通过监听器做一个处理。这是Vue在内部给我们开放了一个可以参与响应式的一个过程。
watch:{
title(newValue, oldValue){
console.log(newValue, oldValue)
}
}
4、指令
（1）内容指令
<p v-text="title">123</p>
<p v-html="htmlContent">123</p>
（2）渲染指令
<p v-for="item in 5">这是内容</p>
当在组件中使用v-for时，key是必须的。作用是为了高效地更新虚拟DOM。
<p v-if="true">标签内容</p>
<p v-show="true">标签内容</p>
（3）属性指令
<p v-bind:title="title">这是内容</p>
等价于<p :title="title">这是内容</p>
（4）事件指令
<button v-on:click="output">按钮</button>
等价于<button @click="output">按钮</button>
（5）表单双向绑定指令
<input type="text" v-model="inputValue">
5、Vue CLI说明
它时Vue基于Webpack打造的脚手架工具，脚手架内置了很多模板和工具，可以让我们快速进行Vue的项目创建。
查看vue版本：vue --version
创建vue项目：vue create <project-name>
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
}
}
父组件绑定数据的方法
<HelloWorld
msg="Welcome"
:count="parentCount"
/>
export default{
name: 'App',
components:{
HelloWorld
},
data(){
return{
parentCount: 1000
}
}
}
插槽：父组件应用子组件的内容中也可以写些信息，这样设置时比通过prop的方式传值更简单，同时可以传递更加复杂的结构比如HTML页面。即组件有一部分区域是开放的，这样自己可以随便定一些东西进去，而不再是完全由子组件内部做实现，使用起来更自由一些。文章来源：https://www.toymoban.com/news/detail-584965.html
8、单页面应用程序
常规网站都是由多个页面组成的，每个页面去构建一些页面相关的一个功能内容。
而Vue只有一个html文件，也意味着它其实只有一个页面。
如何在一个页面中实现多页面应用的效果，其实就是检测页面URL的变化，当URL变化后在页面中渲染一些内容就可以了，这就是单页面应用程序。文章来源地址https://www.toymoban.com/news/detail-584965.html
到了这里，关于Vue第二篇：概念深度剖析的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
