[vue3快速入门] 9.vue模板语法
首先我们还是像上节课一样，用vue cli的create命令新建一个项目，名字可以随便起
创建完项目一样把用不着的内容先删掉，保持一个最简内容
App.vue内容是这样的
这节课我们讲解一下vue的基本模板语法，也就是我们在template这个标签里面写的语法，
首先vue的模板语法继承了html的语法，我们在template里写的也都是标准的html标签，只有在需要动态绑定一些内容的时候，我们才用到vue的模板语法，大概有一下几种
插值的方式就是我之前用过的双花括号的形式{{}}，一般在花括号内就是我们绑定的vue对象的变量了
比如我们在data里增加一个字符串msg，
通过插值把这个字符串绑定到模板里
最后渲染出来就是
除了直接绑定一个数据，双花括号里还既可以写简单的js表达式
甚至还可以调用methods里的方法，比如在methods里增加一个方法
在模板里使用
最后的结果同样是：
但是这种方式并不常用，知道就行了
在工作中有一个常见的需求，就是发布文章的时候，文章内容往往是一段html字符串，我们叫做富文本
我们可以先试试用双花括号的方式，绑定到页面上行不行
我们看到显示的效果是这样的
显然老板是不会满意的，
这时候就需要用到一个新的绑定数据的方式v-html，
这时候我们就可以看到内容正常显示了
根据官网的定义，指令就是写在标签上用v-开头的特殊属性，这么说有点抽象，其实我们已经学过几个指令了，比如v-if、v-show
还有我们刚学习的v-html
使用v-bind指令可以给一个html标签动态的绑定一个属性，比如我们之前在循环中动态绑定的key
以后我们都简写为一个冒号:
还有绑定事件用的v-on，以后我们都简写为@
小伙伴们现在掌握这些指令的用法就行，以后指令还有很多内容，我们以后再学习。
这节课我们就到这里了，主要讲解了在template模板中绑定动态数据的集中方式，大部分之前也都用过，现在再巩固一遍。
vue VSCode 开发设置（html自动补全、eslint保存时格式化、vetur 格式化html）
File - Preference - Setting -搜索setting.json - Edit in settings.json
settings.json
方法1：File - Preference - Setting -搜索setting.json - Edit in settings.json
settings.json
Setting.json
方法2：File - Preference - 搜索框输入：files.autoSave
之后能看到 files.autoSave 的可选项有
off : 关闭自动保存（默认）
afterDelay: 延迟xx时间后保存，可在 "files.autoSaveDelay" 中配置延迟时间；
onFocusChange: 编辑器失去焦点时自动保存；
onWindowChange: 窗口失去焦点时(编辑器窗口的切换，桌面窗口的切换)自动保存；
安装 ESLint
vscode 中安装 ESLint 插件
然后配置 vscode 的 setting.json
File - Preference - User Snippers
vue.json文件，然后添加下面模板
然后新建.vue文件 ，写下vue然后Tap键就能生成什么的模板。
如果没有生成模板只是多了个空格或者生成的是vue标签的话，我们还得设置一下，打开settings.json，添加下面的设置
如果你的Setting.json文件有 "files.associations" 设置的话，请删除，因为他会和上面 emmet.syntaxProfiles 冲突。
files.associations 和 emmet.syntaxProfiles 都是设置html 标签的补全，如果是要用.vue模板补全功能的话，html标签补全我们就用 emmet.syntaxProfiles 来设置。
vue 的开发中 vscode 可装用于开发规范的插件有
Prettier ：规范js
ESLint: 规范js
Vuter: 规范 .vue 文件中 template
stylus: 规范 stylus
注意：以下配置是基于接下来介绍的插件设置的，如果没有安装插件是不会生效的。
或者：
其中：
4.如果使用了stylus，那么vscode安装stylus插件，进行设置，不适用冒号双引号大括号
根目录下创建eslint规则文件 .eslintrc.js
（下面browsers 多了s 正确的为 browser ）
用Vue-cli创建出来的main.js中的Vue实例中的template选项是什么意思
App 作为组件引入了，在components里注册过
然后再template里写App /
不是和你在app.vue引入header.vue，然后再app.vue的template里写header /一样意思吗
同新手 我是这样理解的不知道对不对
就是给这个Vue实例初始一个App组件作为template 相当于默认组件吧！
望采纳~
vue快速上手-1
vue官方文档
如何安装node?
安装好node默认已经安装好npm了，所以不用单独安装了。
vue-cli2:
vue-cli3/cli4:
vue引用各种资源在网速不太理想的情况下，可能比较慢，推荐安装淘宝镜像
2.0版本项目结构详细介绍
3.0版本项目结构详细介绍
cli2个性化强一些，可以更友好的配置webpack；cli3通用性强一些，达到真正的开箱即用，几乎零配置，已经将最适合开发的配置打包封装。
两者都可以符合开发需求，个人比较熟悉cli2版本。
两者区别
众所周知vue是一个MVVM 渐进式框架，MVVM是vue的设计模式，在vue框架中数据会自动驱动视图。
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
在挂载开始之前被调用：相关的 render 函数首次被调用。
el 被新创建的 vm. el 也在文档内。
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
keep-alive 组件激活时调用。
keep-alive 组件停用时调用。
实例销毁之前调用。在这一步，实例仍然完全可用。
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
举例：login.vue
html、css与js的集合，为该集合体命名，用该名字复用html、css与js组成的集合体构成复用性。
根组件：new Vue()生成的组件
局部组件：组件名={}，{}内部采用的是部Vue语法
全局组件：Vue.component（‘组件名’，{}），{}内部采用的是Vue语法
1、组件都有管理组件HTML页面结果的template实例成员，template中有且只有一个根标签；
2、根组件都是作为最顶级层的父组件，局部与全局组件作为子组件，也可以成为其他局部与全局父组件；
3、子组件的数据需要隔离(数据组件化，每一个组件拥有自己的数据独立名称空间)；
4、局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件
定义需要被引入的组件YesOrNoSelect.vue
注册组件
在main.js中全局注册
或者在HelloWorld.vue中局部注册
使用自定义的组件 HelloWorld.vue
关于组件之间的通信
volar怎么快速生成vue模板
配置自定义的snippets。
通过vscode的snippets我们可以自己配置自定义的snippets，从而实现快捷生成代码片段，在VsCode里按F1，输入snippets-选择配置用户代码片段，选择后出现选择配置的界面，这里我们对Vue文件的代码片段进行配置，然后就完成了。
随着vscode以及vue的越来越普及，vetur这个名字也越来越被人熟知。vetur是一个vscode插件，用于为.vue单文件组件提供代码高亮以及语法支持。