vue基础指令： const app = vue.createapp()，新建vue对象的一个实例；
（Vue 3.0版）app.mount('id选择器')，把vue实例挂载到某个id上。这个元素内部的子元素都会被这个vue实例控制；每个vue实例只能挂载到一个html标签上。
Vue2中，data方法内部既可以是return，也可以是property:value，而在Vue3中，data方法中必须写return部分，return中只有property:value，不同的property:name用逗号隔开。return会返回一个包含了所有的property:value的对象。
在一个标签的开始处和结束处之间，用双大括号写法作为插值表达式（interpolation），双大括号内部的内容为vue实例的data方法中的某个变量名称（property:value中的property），最终渲染到页面上的是property对应的value。插值表达式中的函数没有参数时，只需要写函数名，不需要写括号
但是如果作为某个标签的属性，例如在
<a href="></a>
中的href部分写插值表达式，最终渲染到页面上的只会是data中的property，要想显示value，需要用v-bind指令把属性绑定上去，例如
<a v-bind:href="property"></a>
双大括号内部既可以写properety，可以写method中的函数名来调用函数（function()），也可以写javascript代码。如果插值表达式内部写了html标签，例如{{<p></p>}}，标签会被转义，这是为了防止恶意代码进行xss跨站攻击。在某个标签内部指明v-html属性，例如<p v-html="property"</p>，可以正常渲染出html结构，但是不应对用户提供的任何内容使用v-html指令，除非完全信任用户提供的内容。
method中的this指向的是vue实例中的data部分，this.属性名即可返回data中的该属性对应的值。
v-on指令：监听事件(event listener)，例如v-on:click="function()"此处的function可以不加括号。函数可以接受参数传入，只要参数的形参预先在method的函数中定义好即可。同一个标签中可以有多个v-on事件监听器。
method部分中，自定义的函数的先后顺序不会影响输出结果，可以是任何顺序。
函数的参数也可以是浏览器的原生事件名，参数的格式为$符号+浏览器原生事件名。
vue事件修饰符：
原生的event.preventDefault()方法可以阻止浏览器默认行为，例如form提交事件后的浏览器刷新动作。
在vue中，v-on:事件.事件修饰符，例如v-on:submit.prevent，阻止浏览器的默认行为，.stopPropagation可以阻止事件冒泡扩散，v-on:click.left/right'，指定鼠标左右键点击事件，v-on:keyup.enter监听回车弹起
v-once指令：指定了该指令的部分的值只会被更新一次。使用场景不多，主要是为了提示用户输入的初始值。
vue中的数据双向绑定：v-model="data方法中的property名"此时的绑定是双向的，用户可以改变数据内容，改变的数据内容也会实时反映在渲染结果中。这就是响应式的体现。但这存在一个问题，只要页面中有一处内容发生更新，那么整个页面中的所有由vue接管的方法都会被重新执行，无论这个方法中的参数是否发生改变。
计算属性（Computed properties）：任何包含响应式数据的复杂逻辑，都应该使用计算属性，而不是把业务逻辑直接写在模板字符串中。和把逻辑写入methods中比起来，执行结果相同，但有额外的好处。计算属性基于依赖关系缓存，那些不需要响应式依赖的部分可以写成计算属性，这样会减少浏览器重新渲染页面造成的性能开销。如果不需要有缓存，还是需要用methods方法，这样的场景不太常见。
侦听器（Watchers）：data中的某个属性发生更改时，就执行某个函数。watchers会响应数据的变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。watcher内部的函数通常会有两个参数，newValue,oldValue
组件（Components）：可复用的部分
为什么要使用vue-cli等工具开发vue应用？
利用vscode对vue的语法支持；即时同步并显示页面更改；把文件拆分到几个单独的文件中，便于管理。
Vue-cli(Command-line interface)；
vue create name-of-project， 新建一个vue工程项目， cd到项目目录，运行npm run serve以运行该项目，开发期间需要保持cmd窗口开启；
vue-cli生成的文件目录解释：
package.json配置文件中存放了整个工程的依赖（dependencies），引入依赖资源后，就不需要在页面中导入CDN资源了。
node-modules文件夹中，存放了package-json中引入的依赖资源文件。运行npm-install会根据package.json文件中声明的依赖名，下载并存放对应的资源文件。因此，不应当修改此文件夹中的任何文件，以免工程依赖资源发生异常，进而无法正常运行工程。
public文件夹：其中的index.html可以理解为vue应用最终的存放地。
src文件夹：此处为开发者真正进行开发的目录，此存放了开发者自定义的JS文件等等。vue工程会首先运行main.js文件，这是vue工程的主要入口。
.vue文件：vue应用，内部有template, script和style部分。vue-cli工具会把vue文件自动转换为跨浏览器兼容的普通文件，因此开发者只要专注于vue文件即可。
编译工作流(Build Workflow）：虽然开发者的代码利用了大量vue等新式语法，浏览器一般无法理解，但在编译过程中，这些代码会被转换为可被浏览器执行的标准js文件等等，最后只需把这些编译后的文件部署到服务器即可。
assets文件夹：里面存放了网页图片资源等等。
components文件夹：存放了vue应用的每一个组件。开发中会把一个大组件分成若干个小组件，目录外的.vue文件是作为整体的vue应用，而components文件夹存放了这个整体应用的每一部分。每个组件的命名格式一般为PascalCase格式，每个单词首字母都大写，单词之间没有空格
src下的main.js文件中，用到了javascript的import语法，import ... from './App.vue'，从app.vue中导入模块，但是第一句import createapp from vue中，因为vue已经在package.json中写明了依赖，所以不需要再写相对路径引入vue了。
第二句import ... from ...中，import后面引入的app名实际上是另外一个vue文件中， vue对象所在的变量名，但是如果用const ...=｛｝的写法，const变量只在那一个vue页面中才能使用，不能跨页面使用，所以要用ES6语法export default=｛｝，这样就可以跨页面使用变量名了。
vue-cli中，一般不会在index.html中写任何html结构，html结构应该在相应的.vue文件的template部分写明，template部分还是常规的html标签写法
vue文件中的css:在style部分
props:可以理解为自定义的html属性，可以为自定义的html标签提供自定义的属性。
vue实际项目开发： 多页面应用：点击某个部分，就返回相对应的html文档。优点是首屏时间非常快，因为加载首屏只需要一个http请求，而且SEO效果好。缺点是页面之间的切换速度有时会比较慢，因为每加载一个应用就需要发出一个http请求。网络不好时，切换速度比较慢 单页面应用：原理是js有感知当前url的变化，可以用js动态地把当前页面清除掉，并把请求的新的组件内容渲染出来。由于请求新的组件不需要发出另外的http请求，所以页面切换速度非常快。缺点是首屏时间比较慢，因为首屏需要发出http请求和js请求，两个请求同时完成才会加载出全部内容。由于搜索引擎只能解析出普通的html标签，因此单应用的SEO效果不好，不过后续可以克服这一点
常用的git命令：git add .把当前所有内容存入本地缓存区；
git commit -m 'messages'把缓存区的内容存入本地仓库，-m后的内容为本次提交的备注消息
git push把本地仓库中的内容推送到远端git仓库。
但是，在实际开发中，每次开发一个新的功能，都要创建一个新的分支（branch），此后都在这个分支上进行开发。开发完毕后，再把这个分支合并到master分支上。
移动端开发的一些问题： 1px边框在高分屏下的问题：引入相关的css文件修复 移动端300ms点击延迟问题:见developers.google.com/web/updates… 或者引入fastclick库 移动端优先用rem单位，1rem为css中文字的基础像素
css文件中要想引入其它的css文件，比如变量、mixin文件等，文件根目录@号前需要加波浪线~，变成~@/。
给某些常用的路径设置别名alias：修改vue.config.js文件。新版的vue-cli工具不再包含build文件夹，推荐关于webpack的配置在vue.config.js文件中进行。juejin.cn/post/684490…
vue-awesome-swiper中，swiper6以上默认设置不会显示轮播图小圆点，需要在main.js中引入 `import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css'
import Swiper2, {Navigation, Pagination} from 'swiper'; // 这行代码很关键
Swiper2.use([Navigation, Pagination]); // 这行代码很关键` 参考www.jianshu.com/p/3820c25fc…
小圆点即便设置了important也无法显示自定义样式，是因为scoped组件阻止了组件间的污染，需要用到穿透操作，外层元素 >>>或者 /deep/ 或者 ::v-deep 需要自定义样式的内层元素，scss loader只支持::v-deep，参考segmentfault.com/a/119000001… 和blog.csdn.net/Shimeng_198…
在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。
在Vue项目中，当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播)，需要在局部组件中修改第三方组件库的样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。
vue loader中，混用本地样式和全局样式 vue-loader.vuejs.org/zh/guide/sc…
scss中，定义混入mixin用@mixin关键字，调用混入用@include mixin方法名，没有给混入传递参数就不需要加括号，参考sass-lang.com/documentati…
