个人名片： 😊作者简介：一名大一在校生，web前端开发专业 🤡 个人主页：python学不会123 🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。 🎅**学习目标: 暑假学完vue，复习html+css+js
前言
首先在学习vue之前在vue官网（vue官网教程l）中学习如何安装vue及安装好Vue Devtools,方便后续在控制台中查看报错
1.创建vue实例
1.必须先创建vue实例，并且需要传入配置对象 2.root容器中的代码必须符合html规范 3.root容器中中的代码被称为vue模板 4.一个vue容器对应一个实例
<!-- 准备好一个容器 -->
<div id="root">
<h1>Hello World .{{name}}</h1>
<h1>年龄：.{{age}}</h1>
</div>
<script>
//组织vue在启动时生成提示
Vue.config.productionTip=false
//创建vue实例
new Vue({
el:'#root',//el用于指定当前Vue实例为那个容器服务，值通常为css选择字符串
data:{//data用于存储数据，数据供el所指定的容器使用
name:'你好',
age:187
}
})
</script>
注意：不要忘记引入
<script src="../js/vue.js" type="text/javascript"></script>不然会报错
2.模板语法
vue模板有2种语法： 1.插值语法： 功能：用于解析标签体内容 写法：{{xxx}}中的xxx要写js表达式，并且xxx可以自动读取到data中的所有属性 2.指令语法： 功能：用于解析标签(包括标签属性、标签体内容，绑定事件....)
<div id="root">
<h1>插值语法</h1>
<h3>你好 {{name}}</h3>
<hr>
<h1>指令语法</h1>
<a v-bind:href="url">打开计时器</a>
</div>
<script>
Vue.config.productionTip = false//组织vue在启动时生成提示
new Vue({
el: '#root',
data: {
name: 'jack',
url:'./计时器.html'
}
})
</script>
##3. 什么是MVVM？
MVVM ：
view:视图层Model:数据层VueModel:视图模型层options对象： el: 类型：string| HTMLElement 作用：决定之后的Vue会管理那个dom data: 类型：Object|function(组件中data必须是一个函数) 作用：Vue实力对应的数据对象 methods:方法 类型：{[key:string]:Function} 作用：定义属于Vue 的一些方法，可以在其他地方调用，也可以在指令中使用
4.一键生成vue实例代码
1，首先打开vscode在文件中有个首选项点击配置用户代码片段
{
// Place your vue-basic 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
"Vue": {
"prefix": "vue", //触发代码片段的关键词 输入vue按下tab回车键即可 可以更改！！
"body": [
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
" <script src=\"../js/vue.js\"></script>",
"</head>",
"",
"<body>",
" <div id=\"app\"></div>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {$1},",
" methods: {$2}",
" });",
" </script>",
"</body>",
"",
"</html>",
],
"description": "vh components"
}
}
将这段代码复制进去，在输入vue回车就可以正常使用了
